@object-ui/plugin-chatbot 0.3.1 → 2.0.0

package/dist/src/ChatbotEnhanced.d.ts

@@ -0,0 +1,38 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import * as React from "react";
+export interface ChatMessage {
+    id: string;
+    role: "user" | "assistant" | "system";
+    content: string;
+    timestamp?: string;
+    avatar?: string;
+    avatarFallback?: string;
+    streaming?: boolean;
+}
+export interface ChatbotEnhancedProps extends React.HTMLAttributes<HTMLDivElement> {
+    messages?: ChatMessage[];
+    placeholder?: string;
+    onSendMessage?: (message: string, files?: File[]) => void;
+    onClear?: () => void;
+    disabled?: boolean;
+    showTimestamp?: boolean;
+    userAvatarUrl?: string;
+    userAvatarFallback?: string;
+    assistantAvatarUrl?: string;
+    assistantAvatarFallback?: string;
+    maxHeight?: string;
+    enableMarkdown?: boolean;
+    enableFileUpload?: boolean;
+    acceptedFileTypes?: string;
+    maxFileSize?: number;
+    onStreamingUpdate?: (messageId: string, content: string) => void;
+}
+declare const ChatbotEnhanced: React.ForwardRefExoticComponent<ChatbotEnhancedProps & React.RefAttributes<HTMLDivElement>>;
+export { ChatbotEnhanced };
+//# sourceMappingURL=ChatbotEnhanced.d.ts.map

package/dist/src/ChatbotEnhanced.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatbotEnhanced.d.ts","sourceRoot":"","sources":["../../src/ChatbotEnhanced.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAA;IACrC,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAChF,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAA;IACxB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,IAAI,EAAE,KAAK,IAAI,CAAA;IACzD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAA;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;CACjE;AAiED,QAAA,MAAM,eAAe,6FAqQpB,CAAA;AAID,OAAO,EAAE,eAAe,EAAE,CAAA"}

package/dist/src/utils.d.ts

@@ -0,0 +1,13 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Generates a unique ID for messages or other entities
+ * Uses crypto.randomUUID() if available, otherwise falls back to timestamp + random string
+ */
+export declare function generateUniqueId(prefix?: string): string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/src/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,SAAQ,GAAG,MAAM,CAKvD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/plugin-chatbot",
-  "version": "0.3.1",
+  "version": "2.0.0",
   "type": "module",
   "license": "MIT",
   "description": "Chatbot interface plugin for Object UI",
