xertica-ui 2.2.1 → 2.4.0

package/components/assistant/xertica-assistant/xertica-assistant.stories.tsx

@@ -1,407 +1,407 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { XerticaAssistant } from './xertica-assistant';
-import { useAssistant } from './use-assistant';
-import { Button } from '../../ui/button';
-import { useLayout } from '../../../contexts/LayoutContext';
-import { Send, Bot, User, RotateCcw } from 'lucide-react';
-import React, { useState } from 'react';
-
-const meta: Meta<typeof XerticaAssistant> = {
-  title: 'Assistant/Assistant',
-  component: XerticaAssistant,
-  parameters: {
-    layout: 'fullscreen',
-  },
-  argTypes: {
-    userName: {
-      control: 'text',
-      description: 'The name of the user to display in the greeting.',
-    },
-    demoMode: {
-      control: 'boolean',
-      description: 'Whether to use mock data and responses.',
-    },
-    mode: {
-      control: 'select',
-      options: ['default', 'expanded', 'fullPage'],
-      description: 'The layout mode of the assistant.',
-    },
-    isExpanded: {
-      control: 'boolean',
-      description: 'Whether the assistant is initially expanded.',
-    },
-    showHistory: {
-      control: 'boolean',
-      description: 'Whether to show the conversation history tab and collapsed icon.',
-    },
-    showFavorites: {
-      control: 'boolean',
-      description: 'Whether to show the favorites tab and collapsed icon.',
-    },
-    enableAudioInput: {
-      control: 'boolean',
-      description: 'Whether to enable audio input (voice recording / audio upload) in the chat.',
-    },
-    enableFileAttachment: {
-      control: 'boolean',
-      description: 'Whether to enable file attachment in the chat input.',
-    },
-    enableDocumentCreation: {
-      control: 'boolean',
-      description: 'Whether to enable the "Create document" action in the chat input.',
-    },
-    enablePodcastGeneration: {
-      control: 'boolean',
-      description: 'Whether to enable podcast generation (action chip + per-message button).',
-    },
-    enableSearch: {
-      control: 'boolean',
-      description: 'Whether to enable the "Search" action in the chat input.',
-    },
-    welcomeMessage: {
-      control: 'text',
-      description: 'Subtitle shown below the user name in the empty state.',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof XerticaAssistant>;
-
-export const Default: Story = {
-  decorators: [
-    Story => {
-      const { toggleAssistente, assistenteExpanded } = useLayout();
-      return (
-        <div className="h-screen w-full flex relative overflow-hidden bg-muted/30">
-          <div className="flex-1 flex flex-col p-8 gap-4">
-            <h1 className="text-2xl font-bold text-foreground">Main Content Area</h1>
-            <p className="text-muted-foreground">
-              Click the button below to toggle the AI Assistant.
-            </p>
-            <Button onClick={toggleAssistente} className="w-fit">
-              {assistenteExpanded ? 'Close Assistant' : 'Open Assistant'}
-            </Button>
-          </div>
-          <Story />
-        </div>
-      );
-    },
-  ],
-  args: {
-    userName: 'Jane Smith',
-    demoMode: true,
-  },
-};
-
-export const FullPage: Story = {
-  args: {
-    mode: 'fullPage',
-    height: '100vh',
-    userName: 'Jane Smith',
-    demoMode: true,
-  },
-};
-
-export const DocumentEditing: Story = {
-  decorators: [
-    Story => {
-      return (
-        <div className="h-screen w-full flex relative overflow-hidden bg-muted/30">
-          <div className="flex-1 flex flex-col p-8 gap-4">
-            <h1 className="text-2xl font-bold text-foreground">Document Workspace</h1>
-            <p className="text-muted-foreground">
-              The document editor slides from the right, overlaying the main content.
-            </p>
-          </div>
-          <Story />
-        </div>
-      );
-    },
-  ],
-  args: {
-    mode: 'expanded',
-    isExpanded: true,
-    userName: 'Jane Smith',
-    demoMode: true,
-    initialMessages: [
-      {
-        id: '1',
-        type: 'assistant',
-        content: 'Aqui está o documento que você solicitou sobre o Projeto Horizonte.',
-        timestamp: new Date(),
-        attachmentType: 'document',
-        attachmentName: 'projeto-horizonte.md',
-        documentTitle: 'Projeto Horizonte',
-        documentContent:
-          '<h1>Projeto Horizonte</h1><p>Diretrizes para o novo sistema de design.</p><ul><li>Consistência</li><li>Acessibilidade</li></ul>',
-      },
-    ],
-  },
-};
-
-/**
- * Chat-only mode: hides history, favorites, audio, file attachments,
- * document creation, podcast generation, and search.
- * Only the basic text chat remains.
- */
-export const ChatOnly: Story = {
-  decorators: [
-    Story => {
-      return (
-        <div className="h-screen w-full flex relative overflow-hidden bg-muted/30">
-          <div className="flex-1 flex flex-col p-8 gap-4">
-            <h1 className="text-2xl font-bold text-foreground">Chat Only Mode</h1>
-            <p className="text-muted-foreground">
-              All extra features are disabled. The assistant provides only a plain text chat
-              interface.
-            </p>
-          </div>
-          <Story />
-        </div>
-      );
-    },
-  ],
-  args: {
-    mode: 'expanded',
-    isExpanded: true,
-    userName: 'Jane Smith',
-    demoMode: true,
-    showHistory: false,
-    showFavorites: false,
-    enableAudioInput: false,
-    enableFileAttachment: false,
-    enableDocumentCreation: false,
-    enablePodcastGeneration: false,
-    enableSearch: false,
-  },
-};
-
-/**
- * Minimal input mode: only document creation and file attachment are enabled.
- * No audio input, no podcast generation, no search, no history, no favorites.
- */
-export const MinimalInput: Story = {
-  decorators: [
-    Story => {
-      return (
-        <div className="h-screen w-full flex relative overflow-hidden bg-muted/30">
-          <div className="flex-1 flex flex-col p-8 gap-4">
-            <h1 className="text-2xl font-bold text-foreground">Minimal Input Mode</h1>
-            <p className="text-muted-foreground">
-              Only document creation and file attachment are enabled — ideal for a focused
-              document-generation workflow.
-            </p>
-          </div>
-          <Story />
-        </div>
-      );
-    },
-  ],
-  args: {
-    mode: 'expanded',
-    isExpanded: true,
-    userName: 'Jane Smith',
-    demoMode: true,
-    showHistory: false,
-    showFavorites: false,
-    enableAudioInput: false,
-    enableFileAttachment: true,
-    enableDocumentCreation: true,
-    enablePodcastGeneration: false,
-    enableSearch: false,
-  },
-};
-
-/**
- * Custom welcome message: demonstrates the `welcomeMessage` prop.
- * The subtitle below the user's name is fully customisable — useful when
- * the assistant is scoped to a specific domain (e.g. HR, Finance, Legal).
- */
-export const CustomWelcome: Story = {
-  decorators: [
-    Story => {
-      return (
-        <div className="h-screen w-full flex relative overflow-hidden bg-muted/30">
-          <div className="flex-1 flex flex-col p-8 gap-4">
-            <h1 className="text-2xl font-bold text-foreground">Custom Welcome Message</h1>
-            <p className="text-muted-foreground">
-              The <code>welcomeMessage</code> prop replaces the default "Como posso ajudar?"
-              subtitle.
-            </p>
-          </div>
-          <Story />
-        </div>
-      );
-    },
-  ],
-  args: {
-    mode: 'expanded',
-    isExpanded: true,
-    userName: 'Jane Smith',
-    demoMode: true,
-    welcomeMessage: 'How can I help you with your HR request today?',
-    suggestions: [],
-    richSuggestions: [],
-  },
-};
-
-/**
- * No suggestions mode: both `suggestions` and `richSuggestions` are empty arrays.
- * The empty state shows only the welcome message — no suggestion chips and no
- * "Mais sugestões" button are rendered.
- */
-export const NoSuggestions: Story = {
-  decorators: [
-    Story => {
-      return (
-        <div className="h-screen w-full flex relative overflow-hidden bg-muted/30">
-          <div className="flex-1 flex flex-col p-8 gap-4">
-            <h1 className="text-2xl font-bold text-foreground">No Suggestions Mode</h1>
-            <p className="text-muted-foreground">
-              Both <code>suggestions</code> and <code>richSuggestions</code> are empty — only the
-              welcome message is shown in the empty state.
-            </p>
-          </div>
-          <Story />
-        </div>
-      );
-    },
-  ],
-  args: {
-    mode: 'expanded',
-    isExpanded: true,
-    userName: 'Jane Smith',
-    demoMode: true,
-    suggestions: [],
-    richSuggestions: [],
-  },
-};
-
-/**
- * **Headless Hook** — demonstrates `useAssistant()` with a fully custom chat UI.
- *
- * The hook manages all assistant state (messages, conversations, suggestions,
- * demo responses) while you supply your own markup. This story renders a
- * minimal custom chat panel without using `<XerticaAssistant>` at all.
- */
-export const HeadlessHook: Story = {
-  render: () => {
-    const CustomChat = () => {
-      const {
-        mensagens,
-        mensagem,
-        setMensagem,
-        sugestoes,
-        messagesEndRef,
-        handleEnviarMensagem,
-        handleNovaConversa,
-      } = useAssistant({ demoMode: true });
-
-      return (
-        <div className="h-screen w-full flex items-center justify-center bg-muted/30 p-8">
-          <div className="w-full max-w-xl h-[600px] flex flex-col bg-background border border-border rounded-xl shadow-lg overflow-hidden">
-            {/* Custom header */}
-            <div className="flex items-center justify-between px-4 py-3 border-b border-border bg-card">
-              <div className="flex items-center gap-2">
-                <Bot className="w-5 h-5 text-primary" />
-                <span className="font-semibold text-sm">Custom AI Chat</span>
-                <span className="text-xs text-muted-foreground bg-muted px-2 py-0.5 rounded-full">
-                  useAssistant()
-                </span>
-              </div>
-              <button
-                onClick={handleNovaConversa}
-                className="text-muted-foreground hover:text-foreground transition-colors"
-                title="New conversation"
-              >
-                <RotateCcw className="w-4 h-4" />
-              </button>
-            </div>
-
-            {/* Custom message list */}
-            <div className="flex-1 overflow-y-auto p-4 space-y-3">
-              {mensagens.length === 0 ? (
-                <div className="h-full flex flex-col items-center justify-center gap-4 text-center">
-                  <Bot className="w-10 h-10 text-muted-foreground/40" />
-                  <p className="text-sm text-muted-foreground">How can I help you today?</p>
-                  {sugestoes.length > 0 && (
-                    <div className="flex flex-wrap gap-2 justify-center max-w-sm">
-                      {sugestoes.slice(0, 3).map(s => (
-                        <button
-                          key={s.id}
-                          onClick={() => handleEnviarMensagem(s.text)}
-                          className="text-xs px-3 py-1.5 rounded-full border border-border bg-muted hover:bg-muted/80 text-foreground transition-colors"
-                        >
-                          {s.text}
-                        </button>
-                      ))}
-                    </div>
-                  )}
-                </div>
-              ) : (
-                mensagens.map(msg => (
-                  <div
-                    key={msg.id}
-                    className={`flex gap-2 ${msg.type === 'user' ? 'justify-end' : 'justify-start'}`}
-                  >
-                    {msg.type === 'assistant' && (
-                      <div className="w-7 h-7 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0 mt-0.5">
-                        <Bot className="w-4 h-4 text-primary" />
-                      </div>
-                    )}
-                    <div
-                      className={`max-w-[80%] px-3 py-2 rounded-xl text-sm leading-relaxed ${
-                        msg.type === 'user'
-                          ? 'bg-primary text-primary-foreground rounded-br-sm'
-                          : 'bg-muted text-foreground rounded-bl-sm'
-                      }`}
-                    >
-                      {msg.content}
-                    </div>
-                    {msg.type === 'user' && (
-                      <div className="w-7 h-7 rounded-full bg-muted flex items-center justify-center flex-shrink-0 mt-0.5">
-                        <User className="w-4 h-4 text-muted-foreground" />
-                      </div>
-                    )}
-                  </div>
-                ))
-              )}
-              <div ref={messagesEndRef} />
-            </div>
-
-            {/* Custom input */}
-            <div className="px-4 py-3 border-t border-border bg-card">
-              <div className="flex gap-2">
-                <input
-                  type="text"
-                  value={mensagem}
-                  onChange={e => setMensagem(e.target.value)}
-                  onKeyDown={e => {
-                    if (e.key === 'Enter' && !e.shiftKey) {
-                      e.preventDefault();
-                      handleEnviarMensagem();
-                    }
-                  }}
-                  placeholder="Type a message…"
-                  className="flex-1 text-sm px-3 py-2 rounded-lg border border-border bg-background focus:outline-none focus:ring-2 focus:ring-ring"
-                />
-                <Button
-                  size="sm"
-                  onClick={() => handleEnviarMensagem()}
-                  disabled={!mensagem.trim()}
-                  className="gap-1.5"
-                >
-                  <Send className="w-3.5 h-3.5" />
-                  Send
-                </Button>
-              </div>
-            </div>
-          </div>
-        </div>
-      );
-    };
-
-    return <CustomChat />;
-  },
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { XerticaAssistant } from './xertica-assistant';
+import { useAssistant } from './use-assistant';
+import { Button } from '../../ui/button';
+import { useLayout } from '../../../contexts/LayoutContext';
+import { Send, Bot, User, RotateCcw } from 'lucide-react';
+import React, { useState } from 'react';
+
+const meta: Meta<typeof XerticaAssistant> = {
+  title: 'Assistant/Assistant',
+  component: XerticaAssistant,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    userName: {
+      control: 'text',
+      description: 'The name of the user to display in the greeting.',
+    },
+    demoMode: {
+      control: 'boolean',
+      description: 'Whether to use mock data and responses.',
+    },
+    mode: {
+      control: 'select',
+      options: ['default', 'expanded', 'fullPage'],
+      description: 'The layout mode of the assistant.',
+    },
+    isExpanded: {
+      control: 'boolean',
+      description: 'Whether the assistant is initially expanded.',
+    },
+    showHistory: {
+      control: 'boolean',
+      description: 'Whether to show the conversation history tab and collapsed icon.',
+    },
+    showFavorites: {
+      control: 'boolean',
+      description: 'Whether to show the favorites tab and collapsed icon.',
+    },
+    enableAudioInput: {
+      control: 'boolean',
+      description: 'Whether to enable audio input (voice recording / audio upload) in the chat.',
+    },
+    enableFileAttachment: {
+      control: 'boolean',
+      description: 'Whether to enable file attachment in the chat input.',
+    },
+    enableDocumentCreation: {
+      control: 'boolean',
+      description: 'Whether to enable the "Create document" action in the chat input.',
+    },
+    enablePodcastGeneration: {
+      control: 'boolean',
+      description: 'Whether to enable podcast generation (action chip + per-message button).',
+    },
+    enableSearch: {
+      control: 'boolean',
+      description: 'Whether to enable the "Search" action in the chat input.',
+    },
+    welcomeMessage: {
+      control: 'text',
+      description: 'Subtitle shown below the user name in the empty state.',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof XerticaAssistant>;
+
+export const Default: Story = {
+  decorators: [
+    Story => {
+      const { toggleAssistente, assistenteExpanded } = useLayout();
+      return (
+        <div className="h-screen w-full flex relative overflow-hidden bg-muted/30">
+          <div className="flex-1 flex flex-col p-8 gap-4">
+            <h1 className="text-2xl font-bold text-foreground">Main Content Area</h1>
+            <p className="text-muted-foreground">
+              Click the button below to toggle the AI Assistant.
+            </p>
+            <Button onClick={toggleAssistente} className="w-fit">
+              {assistenteExpanded ? 'Close Assistant' : 'Open Assistant'}
+            </Button>
+          </div>
+          <Story />
+        </div>
+      );
+    },
+  ],
+  args: {
+    userName: 'Jane Smith',
+    demoMode: true,
+  },
+};
+
+export const FullPage: Story = {
+  args: {
+    mode: 'fullPage',
+    height: '100vh',
+    userName: 'Jane Smith',
+    demoMode: true,
+  },
+};
+
+export const DocumentEditing: Story = {
+  decorators: [
+    Story => {
+      return (
+        <div className="h-screen w-full flex relative overflow-hidden bg-muted/30">
+          <div className="flex-1 flex flex-col p-8 gap-4">
+            <h1 className="text-2xl font-bold text-foreground">Document Workspace</h1>
+            <p className="text-muted-foreground">
+              The document editor slides from the right, overlaying the main content.
+            </p>
+          </div>
+          <Story />
+        </div>
+      );
+    },
+  ],
+  args: {
+    mode: 'expanded',
+    isExpanded: true,
+    userName: 'Jane Smith',
+    demoMode: true,
+    initialMessages: [
+      {
+        id: '1',
+        type: 'assistant',
+        content: 'Aqui está o documento que você solicitou sobre o Projeto Horizonte.',
+        timestamp: new Date(),
+        attachmentType: 'document',
+        attachmentName: 'projeto-horizonte.md',
+        documentTitle: 'Projeto Horizonte',
+        documentContent:
+          '<h1>Projeto Horizonte</h1><p>Diretrizes para o novo sistema de design.</p><ul><li>Consistência</li><li>Acessibilidade</li></ul>',
+      },
+    ],
+  },
+};
+
+/**
+ * Chat-only mode: hides history, favorites, audio, file attachments,
+ * document creation, podcast generation, and search.
+ * Only the basic text chat remains.
+ */
+export const ChatOnly: Story = {
+  decorators: [
+    Story => {
+      return (
+        <div className="h-screen w-full flex relative overflow-hidden bg-muted/30">
+          <div className="flex-1 flex flex-col p-8 gap-4">
+            <h1 className="text-2xl font-bold text-foreground">Chat Only Mode</h1>
+            <p className="text-muted-foreground">
+              All extra features are disabled. The assistant provides only a plain text chat
+              interface.
+            </p>
+          </div>
+          <Story />
+        </div>
+      );
+    },
+  ],
+  args: {
+    mode: 'expanded',
+    isExpanded: true,
+    userName: 'Jane Smith',
+    demoMode: true,
+    showHistory: false,
+    showFavorites: false,
+    enableAudioInput: false,
+    enableFileAttachment: false,
+    enableDocumentCreation: false,
+    enablePodcastGeneration: false,
+    enableSearch: false,
+  },
+};
+
+/**
+ * Minimal input mode: only document creation and file attachment are enabled.
+ * No audio input, no podcast generation, no search, no history, no favorites.
+ */
+export const MinimalInput: Story = {
+  decorators: [
+    Story => {
+      return (
+        <div className="h-screen w-full flex relative overflow-hidden bg-muted/30">
+          <div className="flex-1 flex flex-col p-8 gap-4">
+            <h1 className="text-2xl font-bold text-foreground">Minimal Input Mode</h1>
+            <p className="text-muted-foreground">
+              Only document creation and file attachment are enabled — ideal for a focused
+              document-generation workflow.
+            </p>
+          </div>
+          <Story />
+        </div>
+      );
+    },
+  ],
+  args: {
+    mode: 'expanded',
+    isExpanded: true,
+    userName: 'Jane Smith',
+    demoMode: true,
+    showHistory: false,
+    showFavorites: false,
+    enableAudioInput: false,
+    enableFileAttachment: true,
+    enableDocumentCreation: true,
+    enablePodcastGeneration: false,
+    enableSearch: false,
+  },
+};
+
+/**
+ * Custom welcome message: demonstrates the `welcomeMessage` prop.
+ * The subtitle below the user's name is fully customisable — useful when
+ * the assistant is scoped to a specific domain (e.g. HR, Finance, Legal).
+ */
+export const CustomWelcome: Story = {
+  decorators: [
+    Story => {
+      return (
+        <div className="h-screen w-full flex relative overflow-hidden bg-muted/30">
+          <div className="flex-1 flex flex-col p-8 gap-4">
+            <h1 className="text-2xl font-bold text-foreground">Custom Welcome Message</h1>
+            <p className="text-muted-foreground">
+              The <code>welcomeMessage</code> prop replaces the default "Como posso ajudar?"
+              subtitle.
+            </p>
+          </div>
+          <Story />
+        </div>
+      );
+    },
+  ],
+  args: {
+    mode: 'expanded',
+    isExpanded: true,
+    userName: 'Jane Smith',
+    demoMode: true,
+    welcomeMessage: 'How can I help you with your HR request today?',
+    suggestions: [],
+    richSuggestions: [],
+  },
+};
+
+/**
+ * No suggestions mode: both `suggestions` and `richSuggestions` are empty arrays.
+ * The empty state shows only the welcome message — no suggestion chips and no
+ * "Mais sugestões" button are rendered.
+ */
+export const NoSuggestions: Story = {
+  decorators: [
+    Story => {
+      return (
+        <div className="h-screen w-full flex relative overflow-hidden bg-muted/30">
+          <div className="flex-1 flex flex-col p-8 gap-4">
+            <h1 className="text-2xl font-bold text-foreground">No Suggestions Mode</h1>
+            <p className="text-muted-foreground">
+              Both <code>suggestions</code> and <code>richSuggestions</code> are empty — only the
+              welcome message is shown in the empty state.
+            </p>
+          </div>
+          <Story />
+        </div>
+      );
+    },
+  ],
+  args: {
+    mode: 'expanded',
+    isExpanded: true,
+    userName: 'Jane Smith',
+    demoMode: true,
+    suggestions: [],
+    richSuggestions: [],
+  },
+};
+
+/**
+ * **Headless Hook** — demonstrates `useAssistant()` with a fully custom chat UI.
+ *
+ * The hook manages all assistant state (messages, conversations, suggestions,
+ * demo responses) while you supply your own markup. This story renders a
+ * minimal custom chat panel without using `<XerticaAssistant>` at all.
+ */
+export const HeadlessHook: Story = {
+  render: () => {
+    const CustomChat = () => {
+      const {
+        mensagens,
+        mensagem,
+        setMensagem,
+        sugestoes,
+        messagesEndRef,
+        handleEnviarMensagem,
+        handleNovaConversa,
+      } = useAssistant({ demoMode: true });
+
+      return (
+        <div className="h-screen w-full flex items-center justify-center bg-muted/30 p-8">
+          <div className="w-full max-w-xl h-[600px] flex flex-col bg-background border border-border rounded-xl shadow-lg overflow-hidden">
+            {/* Custom header */}
+            <div className="flex items-center justify-between px-4 py-3 border-b border-border bg-card">
+              <div className="flex items-center gap-2">
+                <Bot className="w-5 h-5 text-primary" />
+                <span className="font-semibold text-sm">Custom AI Chat</span>
+                <span className="text-xs text-muted-foreground bg-muted px-2 py-0.5 rounded-full">
+                  useAssistant()
+                </span>
+              </div>
+              <button
+                onClick={handleNovaConversa}
+                className="text-muted-foreground hover:text-foreground transition-colors"
+                title="New conversation"
+              >
+                <RotateCcw className="w-4 h-4" />
+              </button>
+            </div>
+
+            {/* Custom message list */}
+            <div className="flex-1 overflow-y-auto p-4 space-y-3">
+              {mensagens.length === 0 ? (
+                <div className="h-full flex flex-col items-center justify-center gap-4 text-center">
+                  <Bot className="w-10 h-10 text-muted-foreground/40" />
+                  <p className="text-sm text-muted-foreground">How can I help you today?</p>
+                  {sugestoes.length > 0 && (
+                    <div className="flex flex-wrap gap-2 justify-center max-w-sm">
+                      {sugestoes.slice(0, 3).map(s => (
+                        <button
+                          key={s.id}
+                          onClick={() => handleEnviarMensagem(s.text)}
+                          className="text-xs px-3 py-1.5 rounded-full border border-border bg-muted hover:bg-muted/80 text-foreground transition-colors"
+                        >
+                          {s.text}
+                        </button>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              ) : (
+                mensagens.map(msg => (
+                  <div
+                    key={msg.id}
+                    className={`flex gap-2 ${msg.type === 'user' ? 'justify-end' : 'justify-start'}`}
+                  >
+                    {msg.type === 'assistant' && (
+                      <div className="w-7 h-7 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0 mt-0.5">
+                        <Bot className="w-4 h-4 text-primary" />
+                      </div>
+                    )}
+                    <div
+                      className={`max-w-[80%] px-3 py-2 rounded-xl text-sm leading-relaxed ${
+                        msg.type === 'user'
+                          ? 'bg-primary text-primary-foreground rounded-br-sm'
+                          : 'bg-muted text-foreground rounded-bl-sm'
+                      }`}
+                    >
+                      {msg.content}
+                    </div>
+                    {msg.type === 'user' && (
+                      <div className="w-7 h-7 rounded-full bg-muted flex items-center justify-center flex-shrink-0 mt-0.5">
+                        <User className="w-4 h-4 text-muted-foreground" />
+                      </div>
+                    )}
+                  </div>
+                ))
+              )}
+              <div ref={messagesEndRef} />
+            </div>
+
+            {/* Custom input */}
+            <div className="px-4 py-3 border-t border-border bg-card">
+              <div className="flex gap-2">
+                <input
+                  type="text"
+                  value={mensagem}
+                  onChange={e => setMensagem(e.target.value)}
+                  onKeyDown={e => {
+                    if (e.key === 'Enter' && !e.shiftKey) {
+                      e.preventDefault();
+                      handleEnviarMensagem();
+                    }
+                  }}
+                  placeholder="Type a message…"
+                  className="flex-1 text-sm px-3 py-2 rounded-lg border border-border bg-background focus:outline-none focus:ring-2 focus:ring-ring"
+                />
+                <Button
+                  size="sm"
+                  onClick={() => handleEnviarMensagem()}
+                  disabled={!mensagem.trim()}
+                  className="gap-1.5"
+                >
+                  <Send className="w-3.5 h-3.5" />
+                  Send
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      );
+    };
+
+    return <CustomChat />;
+  },
+};