xertica-ui 2.1.2 → 2.1.4

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

@@ -1,7 +1,9 @@
 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> = {
@@ -56,6 +58,10 @@ const meta: Meta<typeof XerticaAssistant> = {
       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.',
+    },
   },
 };
 
@@ -199,3 +205,197 @@ export const MinimalInput: Story = {
     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 />;
+  },
+};