Chat Widget (#10187)

### What problem does this PR solve? Add a chat widget. I'll probably need some assistance to get this ready for merge! ### Type of change - [x] New Feature (non-breaking change which adds functionality) Co-authored-by: Mohamed Mathari <nocodeventure@Mac-mini-van-Mohamed.fritz.box>
2025-11-24 22:16:57 +00:00 · 2025-09-22 05:03:33 +02:00 · 2025-09-22 05:03:33 +02:00 · 2e4295d5ca
commit 2e4295d5ca
parent d11b1628a1
6 changed files with 975 additions and 6 deletions
--- a/chat_demo/index.html
+++ b/chat_demo/index.html
@ -0,0 +1,19 @@
+<iframe src="http://localhost:9222/next-chats/widget?shared_id=9dcfc68696c611f0bb789b9b8b765d12&from=chat&auth=U4MDU3NzkwOTZjNzExZjBiYjc4OWI5Yj&mode=master&streaming=false"
+  style="position:fixed;bottom:0;right:0;width:100px;height:100px;border:none;background:transparent;z-index:9999"
+  frameborder="0" allow="microphone;camera"></iframe>
+<script>
+window.addEventListener('message',e=>{
+  if(e.origin!=='http://localhost:9222')return;
+  if(e.data.type==='CREATE_CHAT_WINDOW'){
+    if(document.getElementById('chat-win'))return;
+    const i=document.createElement('iframe');
+    i.id='chat-win';i.src=e.data.src;
+    i.style.cssText='position:fixed;bottom:104px;right:24px;width:380px;height:500px;border:none;background:transparent;z-index:9998;display:none';
+    i.frameBorder='0';i.allow='microphone;camera';
+    document.body.appendChild(i);
+  }else if(e.data.type==='TOGGLE_CHAT'){
+    const w=document.getElementById('chat-win');
+    if(w)w.style.display=e.data.isOpen?'block':'none';
+  }else if(e.data.type==='SCROLL_PASSTHROUGH')window.scrollBy(0,e.data.deltaY);
+});
+</script>
--- a/chat_demo/widget_demo.html
+++ b/chat_demo/widget_demo.html
@ -0,0 +1,154 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Floating Chat Widget Demo</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 40px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            color: white;
+        }
+        
+        .demo-content {
+            max-width: 800px;
+            margin: 0 auto;
+        }
+        
+        .demo-content h1 {
+            text-align: center;
+            font-size: 2.5rem;
+            margin-bottom: 2rem;
+        }
+        
+        .demo-content p {
+            font-size: 1.2rem;
+            line-height: 1.6;
+            margin-bottom: 1.5rem;
+        }
+        
+        .feature-list {
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 10px;
+            padding: 2rem;
+            margin: 2rem 0;
+        }
+        
+        .feature-list h3 {
+            margin-top: 0;
+            font-size: 1.5rem;
+        }
+        
+        .feature-list ul {
+            list-style-type: none;
+            padding: 0;
+        }
+        
+        .feature-list li {
+            padding: 0.5rem 0;
+            padding-left: 1.5rem;
+            position: relative;
+        }
+        
+        .feature-list li:before {
+            content: "✓";
+            position: absolute;
+            left: 0;
+            color: #4ade80;
+            font-weight: bold;
+        }
+    </style>
+</head>
+<body>
+    <div class="demo-content">
+        <h1>🚀 Floating Chat Widget Demo</h1>
+        
+        <p>
+            Welcome to our demo page! This page simulates a real website with content. 
+            Look for the floating chat button in the bottom-right corner - just like Intercom!
+        </p>
+        
+        <div class="feature-list">
+            <h3>🎯 Widget Features</h3>
+            <ul>
+                <li>Floating button that stays visible while scrolling</li>
+                <li>Click to open/close the chat window</li>
+                <li>Minimize button to collapse the chat</li>
+                <li>Professional Intercom-style design</li>
+                <li>Unread message indicator (red badge)</li>
+                <li>Transparent background integration</li>
+                <li>Responsive design for all screen sizes</li>
+            </ul>
+        </div>
+        
+        <p>
+            The chat widget is completely separate from your website's content and won't 
+            interfere with your existing layout or functionality. It's designed to be 
+            lightweight and performant.
+        </p>
+        
+        <p>
+            Try scrolling this page - notice how the chat button stays in position. 
+            Click it to start a conversation with our AI assistant!
+        </p>
+        
+        <div class="feature-list">
+            <h3>🔧 Implementation</h3>
+            <ul>
+                <li>Simple iframe embed - just copy and paste</li>
+                <li>No JavaScript dependencies required</li>
+                <li>Works on any website or platform</li>
+                <li>Customizable appearance and behavior</li>
+                <li>Secure and privacy-focused</li>
+            </ul>
+        </div>
+        
+        <p>
+            This is just placeholder content to demonstrate how the widget integrates 
+            seamlessly with your existing website content. The widget floats above 
+            everything else without disrupting your user experience.
+        </p>
+        
+        <p style="margin-top: 4rem; text-align: center; font-style: italic;">
+            🎉 Ready to add this to your website? Get your embed code from the admin panel!
+        </p>
+    </div>
+
+    <iframe id="main-widget" src="http://localhost:9222/next-chats/widget?shared_id=9dcfc68696c611f0bb789b9b8b765d12&from=chat&auth=U4MDU3NzkwOTZjNzExZjBiYjc4OWI5Yj&visible_avatar=1&locale=zh&mode=master&streaming=false"
+    style="position:fixed;bottom:0;right:0;width:100px;height:100px;border:none;background:transparent;z-index:9999;opacity:0;transition:opacity 0.2s ease"
+    frameborder="0" allow="microphone;camera"></iframe>
+  <script>
+  window.addEventListener('message',e=>{
+    if(e.origin!=='http://localhost:9222')return;
+    if(e.data.type==='WIDGET_READY'){
+      // Show the main widget when React is ready
+      const mainWidget = document.getElementById('main-widget');
+      if(mainWidget) mainWidget.style.opacity = '1';
+    }else if(e.data.type==='CREATE_CHAT_WINDOW'){
+      if(document.getElementById('chat-win'))return;
+      const i=document.createElement('iframe');
+      i.id='chat-win';i.src=e.data.src;
+      i.style.cssText='position:fixed;bottom:104px;right:24px;width:380px;height:500px;border:none;background:transparent;z-index:9998;display:none;opacity:0;transition:opacity 0.2s ease';
+      i.frameBorder='0';i.allow='microphone;camera';
+      document.body.appendChild(i);
+    }else if(e.data.type==='TOGGLE_CHAT'){
+      const w=document.getElementById('chat-win');
+      if(w){
+        if(e.data.isOpen){
+          w.style.display='block';
+          // Wait for the iframe content to be ready before showing
+          setTimeout(() => w.style.opacity='1', 100);
+        }else{
+          w.style.opacity='0';
+          setTimeout(() => w.style.display='none', 200);
+        }
+      }
+    }else if(e.data.type==='SCROLL_PASSTHROUGH')window.scrollBy(0,e.data.deltaY);
+  });
+  </script>
+</body>
+</html>
--- a/web/src/components/embed-dialog/index.tsx
+++ b/web/src/components/embed-dialog/index.tsx
@ -15,6 +15,8 @@ import {
  FormLabel,
  FormMessage,
 } from '@/components/ui/form';