@@ -25,19 +25,23 @@
   },
   "dependencies": {
     "lucide-react": "^0.563.0",
-    "@object-ui/components": "0.3.1",
-    "@object-ui/core": "0.3.1",
-    "@object-ui/react": "0.3.1",
-    "@object-ui/types": "0.3.1"
+    "react-markdown": "^10.1.0",
+    "react-syntax-highlighter": "^16.1.0",
+    "remark-gfm": "^4.0.0",
+    "@object-ui/react": "2.0.0",
+    "@object-ui/core": "2.0.0",
+    "@object-ui/components": "2.0.0",
+    "@object-ui/types": "2.0.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@types/react": "^19.2.9",
+    "@types/react": "^19.2.13",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@vitejs/plugin-react": "^5.1.3",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4"

package/src/ChatbotEnhanced.tsx

@@ -0,0 +1,375 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from "react"
+import { cn } from "@object-ui/components"
+import { Button, Input, ScrollArea, Avatar, AvatarFallback, AvatarImage } from "@object-ui/components"
+import { Send, Trash2, Paperclip, X } from "lucide-react"
+import ReactMarkdown from "react-markdown"
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
+import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism"
+import remarkGfm from "remark-gfm"
+
+export interface ChatMessage {
+  id: string
+  role: "user" | "assistant" | "system"
+  content: string
+  timestamp?: string
+  avatar?: string
+  avatarFallback?: string
+  streaming?: boolean
+}
+
+export interface ChatbotEnhancedProps extends React.HTMLAttributes<HTMLDivElement> {
+  messages?: ChatMessage[]
+  placeholder?: string
+  onSendMessage?: (message: string, files?: File[]) => void
+  onClear?: () => void
+  disabled?: boolean
+  showTimestamp?: boolean
+  userAvatarUrl?: string
+  userAvatarFallback?: string
+  assistantAvatarUrl?: string
+  assistantAvatarFallback?: string
+  maxHeight?: string
+  enableMarkdown?: boolean
+  enableFileUpload?: boolean
+  acceptedFileTypes?: string
+  maxFileSize?: number
+  onStreamingUpdate?: (messageId: string, content: string) => void
+}
+
+function MessageContent({ content, enableMarkdown }: { content: string; enableMarkdown?: boolean }) {
+  if (!enableMarkdown) {
+    return <div className="whitespace-pre-wrap">{content}</div>
+  }
+
+  return (
+    <div className="prose prose-sm dark:prose-invert max-w-none">
+    <ReactMarkdown
+      remarkPlugins={[remarkGfm]}
+      components={{
+        code({ node, inline, className, children, ...props }: any) {
+          const match = /language-(\w+)/.exec(className || '')
+          return !inline && match ? (
+            <SyntaxHighlighter
+              style={oneDark}
+              language={match[1]}
+              PreTag="div"
+              className="rounded-md my-2"
+              {...props}
+            >
+              {String(children).replace(/\n$/, '')}
+            </SyntaxHighlighter>
+          ) : (
+            <code className={cn("bg-muted px-1 py-0.5 rounded text-sm", className)} {...props}>
+              {children}
+            </code>
+          )
+        },
+        p: ({ children }) => <p className="mb-2 last:mb-0">{children}</p>,
+        ul: ({ children }) => <ul className="list-disc pl-4 mb-2">{children}</ul>,
+        ol: ({ children }) => <ol className="list-decimal pl-4 mb-2">{children}</ol>,
+        li: ({ children }) => <li className="mb-1">{children}</li>,
+        a: ({ href, children }) => (
+          <a href={href} className="text-primary hover:underline" target="_blank" rel="noopener noreferrer">
+            {children}
+          </a>
+        ),
+        blockquote: ({ children }) => (
+          <blockquote className="border-l-4 border-primary pl-4 italic my-2 text-muted-foreground">
+            {children}
+          </blockquote>
+        ),
+        table: ({ children }) => (
+          <div className="overflow-x-auto my-2">
+            <table className="min-w-full divide-y divide-border">{children}</table>
+          </div>
+        ),
+        th: ({ children }) => (
+          <th className="px-3 py-2 text-left text-xs font-medium uppercase tracking-wider bg-muted">
+            {children}
+          </th>
+        ),
+        td: ({ children }) => (
+          <td className="px-3 py-2 text-sm border-t border-border">{children}</td>
+        ),
+      }}
+    >
+      {content}
+    </ReactMarkdown>
+    </div>
+  )
+}
+
+const ChatbotEnhanced = React.forwardRef<HTMLDivElement, ChatbotEnhancedProps>(
+  (
+    {
+      className,
+      messages = [],
+      placeholder = "Type your message...",
+      onSendMessage,
+      onClear,
+      disabled = false,
+      showTimestamp = false,
+      userAvatarUrl,
+      userAvatarFallback = "You",
+      assistantAvatarUrl,
+      assistantAvatarFallback = "AI",
+      maxHeight = "500px",
+      enableMarkdown = true,
+      enableFileUpload = false,
+      acceptedFileTypes = "image/*,.pdf,.doc,.docx,.txt",
+      maxFileSize = 10 * 1024 * 1024, // 10MB
+      ...props
+    },
+    ref
+  ) => {
+    const [inputValue, setInputValue] = React.useState("")
+    const [selectedFiles, setSelectedFiles] = React.useState<File[]>([])
+    const scrollRef = React.useRef<HTMLDivElement>(null)
+    const inputRef = React.useRef<HTMLInputElement>(null)
+    const fileInputRef = React.useRef<HTMLInputElement>(null)
+
+    // Auto-scroll to bottom when new messages arrive
+    React.useEffect(() => {
+      if (scrollRef.current) {
+        const scrollElement = scrollRef.current.querySelector('[data-radix-scroll-area-viewport]')
+        if (scrollElement) {
+          scrollElement.scrollTop = scrollElement.scrollHeight
+        }
+      }
+    }, [messages])
+
+    const handleSend = () => {
+      if ((inputValue.trim() || selectedFiles.length > 0) && onSendMessage) {
+        onSendMessage(inputValue.trim(), selectedFiles)
+        setInputValue("")
+        setSelectedFiles([])
+        inputRef.current?.focus()
+      }
+    }
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault()
+        handleSend()
+      }
+    }
+
+    const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files || [])
+    
+    // Validate file sizes and MIME types
+    const validFiles = files.filter(file => {
+      // Size validation
+      if (file.size > maxFileSize) {
+        console.warn(`File ${file.name} exceeds ${maxFileSize / 1024 / 1024}MB limit`)
+        return false
+      }
+      
+      // Basic MIME type validation
+      const acceptedTypes = acceptedFileTypes.split(',').map(t => t.trim())
+      const matchesType = acceptedTypes.some(type => {
+        if (type.startsWith('.')) {
+          return file.name.toLowerCase().endsWith(type.toLowerCase())
+        }
+        if (type.endsWith('/*')) {
+          const category = type.split('/')[0]
+          return file.type.startsWith(category + '/')
+        }
+        return file.type === type
+      })
+      
+      if (!matchesType) {
+        console.warn(`File ${file.name} type ${file.type} not accepted`)
+        return false
+      }
+      
+      return true
+    })
+    
+    if (validFiles.length < files.length) {
+      console.warn(`${files.length - validFiles.length} file(s) were rejected`)
+    }
+    
+    setSelectedFiles(prev => [...prev, ...validFiles])
+  }
+
+    const handleRemoveFile = (index: number) => {
+      setSelectedFiles(prev => prev.filter((_, i) => i !== index))
+    }
+
+    const handleClear = () => {
+      if (onClear) {
+        onClear()
+      }
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex flex-col border rounded-lg bg-background overflow-hidden",
+          className
+        )}
+        style={{ maxHeight }}
+        {...props}
+      >
+        {/* Header with clear button */}
+        {onClear && messages.length > 0 && (
+          <div className="flex items-center justify-between px-4 py-2 border-b bg-muted/30">
+            <span className="text-sm text-muted-foreground">
+              {messages.length} message{messages.length !== 1 ? 's' : ''}
+            </span>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleClear}
+              className="h-8 text-xs"
+            >
+              <Trash2 className="h-3 w-3 mr-1" />
+              Clear
+            </Button>
+          </div>
+        )}
+
+        {/* Messages area */}
+        <ScrollArea ref={scrollRef} className="flex-1 p-4">
+          <div className="space-y-4">
+            {messages.length === 0 ? (
+              <div className="flex items-center justify-center h-32 text-muted-foreground text-sm">
+                Start a conversation...
+              </div>
+            ) : (
+              messages.map((message) => (
+                <div
+                  key={message.id}
+                  className={cn(
+                    "flex gap-3",
+                    message.role === "user" ? "justify-end" : "justify-start"
+                  )}
+                >
+                  {message.role !== "user" && (
+                    <Avatar className="h-8 w-8 flex-shrink-0">
+                      <AvatarImage src={message.avatar || assistantAvatarUrl} />
+                      <AvatarFallback>{message.avatarFallback || assistantAvatarFallback}</AvatarFallback>
+                    </Avatar>
+                  )}
+                  
+                  <div
+                    className={cn(
+                      "rounded-lg px-4 py-2 max-w-[80%]",
+                      message.role === "user"
+                        ? "bg-primary text-primary-foreground"
+                        : "bg-muted"
+                    )}
+                  >
+                    <MessageContent content={message.content} enableMarkdown={enableMarkdown} />
+                    {showTimestamp && message.timestamp && (
+                      <div className="text-xs opacity-70 mt-1">
+                        {message.timestamp}
+                      </div>
+                    )}
+                    {message.streaming && (
+                      <div className="flex gap-1 mt-2">
+                        <div className="w-2 h-2 bg-current rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
+                        <div className="w-2 h-2 bg-current rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
+                        <div className="w-2 h-2 bg-current rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
+                      </div>
+                    )}
+                  </div>
+
+                  {message.role === "user" && (
+                    <Avatar className="h-8 w-8 flex-shrink-0">
+                      <AvatarImage src={message.avatar || userAvatarUrl} />
+                      <AvatarFallback>{message.avatarFallback || userAvatarFallback}</AvatarFallback>
+                    </Avatar>
+                  )}
+                </div>
+              ))
+            )}
+          </div>
+        </ScrollArea>
+
+        {/* Selected files preview */}
+        {selectedFiles.length > 0 && (
+          <div className="px-4 py-2 border-t bg-muted/30">
+            <div className="flex flex-wrap gap-2">
+              {selectedFiles.map((file, index) => (
+                <div
+                  key={index}
+                  className="flex items-center gap-2 bg-background border rounded px-2 py-1 text-xs"
+                >
+                  <Paperclip className="h-3 w-3" />
+                  <span className="max-w-[150px] truncate">{file.name}</span>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-4 w-4 p-0"
+                    onClick={() => handleRemoveFile(index)}
+                  >
+                    <X className="h-3 w-3" />
+                  </Button>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Input area */}
+        <div className="flex items-center gap-2 p-4 border-t">
+          {enableFileUpload && (
+            <>
+              <input
+                ref={fileInputRef}
+                type="file"
+                multiple
+                accept={acceptedFileTypes}
+                onChange={handleFileSelect}
+                className="hidden"
+              />
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => fileInputRef.current?.click()}
+                disabled={disabled}
+                aria-label="Attach file"
+              >
+                <Paperclip className="h-4 w-4" />
+              </Button>
+            </>
+          )}
+          
+          <Input
+            ref={inputRef}
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder={placeholder}
+            disabled={disabled}
+            className="flex-1"
+          />
+          
+          <Button
+            onClick={handleSend}
+            disabled={disabled || (!inputValue.trim() && selectedFiles.length === 0)}
+            size="icon"
+            aria-label="Send message"
+          >
+            <Send className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+    )
+  }
+)
+
+ChatbotEnhanced.displayName = "ChatbotEnhanced"
+
+export { ChatbotEnhanced }

