rushchatbot 1.6.7

package/src/assets/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="77" height="47" fill="none" aria-labelledby="vite-logo-title" viewBox="0 0 77 47"><title id="vite-logo-title">Vite</title><style>.parenthesis{fill:#000}@media (prefers-color-scheme:dark){.parenthesis{fill:#fff}}</style><path fill="#9135ff" d="M40.151 45.71c-.663.844-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.493c-.92 0-1.457-1.04-.92-1.788l7.479-10.471c1.07-1.498 0-3.578-1.842-3.578H15.443c-.92 0-1.456-1.04-.92-1.788l9.696-13.576c.213-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.472c-1.07 1.497 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.087.89 1.83L40.153 45.712z"/><mask id="a" width="48" height="47" x="14" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M40.047 45.71c-.663.843-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.389c-.92 0-1.457-1.04-.92-1.788l7.479-10.472c1.07-1.497 0-3.578-1.842-3.578H15.34c-.92 0-1.456-1.04-.92-1.788l9.696-13.575c.213-.297.556-.474.92-.474H53.93c.92 0 1.456 1.04.92 1.788L47.37 13.03c-1.07 1.498 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.088.89 1.831L40.049 45.712z"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#eee6ff" rx="5.508" ry="14.704" transform="rotate(269.814 20.96 11.29)scale(-1 1)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#eee6ff" rx="10.399" ry="29.851" transform="rotate(89.814 -16.902 -8.275)scale(1 -1)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#8900ff" rx="5.508" ry="30.487" transform="rotate(89.814 -19.197 -7.127)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.928 4.177)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.738 5.52)scale(1 -1)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#eee6ff" rx="14.072" ry="22.078" transform="rotate(93.35 31.245 55.578)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx="14.592" cy="9.743" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(39.51 14.592 9.743)"/></g><g filter="url(#k)"><ellipse cx="61.728" cy="-5.321" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 61.728 -5.32)"/></g><g filter="url(#l)"><ellipse cx="55.618" cy="7.104" fill="#00c2ff" rx="5.971" ry="9.665" transform="rotate(37.892 55.618 7.104)"/></g><g filter="url(#m)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#n)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#o)"><ellipse cx="49.857" cy="30.678" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 49.857 30.678)"/></g><g filter="url(#p)"><ellipse cx="52.623" cy="33.171" fill="#00c2ff" rx="5.971" ry="15.297" transform="rotate(37.892 52.623 33.17)"/></g></g><path d="M6.919 0c-9.198 13.166-9.252 33.575 0 46.789h6.215c-9.25-13.214-9.196-33.623 0-46.789zm62.424 0h-6.215c9.198 13.166 9.252 33.575 0 46.789h6.215c9.25-13.214 9.196-33.623 0-46.789" class="parenthesis"/><defs><filter id="b" width="60.045" height="41.654" x="-5.564" y="16.92" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-40.407" y="-6.762" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-35.435" y="2.801" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-30.84" y="20.8" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-29.307" y="21.949" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="29.961" y="-17.13" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="37.754" y="3.055" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="37.754" y="3.055" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-13.43" y="-22.082" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="34.321" y="-37.644" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="38.847" y="-10.552" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-15.081" y="6.78" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-15.081" y="6.78" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="22.45" y="-1.645" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="32.919" y="11.36" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter></defs></svg>

package/src/components/ChatWidget.tsx

@@ -0,0 +1,417 @@
+import { useEffect, useRef, useState } from 'react'
+import { marked } from 'marked'
+import type { Message, Question } from '../types'
+import { useChatData, sendQuery, trackClick } from '../hooks/useChatData'
+
+marked.setOptions({ breaks: true })
+
+function MarkdownText({ text }: { text: string }) {
+  return (
+    <div
+      dangerouslySetInnerHTML={{ __html: marked.parse(text) as string }}
+      className='markdown'
+      style={{ lineHeight: 1.6 }}
+    />
+  )
+}
+
+export default function ChatWidget({ onClose }: { onClose?: () => void }) {
+  const { config, questions } = useChatData()
+  const [messages, setMessages] = useState<Message[]>([])
+  const [input, setInput] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [showMainQuestions, setShowMainQuestions] = useState(true)
+  const bottomRef = useRef<HTMLDivElement>(null)
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const [showScrollBtn, setShowScrollBtn] = useState(false)
+
+  useEffect(() => {
+    if (config) {
+      setMessages([{ id: '0', role: 'bot', text: config.chat.welcomeMessage }])
+      setShowMainQuestions(config.chat.showPreQuestionsOnStart)
+    }
+  }, [config])
+
+  useEffect(() => {
+    const el = scrollRef.current
+    if (!el) return
+    const isAtBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 60
+    if (isAtBottom) {
+      bottomRef.current?.scrollIntoView({ behavior: 'smooth' })
+      setShowScrollBtn(false)
+    } else {
+      setShowScrollBtn(true)
+    }
+  }, [messages, loading])
+
+  // Check overflow when initial FAQ menu renders
+  useEffect(() => {
+    const el = scrollRef.current
+    if (!el || !showMainQuestions) return
+    setTimeout(() => {
+      const overflows = el.scrollHeight > el.clientHeight + 10
+      setShowScrollBtn(overflows)
+    }, 50)
+  }, [showMainQuestions, questions])
+
+  function handleScroll() {
+    const el = scrollRef.current
+    if (!el) return
+    const isAtBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 60
+    if (isAtBottom) setShowScrollBtn(false)
+  }
+
+  function scrollToBottom() {
+    bottomRef.current?.scrollIntoView({ behavior: 'smooth' })
+    setShowScrollBtn(false)
+  }
+
+  if (!config) return null
+
+  const { theme, title, subtitle } = config.branding
+
+  function addMessage(msg: Omit<Message, 'id'>) {
+    setMessages(prev => [...prev, { ...msg, id: Date.now().toString() }])
+  }
+
+  async function think(ms = 1000) {
+    setLoading(true)
+    await new Promise(r => setTimeout(r, ms))
+    setLoading(false)
+  }
+
+  function followUpPhrase() {
+    const phrases = [
+      'Is there anything else I can help you with today? 😊',
+      'Happy to help further! What else would you like to know?',
+      'I hope that was helpful! Feel free to ask anything else.',
+      'You\'re in good hands! Is there something else on your mind?',
+      'I\'m here for you — what else can I assist you with?',
+    ]
+    return phrases[Math.floor(Math.random() * phrases.length)]
+  }
+
+  async function handleMainQuestionClick(q: Question) {
+    setShowMainQuestions(false)
+    addMessage({ role: 'user', text: q.question })
+    await trackClick(q.id)
+
+    if (q.subquestions?.length > 0) {
+      await think()
+      addMessage({ role: 'bot', text: `Here are some topics under **${q.question}**:`, source: 'config', subquestions: q.subquestions } as Message)
+    } else {
+      await think()
+      addMessage({ role: 'bot', text: q.answer, source: 'config' })
+    }
+  }
+
+  async function handleSubQuestionClick(q: Question, siblings: Question[]) {
+    addMessage({ role: 'user', text: q.question })
+    await trackClick(q.id)
+    await think()
+    addMessage({ role: 'bot', text: q.answer, source: 'config' })
+    await think(800)
+    addMessage({ role: 'bot', text: 'Would you have another inquiry?', subquestions: siblings, isFollowUp: true })
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    if (!input.trim()) return
+    const query = input.trim()
+    setInput('')
+    setShowMainQuestions(false)
+    addMessage({ role: 'user', text: query })
+    setLoading(true)
+    try {
+      const res = await sendQuery(query)
+      setLoading(false)
+      if (res.paragraphs?.length > 0) {
+        for (const p of res.paragraphs) {
+          addMessage({ role: 'bot', text: p, source: res.source })
+          await think(400)
+        }
+      } else {
+        addMessage({ role: 'bot', text: res.answer, source: res.source })
+      }
+    } catch {
+      setLoading(false)
+      addMessage({ role: 'bot', text: "Oops! It seems like I ran into a little hiccup. 😅 Please try again in a moment, or feel free to explore the topics below — I'm happy to help!", isFollowUp: true, subquestions: [] })
+      setShowMainQuestions(true)
+      return
+    }
+    await think(800)
+    addMessage({ role: 'bot', text: followUpPhrase(), isFollowUp: true, subquestions: [] })
+    setShowMainQuestions(true)
+  }
+
+  return (
+    <div style={{
+      fontFamily: theme.fontFamily,
+      color: theme.textColor,
+      background: theme.backgroundColor,
+      width: 380,
+      height: 580,
+      borderRadius: 16,
+      boxShadow: '0 8px 32px rgba(0,0,0,0.15)',
+      display: 'flex',
+      flexDirection: 'column',
+      overflow: 'hidden',
+    }}>
+      {/* Header */}
+      <div style={{ background: theme.primaryColor, padding: '16px 20px', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        <div>
+          <div style={{ fontWeight: 700, fontSize: 16 }}>{title}</div>
+          <div style={{ fontSize: 12, opacity: 0.85 }}>{subtitle}</div>
+        </div>
+        {onClose && (
+          <button onClick={onClose} style={{
+            background: 'transparent', border: 'none', color: '#fff',
+            fontSize: 18, cursor: 'pointer', lineHeight: 1, padding: 4, opacity: 0.8,
+          }} aria-label="Close chat">
+            ✕
+          </button>
+        )}
+      </div>
+
+      {/* Messages */}
+      <div style={{ flex: 1, position: 'relative', overflow: 'hidden' }}>
+      {showScrollBtn && (
+        <button
+          onClick={scrollToBottom}
+          style={{
+            position: 'absolute', bottom: 12, right: 12, zIndex: 10,
+            width: 34, height: 34, borderRadius: '50%',
+            background: theme.primaryColor, color: '#fff',
+            border: 'none', cursor: 'pointer',
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+            boxShadow: '0 2px 8px rgba(0,0,0,0.2)',
+          }}
+          aria-label="Scroll to latest"
+        >
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+            <path d="M8 3v10M3 9l5 5 5-5" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+          </svg>
+        </button>
+      )}
+      <div ref={scrollRef} onScroll={handleScroll} style={{ height: '100%', overflowY: 'auto', padding: '16px 16px 16px 16px', paddingTop: 20, display: 'flex', flexDirection: 'column', gap: 8 }}>
+        {messages.map((msg, idx) => (
+          <div key={msg.id} style={{ display: 'flex', flexDirection: 'column', alignItems: msg.role === 'user' ? 'flex-end' : 'flex-start', ...(idx === 0 ? { marginTop: 48 } : {}) }}>
+            <div style={{
+              background: msg.role === 'user' ? theme.userBubbleColor : theme.botBubbleColor,
+              color: msg.role === 'user' ? '#fff' : theme.textColor,
+              padding: '10px 14px',
+              borderRadius: 12,
+              maxWidth: '80%',
+              fontSize: 14,
+              lineHeight: 1.5,
+            }}>
+              {msg.subquestions && msg.subquestions.length > 0
+                ? (
+                  <>
+                    <div style={{ marginBottom: 8, fontSize: 14 }}><MarkdownText text={msg.text} /></div>
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: 4, animation: 'fadeSlideUp 0.35s ease-out' }}>
+                      {msg.subquestions.map(sub => (
+                        <button
+                          key={sub.id}
+                          onClick={() => handleSubQuestionClick(sub, msg.subquestions!)}
+                          style={{
+                            display: 'block',
+                            width: '100%',
+                            textAlign: 'left',
+                            padding: '8px 12px',
+                            borderRadius: 8,
+                            border: `1px solid ${theme.primaryColor}`,
+                            background: '#fff',
+                            color: theme.primaryColor,
+                            cursor: 'pointer',
+                            fontSize: 14,
+                          }}
+                        >
+                          {sub.question}
+                        </button>
+                      ))}
+                      <button
+                        onClick={async () => {
+                          setShowMainQuestions(false)
+                          addMessage({ role: 'bot', text: "Here's what I can help you with — feel free to pick a topic or type your own question! 😊" })
+                          await think(800)
+                          setShowMainQuestions(true)
+                        }}
+                        style={{
+                          display: 'block',
+                          width: '100%',
+                          textAlign: 'left',
+                          padding: '8px 12px',
+                          borderRadius: 8,
+                          border: `1px solid #6B7280`,
+                          background: '#fff',
+                          color: '#6B7280',
+                          cursor: 'pointer',
+                          fontSize: 14,
+                        }}
+                      >
+                        ← Back to main menu
+                      </button>
+                    </div>
+                  </>
+                )
+                : msg.role === 'bot' ? (
+                  <>
+                    <MarkdownText text={msg.text} />
+                    {msg.isEndChat && (
+                      <button
+                        onClick={() => {
+                          setMessages([{ id: '0', role: 'bot', text: config.chat.welcomeMessage }])
+                          setShowMainQuestions(false)
+                          setTimeout(() => setShowMainQuestions(true), 400)
+                        }}
+                        style={{
+                          display: 'block',
+                          marginTop: 10,
+                          padding: '7px 14px',
+                          borderRadius: 8,
+                          border: `1px solid ${theme.primaryColor}`,
+                          background: theme.primaryColor,
+                          color: '#fff',
+                          cursor: 'pointer',
+                          fontSize: 13,
+                          width: '100%',
+                        }}
+                      >
+                        🔄 Start a new chat
+                      </button>
+                    )}
+                  </>
+                ) : msg.text
+              }
+            </div>
+          </div>
+        ))}
+
+        {/* Thinking animation */}
+        {loading && (
+          <div style={{ alignSelf: 'flex-start', background: theme.botBubbleColor, padding: '10px 16px', borderRadius: 12, fontSize: 14 }}>
+            <ThinkingDots color={theme.primaryColor} />
+          </div>
+        )}
+
+        {/* Main questions */}
+        {showMainQuestions && questions.length > 0 && (
+          <div
+            style={{ display: 'flex', flexDirection: 'column', gap: 4, marginTop: 4, animation: 'fadeSlideUp 0.35s ease-out' }}>
+            {questions.map(q => (
+              <button
+                key={q.id}
+                onClick={() => handleMainQuestionClick(q)}
+                style={{
+                  textAlign: 'left',
+                  padding: '8px 12px',
+                  borderRadius: 8,
+                  border: `1px solid ${theme.primaryColor}`,
+                  background: 'transparent',
+                  color: theme.primaryColor,
+                  cursor: 'pointer',
+                  fontSize: 14,
+                }}
+              >
+                {q.question}
+              </button>
+            ))}
+            <button
+              onClick={() => {
+                setShowMainQuestions(false)
+                addMessage({ role: 'bot', text: "Thank you for chatting with us! Have a wonderful day. Feel free to come back anytime you need help. 👋😊", isEndChat: true })
+              }}
+              style={{
+                textAlign: 'left',
+                padding: '8px 12px',
+                borderRadius: 8,
+                border: '1px solid #EF4444',
+                background: 'transparent',
+                color: '#EF4444',
+                cursor: 'pointer',
+                fontSize: 14,
+                marginTop: 4,
+              }}
+            >
+              👋 I'm done, thanks!
+            </button>
+          </div>
+        )}
+
+        <div ref={bottomRef} />
+      </div>
+      </div>
+
+      {/* Input */}
+      <form onSubmit={handleSubmit} style={{ display: 'flex', borderTop: '1px solid #e5e7eb', padding: 12, gap: 8 }}>
+        <input
+          value={input}
+          onChange={e => setInput(e.target.value)}
+          placeholder="Type a message..."
+          disabled={loading}
+          style={{
+            flex: 1,
+            padding: '8px 12px',
+            borderRadius: 8,
+            border: '1px solid #e5e7eb',
+            fontSize: 14,
+            outline: 'none',
+          }}
+        />
+        <button
+          type="submit"
+          disabled={loading}
+          style={{
+            background: theme.primaryColor,
+            color: '#fff',
+            border: 'none',
+            borderRadius: 8,
+            padding: '8px 16px',
+            cursor: loading ? 'not-allowed' : 'pointer',
+            fontSize: 14,
+          }}
+        >
+          Send
+        </button>
+      </form>
+    </div>
+  )
+}
+
+function ThinkingDots({ color }: { color: string }) {
+  return (
+    <span style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
+      {[0, 1, 2].map(i => (
+        <span key={i} style={{
+          width: 7,
+          height: 7,
+          borderRadius: '50%',
+          background: color,
+          display: 'inline-block',
+          animation: `bounce 1.2s ease-in-out ${i * 0.2}s infinite`,
+        }} />
+      ))}
+      <style>{`
+        @keyframes bounce {
+          0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
+          40% { transform: translateY(-6px); opacity: 1; }
+        }
+        @keyframes fadeSlideUp {
+          from { opacity: 0; transform: translateY(12px); }
+          to   { opacity: 1; transform: translateY(0); }
+        }
+        .markdown p { margin: 0 0 6px 0; }
+        .markdown p:last-child { margin-bottom: 0; }
+        .markdown strong { font-weight: 600; }
+        .markdown ul, .markdown ol { margin: 4px 0 4px 16px; padding: 0; }
+        .markdown li { margin-bottom: 2px; }
+        .markdown a { color: inherit; text-decoration: underline; }
+        .markdown h1, .markdown h2, .markdown h3 { margin: 4px 0 6px 0; font-weight: 700; line-height: 1.3; }
+        .markdown h1 { font-size: 1.1em; }
+        .markdown h2 { font-size: 1em; }
+        .markdown h3 { font-size: 0.95em; }
+      `}</style>
+    </span>
+  )
+}

package/src/components/QuestionTree.tsx

@@ -0,0 +1,57 @@
+import { useState } from 'react'
+import type { Question } from '../types'
+
+interface Props {
+  questions: Question[]
+  onSelect: (q: Question) => void
+  primaryColor: string
+}
+
+function QuestionItem({ q, onSelect, primaryColor, depth }: {
+  q: Question
+  onSelect: (q: Question) => void
+  primaryColor: string
+  depth: number
+}) {
+  const [open, setOpen] = useState(false)
+  const hasChildren = q.subquestions?.length > 0
+
+  return (
+    <div style={{ marginLeft: depth * 12 }}>
+      <button
+        onClick={() => {
+          if (hasChildren) setOpen(o => !o)
+          else onSelect(q)
+        }}
+        style={{
+          display: 'block',
+          width: '100%',
+          textAlign: 'left',
+          padding: '8px 12px',
+          margin: '4px 0',
+          borderRadius: 8,
+          border: `1px solid ${primaryColor}`,
+          background: 'transparent',
+          color: primaryColor,
+          cursor: 'pointer',
+          fontSize: 14,
+        }}
+      >
+        {hasChildren ? (open ? '▾ ' : '▸ ') : ''}{q.question}
+      </button>
+      {open && hasChildren && q.subquestions.map(sub => (
+        <QuestionItem key={sub.id} q={sub} onSelect={onSelect} primaryColor={primaryColor} depth={depth + 1} />
+      ))}
+    </div>
+  )
+}
+
+export default function QuestionTree({ questions, onSelect, primaryColor }: Props) {
+  return (
+    <div>
+      {questions.map(q => (
+        <QuestionItem key={q.id} q={q} onSelect={onSelect} primaryColor={primaryColor} depth={0} />
+      ))}
+    </div>
+  )
+}

package/src/hooks/useChatData.ts

@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react'
+import axios from 'axios'
+import type { ChatConfig, Question } from '../types'
+
+const API = 'http://localhost:3001/api/chat'
+
+function generateSessionId(): string {
+  return 'sess_' + Date.now().toString(36) + '_' + Math.random().toString(36).slice(2, 8)
+}
+
+export function getSessionId(): string {
+  let sessionId = sessionStorage.getItem('finex_session_id')
+  if (!sessionId) {
+    sessionId = generateSessionId()
+    sessionStorage.setItem('finex_session_id', sessionId)
+  }
+  return sessionId
+}
+
+export function useChatData() {
+  const [config, setConfig] = useState<ChatConfig | null>(null)
+  const [questions, setQuestions] = useState<Question[]>([])
+
+  useEffect(() => {
+    axios.get(`${API}/config`).then(r => setConfig(r.data))
+    axios.get(`${API}/questions`).then(r => setQuestions(r.data))
+  }, [])
+
+  return { config, questions }
+}
+
+export async function sendQuery(query: string) {
+  const sessionId = getSessionId()
+  const { data } = await axios.get(`${API}/query`, {
+    params: { query, sessionId },
+    headers: { 'x-session-id': sessionId },
+    timeout: 60000,
+  })
+  return data
+}
+
+export async function trackClick(questionId: string) {
+  const sessionId = getSessionId()
+  await axios.post(
+    `${API}/click`,
+    { questionId, sessionId },
+    { headers: { 'x-session-id': sessionId } }
+  )
+}

package/src/index.css

@@ -0,0 +1,111 @@
+:root {
+  --text: #6b6375;
+  --text-h: #08060d;
+  --bg: #fff;
+  --border: #e5e4e7;
+  --code-bg: #f4f3ec;
+  --accent: #aa3bff;
+  --accent-bg: rgba(170, 59, 255, 0.1);
+  --accent-border: rgba(170, 59, 255, 0.5);
+  --social-bg: rgba(244, 243, 236, 0.5);
+  --shadow:
+    rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
+
+  --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
+  --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
+  --mono: ui-monospace, Consolas, monospace;
+
+  font: 18px/145% var(--sans);
+  letter-spacing: 0.18px;
+  color-scheme: light dark;
+  color: var(--text);
+  background: var(--bg);
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  @media (max-width: 1024px) {
+    font-size: 16px;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --text: #9ca3af;
+    --text-h: #f3f4f6;
+    --bg: #16171d;
+    --border: #2e303a;
+    --code-bg: #1f2028;
+    --accent: #c084fc;
+    --accent-bg: rgba(192, 132, 252, 0.15);
+    --accent-border: rgba(192, 132, 252, 0.5);
+    --social-bg: rgba(47, 48, 58, 0.5);
+    --shadow:
+      rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
+  }
+
+  #social .button-icon {
+    filter: invert(1) brightness(2);
+  }
+}
+
+#root {
+  width: 1126px;
+  max-width: 100%;
+  margin: 0 auto;
+  text-align: center;
+  border-inline: 1px solid var(--border);
+  min-height: 100svh;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}
+
+h1,
+h2 {
+  font-family: var(--heading);
+  font-weight: 500;
+  color: var(--text-h);
+}
+
+h1 {
+  font-size: 56px;
+  letter-spacing: -1.68px;
+  margin: 32px 0;
+  @media (max-width: 1024px) {
+    font-size: 36px;
+    margin: 20px 0;
+  }
+}
+h2 {
+  font-size: 24px;
+  line-height: 118%;
+  letter-spacing: -0.24px;
+  margin: 0 0 8px;
+  @media (max-width: 1024px) {
+    font-size: 20px;
+  }
+}
+p {
+  margin: 0;
+}
+
+code,
+.counter {
+  font-family: var(--mono);
+  display: inline-flex;
+  border-radius: 4px;
+  color: var(--text-h);
+}
+
+code {
+  font-size: 15px;
+  line-height: 135%;
+  padding: 4px 8px;
+  background: var(--code-bg);
+}

package/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+import './index.css'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+)