File size: 4,423 Bytes
489f090
 
6fa48cc
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
59c4a20
6fa48cc
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
489f090
 
6fa48cc
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
489f090
6fa48cc
 
 
 
489f090
6fa48cc
 
 
 
489f090
6fa48cc
 
 
489f090
6fa48cc
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="he" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>צ'אטבוט</title>
    <style>
      body {
        margin: 0;
        font-family: 'Arial', sans-serif;
        background-color: #f3f4f6;
      }
      .chat-container {
        display: flex;
        flex-direction: column;
        height: 100vh;
      }
      .chat-header {
        background: linear-gradient(90deg, #3b82f6, #8b5cf6);
        color: white;
        padding: 16px;
        font-size: 18px;
        font-weight: bold;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      .chat-messages {
        flex: 1;
        padding: 16px;
        overflow-y: auto;
        background-color: #ffffff;
      }
      .chat-bubble {
        max-width: 80%;
        margin-bottom: 10px;
        padding: 10px 14px;
        border-radius: 20px;
        line-height: 1.5;
        font-size: 14px;
      }
      .user-bubble {
        background-color: #3b82f6;
        color: white;
        margin-left: auto;
        border-bottom-right-radius: 0;
      }
      .bot-bubble {
        background-color: #e5e7eb;
        color: #111827;
        margin-right: auto;
        border-bottom-left-radius: 0;
      }
      .chat-input {
        display: flex;
        padding: 12px;
        border-top: 1px solid #d1d5db;
        background-color: #f9fafb;
      }
      .chat-input input {
        flex: 1;
        padding: 10px;
        border-radius: 9999px;
        border: 1px solid #d1d5db;
        font-size: 14px;
        outline: none;
      }
      .chat-input button {
        margin-right: 8px;
        background-color: #8b5cf6;
        color: white;
        border: none;
        border-radius: 9999px;
        padding: 10px 16px;
        font-size: 14px;
        cursor: pointer;
      }
    </style>
    <!-- Google tag (gtag.js) -->
    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=G-JVF8N1DVSG"
    ></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag('js', new Date());

      gtag('config', 'G-JVF8N1DVSG');
    </script>
  </head>
  <body>
    <div class="chat-container">
      <div class="chat-header">
        צ'אט עם הבינה של שגיא
        <span
          id="toolsCount"
          class="ml-2 text-sm bg-white text-purple-600 font-semibold px-2 py-1 rounded-full shadow-sm"
        ></span>
      </div>

      <div class="chat-messages" id="chatMessages">
        <div class="chat-bubble bot-bubble">שלום! איך אפשר לעזור לך היום?</div>
      </div>
      <div class="chat-input">
        <input type="text" id="chatInput" placeholder="הקלד הודעה..." />
        <button onclick="sendMessage()">שלח</button>
      </div>
    </div>

    <script>
      // קריאת tools.json ועדכון כמות הכלים
      fetch('tools.json')
        .then((res) => res.json())
        .then((tools) => {
          const count = tools.length;
          document.getElementById(
            'toolsCount'
          ).textContent = `${count} כלים זמינים`;
        })
        .catch((err) => {
          console.error('שגיאה בטעינת כמות הכלים:', err);
          document.getElementById('toolsCount').textContent = 'טעינה נכשלה';
        });

      function sendMessage() {
        const input = document.getElementById('chatInput');
        const message = input.value.trim();
        if (!message) return;

        const messagesDiv = document.getElementById('chatMessages');

        const userBubble = document.createElement('div');
        userBubble.className = 'chat-bubble user-bubble';
        userBubble.textContent = message;
        messagesDiv.appendChild(userBubble);

        const botBubble = document.createElement('div');
        botBubble.className = 'chat-bubble bot-bubble';
        botBubble.textContent = getBotResponse(message);
        messagesDiv.appendChild(botBubble);

        input.value = '';
        messagesDiv.scrollTop = messagesDiv.scrollHeight;
      }

      function getBotResponse(userText) {
        // כאן תוכל לשלב לוגיקה אמיתית או חיבור ל-AI
        return 'זוהי תגובה אוטומטית :)';
      }
    </script>
  </body>
</html>