package/src/__tests__/ChatbotEnhanced.test.tsx

@@ -0,0 +1,199 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import '@testing-library/jest-dom';
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { ChatbotEnhanced, type ChatMessage } from '../ChatbotEnhanced';
+
+describe('ChatbotEnhanced', () => {
+  const mockMessages: ChatMessage[] = [
+    {
+      id: '1',
+      role: 'user',
+      content: 'Hello!',
+      timestamp: '10:00 AM',
+    },
+    {
+      id: '2',
+      role: 'assistant',
+      content: 'Hi there! How can I help you?',
+      timestamp: '10:01 AM',
+    },
+  ];
+
+  it('should render without crashing', () => {
+    const { container } = render(<ChatbotEnhanced />);
+    expect(container).toBeTruthy();
+  });
+
+  it('should render messages', () => {
+    render(<ChatbotEnhanced messages={mockMessages} />);
+    
+    expect(screen.getByText('Hello!')).toBeInTheDocument();
+    expect(screen.getByText('Hi there! How can I help you?')).toBeInTheDocument();
+  });
+
+  it('should render placeholder in input', () => {
+    const placeholder = 'Type your message...';
+    render(<ChatbotEnhanced placeholder={placeholder} />);
+    
+    expect(screen.getByPlaceholderText(placeholder)).toBeInTheDocument();
+  });
+
+  it('should call onSendMessage when send button is clicked', async () => {
+    const onSendMessage = vi.fn();
+    render(<ChatbotEnhanced onSendMessage={onSendMessage} />);
+    
+    const input = screen.getByPlaceholderText(/message/i);
+    const sendButton = screen.getByRole('button', { name: /send/i });
+    
+    fireEvent.change(input, { target: { value: 'Test message' } });
+    fireEvent.click(sendButton);
+    
+    await waitFor(() => {
+      expect(onSendMessage).toHaveBeenCalledWith('Test message', []);
+    });
+  });
+
+  it('should call onSendMessage when Enter is pressed', async () => {
+    const onSendMessage = vi.fn();
+    render(<ChatbotEnhanced onSendMessage={onSendMessage} />);
+    
+    const input = screen.getByPlaceholderText(/message/i);
+    
+    fireEvent.change(input, { target: { value: 'Test message' } });
+    fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
+    
+    await waitFor(() => {
+      expect(onSendMessage).toHaveBeenCalledWith('Test message', []);
+    });
+  });
+
+  it('should not send empty messages', async () => {
+    const onSendMessage = vi.fn();
+    render(<ChatbotEnhanced onSendMessage={onSendMessage} />);
+    
+    const sendButton = screen.getByRole('button', { name: /send/i });
+    
+    fireEvent.click(sendButton);
+    
+    await waitFor(() => {
+      expect(onSendMessage).not.toHaveBeenCalled();
+    });
+  });
+
+  it('should call onClear when clear button is clicked', () => {
+    const onClear = vi.fn();
+    render(<ChatbotEnhanced messages={mockMessages} onClear={onClear} />);
+    
+    const clearButton = screen.getByRole('button', { name: /clear/i });
+    fireEvent.click(clearButton);
+    
+    expect(onClear).toHaveBeenCalled();
+  });
+
+  it('should render markdown content when enabled', () => {
+    const markdownMessage: ChatMessage[] = [
+      {
+        id: '1',
+        role: 'assistant',
+        content: '**Bold text** and *italic text*',
+      },
+    ];
+    
+    render(<ChatbotEnhanced messages={markdownMessage} enableMarkdown={true} />);
+    
+    // Check that markdown is rendered (will create strong and em tags)
+    const { container } = render(<ChatbotEnhanced messages={markdownMessage} enableMarkdown={true} />);
+    expect(container.querySelector('strong')).toBeTruthy();
+  });
+
+  it('should render plain text when markdown is disabled', () => {
+    const textMessage: ChatMessage[] = [
+      {
+        id: '1',
+        role: 'assistant',
+        content: '**Bold text** and *italic text*',
+      },
+    ];
+    
+    render(<ChatbotEnhanced messages={textMessage} enableMarkdown={false} />);
+    
+    // Should render as plain text
+    expect(screen.getByText('**Bold text** and *italic text*')).toBeInTheDocument();
+  });
+
+  it('should show timestamps when enabled', () => {
+    render(<ChatbotEnhanced messages={mockMessages} showTimestamp={true} />);
+    
+    expect(screen.getByText('10:00 AM')).toBeInTheDocument();
+    expect(screen.getByText('10:01 AM')).toBeInTheDocument();
+  });
+
+  it('should disable input when disabled prop is true', () => {
+    render(<ChatbotEnhanced disabled={true} />);
+    
+    const input = screen.getByPlaceholderText(/message/i);
+    expect(input).toBeDisabled();
+  });
+
+  it('should render file upload button when enabled', () => {
+    render(<ChatbotEnhanced enableFileUpload={true} />);
+    
+    const fileButton = screen.getByRole('button', { name: /attach/i });
+    expect(fileButton).toBeInTheDocument();
+  });
+
+  it('should handle streaming messages', () => {
+    const streamingMessage: ChatMessage[] = [
+      {
+        id: '1',
+        role: 'assistant',
+        content: 'Streaming content...',
+        streaming: true,
+      },
+    ];
+    
+    const { container } = render(<ChatbotEnhanced messages={streamingMessage} />);
+    
+    expect(screen.getByText('Streaming content...')).toBeInTheDocument();
+    // Streaming messages typically have a visual indicator (cursor/animation)
+  });
+
+  it('should render user and assistant avatars', () => {
+    render(
+      <ChatbotEnhanced
+        messages={mockMessages}
+        userAvatarFallback="U"
+        assistantAvatarFallback="A"
+      />
+    );
+    
+    // Avatars should be rendered
+    expect(screen.getByText('U')).toBeInTheDocument();
+    expect(screen.getByText('A')).toBeInTheDocument();
+  });
+
+  it('should clear input after sending message', async () => {
+    const onSendMessage = vi.fn();
+    render(<ChatbotEnhanced onSendMessage={onSendMessage} />);
+    
+    const input = screen.getByPlaceholderText(/message/i) as HTMLInputElement;
+    
+    fireEvent.change(input, { target: { value: 'Test message' } });
+    expect(input.value).toBe('Test message');
+    
+    const sendButton = screen.getByRole('button', { name: /send/i });
+    fireEvent.click(sendButton);
+    
+    await waitFor(() => {
+      expect(input.value).toBe('');
+    });
+  });
+});