@salesforcedevs/docs-components 0.0.11-edit → 0.0.12-chat
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lwc.config.json +0 -1
- package/package.json +1 -1
- package/src/modules/doc/chat/chat.css +62 -638
- package/src/modules/doc/chat/chat.html +14 -192
- package/src/modules/doc/chat/chat.ts +33 -456
- package/src/modules/doc/contentLayout/contentLayout.html +17 -17
- package/src/modules/doc/chat/README.md +0 -179
- package/src/modules/doc/editFile/editFile.css +0 -613
- package/src/modules/doc/editFile/editFile.html +0 -225
- package/src/modules/doc/editFile/editFile.ts +0 -294
|
@@ -1,170 +1,12 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
<template lwc:if={showTriggerButton}>
|
|
4
|
-
<button
|
|
5
|
-
class="chat-trigger-button"
|
|
6
|
-
onclick={handleOpenClick}
|
|
7
|
-
aria-label="Open chat"
|
|
8
|
-
data-tooltip="Let's search!"
|
|
9
|
-
>
|
|
10
|
-
<img
|
|
11
|
-
class="chat-gif"
|
|
12
|
-
src="https://a.sfdcstatic.com/developer-website/sfdocs/hack-smart-agent/hi_bot_bg.gif"
|
|
13
|
-
alt="Hi Bot"
|
|
14
|
-
/>
|
|
15
|
-
<!-- <span class="chat-trigger-text">Chat</span> -->
|
|
16
|
-
</button>
|
|
17
|
-
</template>
|
|
18
|
-
|
|
19
|
-
<!-- Chat sidebar -->
|
|
20
|
-
<div class={chatContainerClass}>
|
|
2
|
+
<div class={chatContainerClass} style={maxHeight}>
|
|
21
3
|
<div class="chat-header">
|
|
22
4
|
<h3 class="chat-title">{title}</h3>
|
|
23
|
-
<div class="chat-header-actions">
|
|
24
|
-
<button
|
|
25
|
-
class="chat-clear-button"
|
|
26
|
-
onclick={handleClearClick}
|
|
27
|
-
aria-label="Clear chat messages"
|
|
28
|
-
title="Clear chat messages"
|
|
29
|
-
>
|
|
30
|
-
<svg
|
|
31
|
-
class="clear-icon"
|
|
32
|
-
viewBox="0 0 24 24"
|
|
33
|
-
fill="none"
|
|
34
|
-
stroke="currentColor"
|
|
35
|
-
>
|
|
36
|
-
<path
|
|
37
|
-
stroke-linecap="round"
|
|
38
|
-
stroke-linejoin="round"
|
|
39
|
-
stroke-width="2"
|
|
40
|
-
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
|
|
41
|
-
/>
|
|
42
|
-
</svg>
|
|
43
|
-
</button>
|
|
44
|
-
<button
|
|
45
|
-
class="chat-close-button"
|
|
46
|
-
onclick={handleCloseClick}
|
|
47
|
-
aria-label="Close chat"
|
|
48
|
-
>
|
|
49
|
-
<svg
|
|
50
|
-
class="close-icon"
|
|
51
|
-
viewBox="0 0 24 24"
|
|
52
|
-
fill="none"
|
|
53
|
-
stroke="currentColor"
|
|
54
|
-
>
|
|
55
|
-
<path
|
|
56
|
-
stroke-linecap="round"
|
|
57
|
-
stroke-linejoin="round"
|
|
58
|
-
stroke-width="2"
|
|
59
|
-
d="M6 18L18 6M6 6l12 12"
|
|
60
|
-
/>
|
|
61
|
-
</svg>
|
|
62
|
-
</button>
|
|
63
|
-
</div>
|
|
64
5
|
</div>
|
|
65
|
-
|
|
66
|
-
<div class="chat-messages">
|
|
6
|
+
|
|
7
|
+
<div class="chat-messages" style={maxHeight}>
|
|
67
8
|
<template for:each={messagesWithTyping} for:item="message">
|
|
68
|
-
<div
|
|
69
|
-
key={message.id}
|
|
70
|
-
class="message-wrapper"
|
|
71
|
-
data-sender={message.sender}
|
|
72
|
-
>
|
|
73
|
-
<!-- AI Avatar for assistant messages only -->
|
|
74
|
-
<div
|
|
75
|
-
class="message-avatar-wrapper"
|
|
76
|
-
data-sender={message.sender}
|
|
77
|
-
>
|
|
78
|
-
<div class="avatar-container">
|
|
79
|
-
<svg
|
|
80
|
-
class="avatar-icon"
|
|
81
|
-
viewBox="0 0 300 320"
|
|
82
|
-
fill="none"
|
|
83
|
-
stroke="none"
|
|
84
|
-
>
|
|
85
|
-
<!-- Antennas -->
|
|
86
|
-
<g stroke="#999" stroke-width="6">
|
|
87
|
-
<line x1="70" y1="20" x2="70" y2="60" />
|
|
88
|
-
<line x1="230" y1="20" x2="230" y2="60" />
|
|
89
|
-
</g>
|
|
90
|
-
<circle cx="70" cy="20" r="10" fill="#3A98D8" />
|
|
91
|
-
<circle
|
|
92
|
-
cx="230"
|
|
93
|
-
cy="20"
|
|
94
|
-
r="10"
|
|
95
|
-
fill="#3A98D8"
|
|
96
|
-
/>
|
|
97
|
-
|
|
98
|
-
<!-- Robot Body -->
|
|
99
|
-
<g class="thinking-body">
|
|
100
|
-
<rect
|
|
101
|
-
x="40"
|
|
102
|
-
y="60"
|
|
103
|
-
width="220"
|
|
104
|
-
height="240"
|
|
105
|
-
rx="110"
|
|
106
|
-
ry="110"
|
|
107
|
-
fill="#3A98D8"
|
|
108
|
-
/>
|
|
109
|
-
|
|
110
|
-
<!-- Forehead Dots -->
|
|
111
|
-
<circle
|
|
112
|
-
cx="150"
|
|
113
|
-
cy="90"
|
|
114
|
-
r="6"
|
|
115
|
-
fill="#9ED4E6"
|
|
116
|
-
/>
|
|
117
|
-
<rect
|
|
118
|
-
x="135"
|
|
119
|
-
y="100"
|
|
120
|
-
width="30"
|
|
121
|
-
height="10"
|
|
122
|
-
rx="5"
|
|
123
|
-
ry="5"
|
|
124
|
-
fill="#9ED4E6"
|
|
125
|
-
/>
|
|
126
|
-
|
|
127
|
-
<!-- Face Panel -->
|
|
128
|
-
<rect
|
|
129
|
-
x="70"
|
|
130
|
-
y="130"
|
|
131
|
-
width="160"
|
|
132
|
-
height="80"
|
|
133
|
-
rx="40"
|
|
134
|
-
ry="40"
|
|
135
|
-
fill="#577C86"
|
|
136
|
-
/>
|
|
137
|
-
|
|
138
|
-
<!-- Eyes (Thinking animation) -->
|
|
139
|
-
<circle
|
|
140
|
-
class="thinking-eye"
|
|
141
|
-
cx="115"
|
|
142
|
-
cy="170"
|
|
143
|
-
r="10"
|
|
144
|
-
fill="#86D3BD"
|
|
145
|
-
/>
|
|
146
|
-
<circle
|
|
147
|
-
class="thinking-eye"
|
|
148
|
-
cx="185"
|
|
149
|
-
cy="170"
|
|
150
|
-
r="10"
|
|
151
|
-
fill="#86D3BD"
|
|
152
|
-
/>
|
|
153
|
-
|
|
154
|
-
<!-- Thinking Smile -->
|
|
155
|
-
<path
|
|
156
|
-
class="thinking-smile"
|
|
157
|
-
d="M110 240 Q150 260 190 240"
|
|
158
|
-
stroke="#2F435A"
|
|
159
|
-
stroke-width="6"
|
|
160
|
-
fill="none"
|
|
161
|
-
stroke-linecap="round"
|
|
162
|
-
/>
|
|
163
|
-
</g>
|
|
164
|
-
</svg>
|
|
165
|
-
</div>
|
|
166
|
-
</div>
|
|
167
|
-
|
|
9
|
+
<div key={message.id} class="message-wrapper" data-sender={message.sender}>
|
|
168
10
|
<div class="message-content">
|
|
169
11
|
<div class="message-bubble">
|
|
170
12
|
<template lwc:if={message.isTyping}>
|
|
@@ -175,16 +17,7 @@
|
|
|
175
17
|
</div>
|
|
176
18
|
</template>
|
|
177
19
|
<template lwc:else>
|
|
178
|
-
<
|
|
179
|
-
<div
|
|
180
|
-
class="message-text html-content"
|
|
181
|
-
lwc:dom="manual"
|
|
182
|
-
data-message-id={message.id}
|
|
183
|
-
></div>
|
|
184
|
-
</template>
|
|
185
|
-
<template lwc:else>
|
|
186
|
-
<p class="message-text">{message.text}</p>
|
|
187
|
-
</template>
|
|
20
|
+
<p class="message-text">{message.text}</p>
|
|
188
21
|
</template>
|
|
189
22
|
</div>
|
|
190
23
|
<template lwc:if={showTimestamp}>
|
|
@@ -203,39 +36,28 @@
|
|
|
203
36
|
</div>
|
|
204
37
|
</template>
|
|
205
38
|
</div>
|
|
206
|
-
|
|
39
|
+
|
|
207
40
|
<div class="chat-input-area">
|
|
208
41
|
<div class="chat-input-container">
|
|
209
|
-
<input
|
|
210
|
-
type="text"
|
|
211
|
-
class="chat-input"
|
|
42
|
+
<input
|
|
43
|
+
type="text"
|
|
44
|
+
class="chat-input"
|
|
212
45
|
placeholder={placeholder}
|
|
213
|
-
|
|
214
|
-
oninput={handleInputChange}
|
|
46
|
+
onchange={handleInputChange}
|
|
215
47
|
onkeydown={handleKeyDown}
|
|
216
48
|
disabled={disabled}
|
|
217
49
|
/>
|
|
218
|
-
<button
|
|
50
|
+
<button
|
|
219
51
|
class="chat-send-button"
|
|
220
52
|
onclick={handleSendClick}
|
|
221
53
|
disabled={sendButtonDisabled}
|
|
222
54
|
aria-label="Send message"
|
|
223
55
|
>
|
|
224
|
-
<svg
|
|
225
|
-
|
|
226
|
-
viewBox="0 0 24 24"
|
|
227
|
-
fill="none"
|
|
228
|
-
stroke="currentColor"
|
|
229
|
-
>
|
|
230
|
-
<path
|
|
231
|
-
stroke-linecap="round"
|
|
232
|
-
stroke-linejoin="round"
|
|
233
|
-
stroke-width="2"
|
|
234
|
-
d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
|
|
235
|
-
/>
|
|
56
|
+
<svg class="send-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
57
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
|
|
236
58
|
</svg>
|
|
237
59
|
</button>
|
|
238
60
|
</div>
|
|
239
61
|
</div>
|
|
240
62
|
</div>
|
|
241
|
-
</template>
|
|
63
|
+
</template>
|