+import { Label } from '@/components/ui/label';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 import { Switch } from '@/components/ui/switch';
 import { SharedFrom } from '@/constants/chat';
 import {
@ -32,6 +34,8 @@ import { z } from 'zod';
 const FormSchema = z.object({
  visibleAvatar: z.boolean(),
  locale: z.string(),
+  embedType: z.enum(['fullscreen', 'widget']),
+  enableStreaming: z.boolean(),
 });

 type IProps = IModalProps<any> & {
@ -55,6 +59,8 @@ function EmbedDialog({
    defaultValues: {
      visibleAvatar: false,
      locale: '',
+      embedType: 'fullscreen' as const,
+      enableStreaming: false,
    },
  });

@ -68,20 +74,60 @@ function EmbedDialog({
  }, []);

  const generateIframeSrc = useCallback(() => {
-    const { visibleAvatar, locale } = values;
-    let src = `${location.origin}${from === SharedFrom.Agent ? Routes.AgentShare : Routes.ChatShare}?shared_id=${token}&from=${from}&auth=${beta}`;
+    const { visibleAvatar, locale, embedType, enableStreaming } = values;
+    const baseRoute =
+      embedType === 'widget'
+        ? Routes.ChatWidget
+        : from === SharedFrom.Agent
+          ? Routes.AgentShare
+          : Routes.ChatShare;
+    let src = `${location.origin}${baseRoute}?shared_id=${token}&from=${from}&auth=${beta}`;
    if (visibleAvatar) {
      src += '&visible_avatar=1';
    }
    if (locale) {
      src += `&locale=${locale}`;
    }
+    if (enableStreaming) {
+      src += '&streaming=true';
+    }
    return src;
  }, [beta, from, token, values]);

  const text = useMemo(() => {
    const iframeSrc = generateIframeSrc();
-    return `
+    const { embedType } = values;
+
+    if (embedType === 'widget') {
+      const { enableStreaming } = values;
+      const streamingParam = enableStreaming
+        ? '&streaming=true'
+        : '&streaming=false';
+      return `
+  ~~~ html
+  <iframe src="${iframeSrc}&mode=master${streamingParam}"
+    style="position:fixed;bottom:0;right:0;width:100px;height:100px;border:none;background:transparent;z-index:9999"
+    frameborder="0" allow="microphone;camera"></iframe>
+  <script>
+  window.addEventListener('message',e=>{
+    if(e.origin!=='${location.origin.replace(/:\d+/, ':9222')}')return;
+    if(e.data.type==='CREATE_CHAT_WINDOW'){
+      if(document.getElementById('chat-win'))return;
+      const i=document.createElement('iframe');
+      i.id='chat-win';i.src=e.data.src;
+      i.style.cssText='position:fixed;bottom:104px;right:24px;width:380px;height:500px;border:none;background:transparent;z-index:9998;display:none';
+      i.frameBorder='0';i.allow='microphone;camera';
+      document.body.appendChild(i);
+    }else if(e.data.type==='TOGGLE_CHAT'){
+      const w=document.getElementById('chat-win');
+      if(w)w.style.display=e.data.isOpen?'block':'none';
+    }else if(e.data.type==='SCROLL_PASSTHROUGH')window.scrollBy(0,e.data.deltaY);
+  });
+  </script>
+~~~
+  `;
+    } else {
+      return `
  ~~~ html
  <iframe
  src="${iframeSrc}"
@ -91,7 +137,8 @@ function EmbedDialog({
 </iframe>
 ~~~
  `;
-  }, [generateIframeSrc]);
+    }
+  }, [generateIframeSrc, values]);

  return (
    <Dialog open onOpenChange={hideModal}>
@ -104,6 +151,36 @@ function EmbedDialog({
        <section className="w-full overflow-auto space-y-5 text-sm text-text-secondary">
          <Form {...form}>
            <form className="space-y-5">
+              <FormField
+                control={form.control}
+                name="embedType"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Embed Type</FormLabel>
+                    <FormControl>
+                      <RadioGroup
+                        onValueChange={field.onChange}
+                        value={field.value}
+                        className="flex flex-col space-y-2"
+                      >
+                        <div className="flex items-center space-x-2">
+                          <RadioGroupItem value="fullscreen" id="fullscreen" />
+                          <Label htmlFor="fullscreen" className="text-sm">
+                            Fullscreen Chat (Traditional iframe)
+                          </Label>
+                        </div>
+                        <div className="flex items-center space-x-2">
+                          <RadioGroupItem value="widget" id="widget" />
+                          <Label htmlFor="widget" className="text-sm">
+                            Floating Widget (Intercom-style)
+                          </Label>
+                        </div>
+                      </RadioGroup>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
              <FormField
                control={form.control}
                name="visibleAvatar"
@ -120,6 +197,24 @@ function EmbedDialog({
                  </FormItem>
                )}
              />
+              {values.embedType === 'widget' && (
+                <FormField
+                  control={form.control}
+                  name="enableStreaming"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Enable Streaming Responses</FormLabel>
+                      <FormControl>
+                        <Switch
+                          checked={field.value}
+                          onCheckedChange={field.onChange}
+                        ></Switch>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
              <FormField
                control={form.control}
                name="locale"
@ -138,9 +233,11 @@ function EmbedDialog({
              />
            </form>
          </Form>
-          <div>
+          <div className="max-h-[350px] overflow-auto">
            <span>{t('embedCode', { keyPrefix: 'search' })}</span>
-            <HightLightMarkdown>{text}</HightLightMarkdown>
+            <div className="max-h-full overflow-y-auto">
+              <HightLightMarkdown>{text}</HightLightMarkdown>
+            </div>
          </div>
          <div className=" font-medium mt-4 mb-1">
            {t(isAgent ? 'flow' : 'chat', { keyPrefix: 'header' })}
--- a/web/src/components/floating-chat-widget.tsx
+++ b/web/src/components/floating-chat-widget.tsx
@ -0,0 +1,666 @@
+import { MessageType, SharedFrom } from '@/constants/chat';
+import { useFetchNextConversationSSE } from '@/hooks/chat-hooks';
+import { useFetchFlowSSE } from '@/hooks/flow-hooks';
+import { useFetchExternalChatInfo } from '@/hooks/use-chat-request';
+import i18n from '@/locales/config';
+import { MessageCircle, Minimize2, Send, X } from 'lucide-react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  useGetSharedChatSearchParams,
+  useSendSharedMessage,
+} from '../pages/next-chats/hooks/use-send-shared-message';
+
+const FloatingChatWidget = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isMinimized, setIsMinimized] = useState(false);
+  const [inputValue, setInputValue] = useState('');
+  const [lastResponseId, setLastResponseId] = useState<string | null>(null);
+  const [displayMessages, setDisplayMessages] = useState<any[]>([]);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  const {
+    sharedId: conversationId,
+    from,
+    locale,
+    visibleAvatar,
+  } = useGetSharedChatSearchParams();
+
+  // Check if we're in button-only mode or window-only mode
+  const urlParams = new URLSearchParams(window.location.search);
+  const mode = urlParams.get('mode') || 'full'; // 'button', 'window', or 'full'
+  const enableStreaming = urlParams.get('streaming') === 'true'; // Only enable if explicitly set to true
+
+  const {
+    handlePressEnter,
+    handleInputChange,
+    value: hookValue,
+    sendLoading,
+    derivedMessages,
+    hasError,
+  } = useSendSharedMessage();
+
+  // Sync our local input with the hook's value when needed
+  useEffect(() => {
+    if (hookValue && hookValue !== inputValue) {
+      setInputValue(hookValue);
+    }
+  }, [hookValue, inputValue]);
+
+  const { data: chatInfo } = useFetchExternalChatInfo();
+
+  const useFetchAvatar = useMemo(() => {
+    return from === SharedFrom.Agent
+      ? useFetchFlowSSE
+      : useFetchNextConversationSSE;
+  }, [from]);
+
+  const { data: avatarData } = useFetchAvatar();
+
+  // Play sound when opening
+  const playNotificationSound = useCallback(() => {
+    try {
+      const audioContext = new (window.AudioContext ||
+        (window as any).webkitAudioContext)();
+      const oscillator = audioContext.createOscillator();
+      const gainNode = audioContext.createGain();
+
+      oscillator.connect(gainNode);
+      gainNode.connect(audioContext.destination);
+
+      oscillator.frequency.value = 800;
+      oscillator.type = 'sine';
+
+      gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
+      gainNode.gain.exponentialRampToValueAtTime(
+        0.01,
+        audioContext.currentTime + 0.3,
+      );
+
+      oscillator.start(audioContext.currentTime);
+      oscillator.stop(audioContext.currentTime + 0.3);
+    } catch (error) {
+      // Silent fail if audio not supported
+    }
+  }, []);
+
+  // Play sound for AI responses (Intercom-style)
+  const playResponseSound = useCallback(() => {
+    try {
+      const audioContext = new (window.AudioContext ||
+        (window as any).webkitAudioContext)();
+      const oscillator = audioContext.createOscillator();
+      const gainNode = audioContext.createGain();
+
+      oscillator.connect(gainNode);
+      gainNode.connect(audioContext.destination);
+
+      oscillator.frequency.value = 600;
+      oscillator.type = 'sine';
+
+      gainNode.gain.setValueAtTime(0.2, audioContext.currentTime);
+      gainNode.gain.exponentialRampToValueAtTime(
+        0.01,
+        audioContext.currentTime + 0.2,
+      );
+
+      oscillator.start(audioContext.currentTime);
+      oscillator.stop(audioContext.currentTime + 0.2);
+    } catch (error) {
+      // Silent fail if audio not supported
+    }
+  }, []);
+
+  // Set loaded state and locale
+  useEffect(() => {
+    // Set component as loaded after a brief moment to prevent flash
+    const timer = setTimeout(() => {
+      setIsLoaded(true);
+      // Tell parent window that we're ready to be shown
+      window.parent.postMessage(
+        {
+          type: 'WIDGET_READY',
+        },
+        '*',
+      );
+    }, 50);
+
+    if (locale && i18n.language !== locale) {
+      i18n.changeLanguage(locale);
+    }
+
+    return () => clearTimeout(timer);
+  }, [locale]);
+
+  // Handle message display based on streaming preference
+  useEffect(() => {
+    if (!derivedMessages) {
+      setDisplayMessages([]);
+      return;
+    }
+
+    if (enableStreaming) {
+      // Show messages as they stream
+      setDisplayMessages(derivedMessages);
+    } else {
+      // Only show complete messages (non-streaming mode)
+      const completeMessages = derivedMessages.filter((msg, index) => {
+        // Always show user messages immediately
+        if (msg.role === MessageType.User) return true;
+
+        // For AI messages, only show when response is complete (not loading)
+        if (msg.role === MessageType.Assistant) {
+          return !sendLoading || index < derivedMessages.length - 1;
+        }
+
+        return true;
+      });
+      setDisplayMessages(completeMessages);
+    }
+  }, [derivedMessages, enableStreaming, sendLoading]);
+
+  // Auto-scroll to bottom when display messages change
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [displayMessages]);
+
+  // Play sound only when AI response is complete (not streaming chunks)
+  useEffect(() => {
+    if (derivedMessages && derivedMessages.length > 0 && !sendLoading) {
+      const lastMessage = derivedMessages[derivedMessages.length - 1];
+      if (
+        lastMessage.role === MessageType.Assistant &&
+        lastMessage.id !== lastResponseId &&
+        derivedMessages.length > 1
+      ) {
+        setLastResponseId(lastMessage.id || '');
+        playResponseSound();
+      }
+    }
+  }, [derivedMessages, sendLoading, lastResponseId, playResponseSound]);
+
+  const toggleChat = useCallback(() => {
+    if (mode === 'button') {
+      // In button mode, communicate with parent window to show/hide chat window
+      window.parent.postMessage(
+        {
+          type: 'TOGGLE_CHAT',
+          isOpen: !isOpen,
+        },
+        '*',
+      );
+      setIsOpen(!isOpen);
+      if (!isOpen) {
+        playNotificationSound();
+      }
+    } else {
+      // In full mode, handle locally
+      if (!isOpen) {
+        setIsOpen(true);
+        setIsMinimized(false);
+        playNotificationSound();
+      } else {
+        setIsOpen(false);
+        setIsMinimized(false);
+      }
+    }
+  }, [isOpen, mode, playNotificationSound]);
+
+  const minimizeChat = useCallback(() => {
+    setIsMinimized(true);
+  }, []);
+
+  const handleSendMessage = useCallback(() => {
+    if (!inputValue.trim() || sendLoading) return;
+
+    // Update the hook's internal state first
+    const syntheticEvent = {
+      target: { value: inputValue },
+      currentTarget: { value: inputValue },
+      preventDefault: () => {},
+    } as any;
+
+    handleInputChange(syntheticEvent);
+
+    // Wait for state to update, then send
+    setTimeout(() => {
+      handlePressEnter([]);
+      // Clear our local input after sending
+      setInputValue('');
+    }, 50);
+  }, [inputValue, sendLoading, handleInputChange, handlePressEnter]);
+
+  const handleKeyPress = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        handleSendMessage();
+      }
+    },
+    [handleSendMessage],
+  );
+
+  if (!conversationId) {
+    return (
+      <div className="fixed bottom-5 right-5 z-50">
+        <div className="bg-red-500 text-white p-4 rounded-lg shadow-lg">
+          Error: No conversation ID provided
+        </div>
+      </div>
+    );
+  }
+
+  // Remove the blocking return - we'll handle visibility with CSS instead
+
+  const messageCount = displayMessages?.length || 0;
+
+  // Render different content based on mode
+  if (mode === 'master') {
+    // Master mode - handles everything and creates second iframe dynamically
+    useEffect(() => {
+      // Create the chat window iframe dynamically when needed
+      const createChatWindow = () => {
+        // Check if iframe already exists in parent document
+        window.parent.postMessage(
+          {
+            type: 'CREATE_CHAT_WINDOW',
+            src: window.location.href.replace('mode=master', 'mode=window'),
+          },
+          '*',
+        );
+      };
+
+      createChatWindow();
+
+      // Listen for our own toggle events to show/hide the dynamic iframe
+      const handleToggle = (e: MessageEvent) => {
+        if (e.source === window) return; // Ignore our own messages
+
+        const chatWindow = document.getElementById(
+          'dynamic-chat-window',
+        ) as HTMLIFrameElement;
+        if (chatWindow && e.data.type === 'TOGGLE_CHAT') {
+          chatWindow.style.display = e.data.isOpen ? 'block' : 'none';
+        }
+      };
+
+      window.addEventListener('message', handleToggle);
+      return () => window.removeEventListener('message', handleToggle);
+    }, []);
+
+    // Show just the button in master mode
+    return (
+      <div
+        className={`fixed bottom-6 right-6 z-50 transition-opacity duration-300 ${isLoaded ? 'opacity-100' : 'opacity-0'}`}
+      >
+        <button
+          onClick={() => {
+            const newIsOpen = !isOpen;
+            setIsOpen(newIsOpen);
+            if (newIsOpen) playNotificationSound();
+
+            // Tell the parent to show/hide the dynamic iframe
+            window.parent.postMessage(
+              {
+                type: 'TOGGLE_CHAT',
+                isOpen: newIsOpen,
+              },
+              '*',
+            );
+          }}
+          className={`w-14 h-14 bg-blue-600 hover:bg-blue-700 text-white rounded-full transition-all duration-300 flex items-center justify-center group ${
+            isOpen ? 'scale-95' : 'scale-100 hover:scale-105'
+          }`}
+        >
+          <div
+            className={`transition-transform duration-300 ${isOpen ? 'rotate-45' : 'rotate-0'}`}
+          >
+            {isOpen ? <X size={24} /> : <MessageCircle size={24} />}
+          </div>
+        </button>
+
+        {/* Unread Badge */}
+        {!isOpen && messageCount > 0 && (
+          <div className="absolute -top-2 -right-2 w-6 h-6 bg-red-500 text-white text-xs font-bold rounded-full flex items-center justify-center animate-pulse">
+            {messageCount > 9 ? '9+' : messageCount}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  if (mode === 'button') {
+    // Only render the floating button
+    return (
+      <div
+        className={`fixed bottom-6 right-6 z-50 transition-opacity duration-300 ${isLoaded ? 'opacity-100' : 'opacity-0'}`}
+      >
+        <button
+          onClick={toggleChat}
+          className={`w-14 h-14 bg-blue-600 hover:bg-blue-700 text-white rounded-full transition-all duration-300 flex items-center justify-center group ${
+            isOpen ? 'scale-95' : 'scale-100 hover:scale-105'
+          }`}
+        >
+          <div
+            className={`transition-transform duration-300 ${isOpen ? 'rotate-45' : 'rotate-0'}`}
+          >
+            {isOpen ? <X size={24} /> : <MessageCircle size={24} />}
+          </div>
+        </button>
+
+        {/* Unread Badge */}
+        {!isOpen && messageCount > 0 && (
+          <div className="absolute -top-2 -right-2 w-6 h-6 bg-red-500 text-white text-xs font-bold rounded-full flex items-center justify-center animate-pulse">
+            {messageCount > 9 ? '9+' : messageCount}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  if (mode === 'window') {
+    // Only render the chat window (always open)
+    return (
+      <div
+        className={`fixed top-0 left-0 z-50 bg-blue-600 rounded-2xl transition-all duration-300 ease-out h-[500px] w-[380px] overflow-hidden ${isLoaded ? 'opacity-100' : 'opacity-0'}`}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between p-4 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-t-2xl">
+          <div className="flex items-center space-x-3">
+            <div className="w-8 h-8 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
+              <MessageCircle size={18} />
+            </div>
+            <div>
+              <h3 className="font-semibold text-sm">
+                {chatInfo?.title || 'Chat Support'}
+              </h3>
+              <p className="text-xs text-blue-100">
+                We typically reply instantly
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Messages and Input */}
+        <div
+          className="flex flex-col h-[436px] bg-white"
+          style={{ borderRadius: '0 0 16px 16px' }}
+        >
+          <div
+            className="flex-1 overflow-y-auto p-4 space-y-4"
+            onWheel={(e) => {
+              const element = e.currentTarget;
+              const isAtTop = element.scrollTop === 0;
+              const isAtBottom =
+                element.scrollTop + element.clientHeight >=
+                element.scrollHeight - 1;
+
+              // Allow scroll to pass through to parent when at boundaries
+              if ((isAtTop && e.deltaY < 0) || (isAtBottom && e.deltaY > 0)) {
+                e.preventDefault();
+                // Let the parent handle the scroll
+                window.parent.postMessage(
+                  {
+                    type: 'SCROLL_PASSTHROUGH',
+                    deltaY: e.deltaY,
+                  },
+                  '*',
+                );
+              }
+            }}
+          >
+            {displayMessages?.map((message, index) => (
+              <div
+                key={index}
+                className={`flex ${message.role === MessageType.User ? 'justify-end' : 'justify-start'}`}
+              >
+                <div
+                  className={`max-w-[280px] px-4 py-2 rounded-2xl ${
+                    message.role === MessageType.User
+                      ? 'bg-blue-600 text-white rounded-br-md'
+                      : 'bg-gray-100 text-gray-800 rounded-bl-md'
+                  }`}
+                >
+                  <p className="text-sm leading-relaxed whitespace-pre-wrap">
+                    {message.content}
+                  </p>
+                </div>
+              </div>
+            ))}
+
+            {/* Clean Typing Indicator */}
+            {sendLoading && !enableStreaming && (
+              <div className="flex justify-start pl-4">
+                <div className="flex space-x-1">
+                  <div className="w-2 h-2 bg-blue-500 rounded-full animate-bounce"></div>
+                  <div
+                    className="w-2 h-2 bg-blue-500 rounded-full animate-bounce"
+                    style={{ animationDelay: '0.1s' }}
+                  ></div>
+                  <div
+                    className="w-2 h-2 bg-blue-500 rounded-full animate-bounce"
+                    style={{ animationDelay: '0.2s' }}
+                  ></div>
+                </div>
+              </div>
+            )}
+
+            <div ref={messagesEndRef} />
+          </div>
+
+          {/* Input Area */}
+          <div className="border-t border-gray-200 p-4">
+            <div className="flex items-end space-x-3">
+              <div className="flex-1">
+                <textarea
+                  value={inputValue}
+                  onChange={(e) => {
+                    const newValue = e.target.value;
+                    setInputValue(newValue);
+                    handleInputChange(e);
+                  }}
+                  onKeyPress={handleKeyPress}
+                  placeholder="Type your message..."
+                  rows={1}
+                  className="w-full resize-none border border-gray-300 rounded-2xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  style={{ minHeight: '44px', maxHeight: '120px' }}
+                  disabled={hasError || sendLoading}
+                />
+              </div>
+              <button
+                onClick={handleSendMessage}
+                disabled={!inputValue.trim() || sendLoading}
+                className="p-3 bg-blue-600 text-white rounded-full hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              >
+                <Send size={18} />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Full mode - render everything together (original behavior)
+  return (
+    <div
+      className={`transition-opacity duration-300 ${isLoaded ? 'opacity-100' : 'opacity-0'}`}
+    >
+      {/* Chat Widget Container */}
+      {isOpen && (
+        <div
+          className={`fixed bottom-24 right-6 z-50 bg-blue-600 rounded-2xl transition-all duration-300 ease-out ${
+            isMinimized ? 'h-16' : 'h-[500px]'
+          } w-[380px] overflow-hidden`}
+        >
+          {/* Header */}
+          <div className="flex items-center justify-between p-4 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-t-2xl">
+            <div className="flex items-center space-x-3">
+              <div className="w-8 h-8 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
+                <MessageCircle size={18} />
+              </div>
+              <div>
+                <h3 className="font-semibold text-sm">
+                  {chatInfo?.title || 'Chat Support'}
+                </h3>
+                <p className="text-xs text-blue-100">
+                  We typically reply instantly
+                </p>
+              </div>
+            </div>
+            <div className="flex items-center space-x-1">
+              <button
+                onClick={minimizeChat}
+                className="p-1.5 hover:bg-white hover:bg-opacity-20 rounded-full transition-colors"
+              >
+                <Minimize2 size={16} />
+              </button>
+              <button
+                onClick={toggleChat}
+                className="p-1.5 hover:bg-white hover:bg-opacity-20 rounded-full transition-colors"
+              >
+                <X size={16} />
+              </button>
+            </div>
+          </div>
+
+          {/* Messages Container */}
+          {!isMinimized && (
+            <div
+              className="flex flex-col h-[436px] bg-white"
+              style={{ borderRadius: '0 0 16px 16px' }}
+            >
+              <div
+                className="flex-1 overflow-y-auto p-4 space-y-4"
+                onWheel={(e) => {
+                  const element = e.currentTarget;
+                  const isAtTop = element.scrollTop === 0;
+                  const isAtBottom =
+                    element.scrollTop + element.clientHeight >=
+                    element.scrollHeight - 1;
+
+                  // Allow scroll to pass through to parent when at boundaries
+                  if (
+                    (isAtTop && e.deltaY < 0) ||
+                    (isAtBottom && e.deltaY > 0)
+                  ) {
+                    e.preventDefault();
+                    // Let the parent handle the scroll
+                    window.parent.postMessage(
+                      {
+                        type: 'SCROLL_PASSTHROUGH',
+                        deltaY: e.deltaY,
+                      },
+                      '*',
+                    );
+                  }
+                }}
+              >
+                {displayMessages?.map((message, index) => (
+                  <div
+                    key={index}
+                    className={`flex ${message.role === MessageType.User ? 'justify-end' : 'justify-start'}`}
+                  >
+                    <div
+                      className={`max-w-[280px] px-4 py-2 rounded-2xl ${
+                        message.role === MessageType.User
+                          ? 'bg-blue-600 text-white rounded-br-md'
+                          : 'bg-gray-100 text-gray-800 rounded-bl-md'
+                      }`}
+                    >
+                      <p className="text-sm leading-relaxed whitespace-pre-wrap">
+                        {message.content}
+                      </p>
+                    </div>
+                  </div>
+                ))}
+
+                {/* Typing Indicator */}
+                {sendLoading && (
+                  <div className="flex justify-start">
+                    <div className="bg-gray-100 rounded-2xl rounded-bl-md px-4 py-3">
+                      <div className="flex space-x-1">
+                        <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
+                        <div
+                          className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"
+                          style={{ animationDelay: '0.1s' }}
+                        ></div>
+                        <div
+                          className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"
+                          style={{ animationDelay: '0.2s' }}
+                        ></div>
+                      </div>
+                    </div>
+                  </div>
+                )}
+
+                <div ref={messagesEndRef} />
+              </div>
+
+              {/* Input Area */}
+              <div className="border-t border-gray-200 p-4">
+                <div className="flex items-end space-x-3">
+                  <div className="flex-1">
+                    <textarea
+                      value={inputValue}
+                      onChange={(e) => {
+                        const newValue = e.target.value;
+                        setInputValue(newValue);
+                        // Also update the hook's state
+                        handleInputChange(e);
+                      }}
+                      onKeyPress={handleKeyPress}
+                      placeholder="Type your message..."
+                      rows={1}
+                      className="w-full resize-none border border-gray-300 rounded-2xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                      style={{ minHeight: '44px', maxHeight: '120px' }}
+                      disabled={hasError || sendLoading}
+                    />
+                  </div>
+                  <button
+                    onClick={handleSendMessage}
+                    disabled={!inputValue.trim() || sendLoading}
+                    className="p-3 bg-blue-600 text-white rounded-full hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                  >
+                    <Send size={18} />
+                  </button>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Floating Button */}
+      <div className="fixed bottom-6 right-6 z-50">
+        <button
+          onClick={toggleChat}
+          className={`w-14 h-14 bg-blue-600 hover:bg-blue-700 text-white rounded-full transition-all duration-300 flex items-center justify-center group ${
+            isOpen ? 'scale-95' : 'scale-100 hover:scale-105'
+          }`}
+        >
+          <div
+            className={`transition-transform duration-300 ${isOpen ? 'rotate-45' : 'rotate-0'}`}
+          >
+            {isOpen ? <X size={24} /> : <MessageCircle size={24} />}
+          </div>
+        </button>
+
+        {/* Unread Badge */}
+        {!isOpen && messageCount > 0 && (
+          <div className="absolute -top-2 -right-2 w-6 h-6 bg-red-500 text-white text-xs font-bold rounded-full flex items-center justify-center animate-pulse">
+            {messageCount > 9 ? '9+' : messageCount}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default FloatingChatWidget;
--- a/web/src/pages/next-chats/widget/index.tsx
+++ b/web/src/pages/next-chats/widget/index.tsx
@ -0,0 +1,27 @@
+import FloatingChatWidget from '@/components/floating-chat-widget';
+
+const ChatWidget = () => {
+  return (
+    <div
+      style={{
+        background: 'transparent',
+        margin: 0,
+        padding: 0,
+      }}
+    >
+      <style>{`
+        html, body { 
+          background: transparent !important; 
+          margin: 0; 
+          padding: 0; 
+        }
+        #root {
+          background: transparent !important;
+        }
+      `}</style>
+      <FloatingChatWidget />
+    </div>
+  );
+};
+
+export default ChatWidget;
--- a/web/src/routes.ts
+++ b/web/src/routes.ts
@ -41,6 +41,7 @@ export enum Routes {
  AgentLogPage = '/agent-log-page',
  AgentShare = '/agent/share',
  ChatShare = `${Chats}/share`,
+  ChatWidget = `${Chats}/widget`,
  UserSetting = '/user-setting',
  DataFlows = '/data-flows',
  DataFlow = '/data-flow',
@ -75,6 +76,11 @@ const routes = [
    component: `@/pages${Routes.AgentShare}`,
    layout: false,
  },
+  {
+    path: Routes.ChatWidget,
+    component: `@/pages${Routes.ChatWidget}`,
+    layout: false,
+  },
  {
    path: Routes.Home,
    component: '@/layouts',