@salesforcedevs/docs-components 0.0.11-chat → 0.0.11-edit
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 +1 -0
- package/package.json +1 -1
- package/src/modules/doc/chat/README.md +179 -0
- package/src/modules/doc/chat/chat.css +638 -62
- package/src/modules/doc/chat/chat.html +192 -14
- package/src/modules/doc/chat/chat.ts +456 -33
- package/src/modules/doc/contentLayout/contentLayout.html +17 -17
- package/src/modules/doc/editFile/editFile.css +613 -0
- package/src/modules/doc/editFile/editFile.html +225 -0
- package/src/modules/doc/editFile/editFile.ts +294 -0
|
@@ -1,12 +1,170 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
2
|
+
<!-- Floating trigger button - visible when chat is closed -->
|
|
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}>
|
|
3
21
|
<div class="chat-header">
|
|
4
22
|
<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>
|
|
5
64
|
</div>
|
|
6
|
-
|
|
7
|
-
<div class="chat-messages"
|
|
65
|
+
|
|
66
|
+
<div class="chat-messages">
|
|
8
67
|
<template for:each={messagesWithTyping} for:item="message">
|
|
9
|
-
<div
|
|
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
|
+
|
|
10
168
|
<div class="message-content">
|
|
11
169
|
<div class="message-bubble">
|
|
12
170
|
<template lwc:if={message.isTyping}>
|
|
@@ -17,7 +175,16 @@
|
|
|
17
175
|
</div>
|
|
18
176
|
</template>
|
|
19
177
|
<template lwc:else>
|
|
20
|
-
<
|
|
178
|
+
<template lwc:if={message.isHTML}>
|
|
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>
|
|
21
188
|
</template>
|
|
22
189
|
</div>
|
|
23
190
|
<template lwc:if={showTimestamp}>
|
|
@@ -36,28 +203,39 @@
|
|
|
36
203
|
</div>
|
|
37
204
|
</template>
|
|
38
205
|
</div>
|
|
39
|
-
|
|
206
|
+
|
|
40
207
|
<div class="chat-input-area">
|
|
41
208
|
<div class="chat-input-container">
|
|
42
|
-
<input
|
|
43
|
-
type="text"
|
|
44
|
-
class="chat-input"
|
|
209
|
+
<input
|
|
210
|
+
type="text"
|
|
211
|
+
class="chat-input"
|
|
45
212
|
placeholder={placeholder}
|
|
46
|
-
|
|
213
|
+
value={currentMessage}
|
|
214
|
+
oninput={handleInputChange}
|
|
47
215
|
onkeydown={handleKeyDown}
|
|
48
216
|
disabled={disabled}
|
|
49
217
|
/>
|
|
50
|
-
<button
|
|
218
|
+
<button
|
|
51
219
|
class="chat-send-button"
|
|
52
220
|
onclick={handleSendClick}
|
|
53
221
|
disabled={sendButtonDisabled}
|
|
54
222
|
aria-label="Send message"
|
|
55
223
|
>
|
|
56
|
-
<svg
|
|
57
|
-
|
|
224
|
+
<svg
|
|
225
|
+
class="send-icon"
|
|
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
|
+
/>
|
|
58
236
|
</svg>
|
|
59
237
|
</button>
|
|
60
238
|
</div>
|
|
61
239
|
</div>
|
|
62
240
|
</div>
|
|
63
|
-
</template>
|
|
241
|
+
</template>
|