@salesforcedevs/docs-components 0.0.4 → 0.0.5-edit

package/src/modules/doc/chat/chat.html

@@ -0,0 +1,241 @@
+<template>
+    <!-- Floating trigger button - visible when chat is closed -->
+    <template lwc:if={showTriggerButton}>
+        <button
+            class="chat-trigger-button"
+            onclick={handleOpenClick}
+            aria-label="Open chat"
+            data-tooltip="Let's search!"
+        >
+            <img
+                class="chat-gif"
+                src="https://a.sfdcstatic.com/developer-website/sfdocs/hack-smart-agent/hi_bot_bg.gif"
+                alt="Hi Bot"
+            />
+            <!-- <span class="chat-trigger-text">Chat</span> -->
+        </button>
+    </template>
+
+    <!-- Chat sidebar -->
+    <div class={chatContainerClass}>
+        <div class="chat-header">
+            <h3 class="chat-title">{title}</h3>
+            <div class="chat-header-actions">
+                <button
+                    class="chat-clear-button"
+                    onclick={handleClearClick}
+                    aria-label="Clear chat messages"
+                    title="Clear chat messages"
+                >
+                    <svg
+                        class="clear-icon"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                    >
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            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"
+                        />
+                    </svg>
+                </button>
+                <button
+                    class="chat-close-button"
+                    onclick={handleCloseClick}
+                    aria-label="Close chat"
+                >
+                    <svg
+                        class="close-icon"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                    >
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M6 18L18 6M6 6l12 12"
+                        />
+                    </svg>
+                </button>
+            </div>
+        </div>
+
+        <div class="chat-messages">
+            <template for:each={messagesWithTyping} for:item="message">
+                <div
+                    key={message.id}
+                    class="message-wrapper"
+                    data-sender={message.sender}
+                >
+                    <!-- AI Avatar for assistant messages only -->
+                    <div
+                        class="message-avatar-wrapper"
+                        data-sender={message.sender}
+                    >
+                        <div class="avatar-container">
+                            <svg
+                                class="avatar-icon"
+                                viewBox="0 0 300 320"
+                                fill="none"
+                                stroke="none"
+                            >
+                                <!-- Antennas -->
+                                <g stroke="#999" stroke-width="6">
+                                    <line x1="70" y1="20" x2="70" y2="60" />
+                                    <line x1="230" y1="20" x2="230" y2="60" />
+                                </g>
+                                <circle cx="70" cy="20" r="10" fill="#3A98D8" />
+                                <circle
+                                    cx="230"
+                                    cy="20"
+                                    r="10"
+                                    fill="#3A98D8"
+                                />
+
+                                <!-- Robot Body -->
+                                <g class="thinking-body">
+                                    <rect
+                                        x="40"
+                                        y="60"
+                                        width="220"
+                                        height="240"
+                                        rx="110"
+                                        ry="110"
+                                        fill="#3A98D8"
+                                    />
+
+                                    <!-- Forehead Dots -->
+                                    <circle
+                                        cx="150"
+                                        cy="90"
+                                        r="6"
+                                        fill="#9ED4E6"
+                                    />
+                                    <rect
+                                        x="135"
+                                        y="100"
+                                        width="30"
+                                        height="10"
+                                        rx="5"
+                                        ry="5"
+                                        fill="#9ED4E6"
+                                    />
+
+                                    <!-- Face Panel -->
+                                    <rect
+                                        x="70"
+                                        y="130"
+                                        width="160"
+                                        height="80"
+                                        rx="40"
+                                        ry="40"
+                                        fill="#577C86"
+                                    />
+
+                                    <!-- Eyes (Thinking animation) -->
+                                    <circle
+                                        class="thinking-eye"
+                                        cx="115"
+                                        cy="170"
+                                        r="10"
+                                        fill="#86D3BD"
+                                    />
+                                    <circle
+                                        class="thinking-eye"
+                                        cx="185"
+                                        cy="170"
+                                        r="10"
+                                        fill="#86D3BD"
+                                    />
+
+                                    <!-- Thinking Smile -->
+                                    <path
+                                        class="thinking-smile"
+                                        d="M110 240 Q150 260 190 240"
+                                        stroke="#2F435A"
+                                        stroke-width="6"
+                                        fill="none"
+                                        stroke-linecap="round"
+                                    />
+                                </g>
+                            </svg>
+                        </div>
+                    </div>
+
+                    <div class="message-content">
+                        <div class="message-bubble">
+                            <template lwc:if={message.isTyping}>
+                                <div class="typing-indicator">
+                                    <span class="typing-dot"></span>
+                                    <span class="typing-dot"></span>
+                                    <span class="typing-dot"></span>
+                                </div>
+                            </template>
+                            <template lwc:else>
+                                <template lwc:if={message.isHTML}>
+                                    <div
+                                        class="message-text html-content"
+                                        lwc:dom="manual"
+                                        data-message-id={message.id}
+                                    ></div>
+                                </template>
+                                <template lwc:else>
+                                    <p class="message-text">{message.text}</p>
+                                </template>
+                            </template>
+                        </div>
+                        <template lwc:if={showTimestamp}>
+                            <div class="message-timestamp">
+                                <template lwc:if={message.sender}>
+                                    <span class="message-sender">
+                                        {message.sender}
+                                    </span>
+                                </template>
+                                <span class="message-time">
+                                    {message.formattedTime}
+                                </span>
+                            </div>
+                        </template>
+                    </div>
+                </div>
+            </template>
+        </div>
+
+        <div class="chat-input-area">
+            <div class="chat-input-container">
+                <input
+                    type="text"
+                    class="chat-input"
+                    placeholder={placeholder}
+                    value={currentMessage}
+                    oninput={handleInputChange}
+                    onkeydown={handleKeyDown}
+                    disabled={disabled}
+                />
+                <button
+                    class="chat-send-button"
+                    onclick={handleSendClick}
+                    disabled={sendButtonDisabled}
+                    aria-label="Send message"
+                >
+                    <svg
+                        class="send-icon"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                    >
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
+                        />
+                    </svg>
+                </button>
+            </div>
+        </div>
+    </div>
+</template>