Feat/1958 ai left panel UI elements

packages/epics/src/common/ai-left-panel-layout.tsx

@@ -58,8 +58,8 @@ export function AiLeftPanelLayout({ children }: AiLeftPanelLayoutProps) {
         <>
           <div
             className={cn(
-              'relative flex h-full flex-shrink-0 flex-col transition-all duration-300',
-              panelOpen ? '' : 'w-0 overflow-hidden',
+              'relative flex h-full min-w-0 flex-shrink-0 flex-col overflow-hidden transition-all duration-300',
+              panelOpen ? '' : 'w-0',
             )}
             style={panelOpen ? { width: panelWidth } : undefined}
           >

packages/epics/src/common/ai-left-panel.tsx

@@ -1,34 +1,66 @@
 'use client';
 
-import { PanelLeftClose } from 'lucide-react';
+import { useState } from 'react';
 
 import { cn } from '@hypha-platform/ui-utils';
 
+import {
+  AiPanelHeader,
+  AiPanelMessages,
+  AiPanelChatBar,
+  MOCK_MODEL_OPTIONS,
+  MOCK_SUGGESTIONS,
+  MOCK_WELCOME_MESSAGE,
+} from './ai-panel';
+
 type AiLeftPanelProps = {
   onClose: () => void;
   className?: string;
 };
 
 export function AiLeftPanel({ onClose, className }: AiLeftPanelProps) {
+  const [input, setInput] = useState('');
+  const [selectedModel, setSelectedModel] = useState(MOCK_MODEL_OPTIONS[0]!);
+  const [messages, setMessages] = useState([MOCK_WELCOME_MESSAGE]);
+  const [showSuggestions, setShowSuggestions] = useState(true);
+  const [isStreaming, setIsStreaming] = useState(false);
+
+  const handleSend = () => {
+    // Placeholder - no business logic
+  };
+
+  const handleSuggestionSelect = (text: string) => {
+    setShowSuggestions(false);
+    setInput(text);
+  };
+
   return (
     <div
       className={cn(
-        'flex h-full flex-col bg-background-2 border-r border-border',
+        'flex h-full min-w-0 flex-col overflow-hidden border-r border-border bg-background-2',
         className,
       )}
     >
-      <div className="flex flex-shrink-0 items-center justify-end border-b border-border px-4 py-3">
-        <button
-          type="button"
-          onClick={onClose}
-          className="flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
-          title="Close panel"
-          aria-label="Close panel"
-        >
-          <PanelLeftClose className="h-3.5 w-3.5" />
-        </button>
-      </div>
-      <div className="flex-1 overflow-auto" />
+      <AiPanelHeader
+        onClose={onClose}
+        modelOptions={MOCK_MODEL_OPTIONS}
+        selectedModel={selectedModel}
+        onModelSelect={setSelectedModel}
+      />
+
+      <AiPanelMessages
+        messages={messages}
+        suggestions={MOCK_SUGGESTIONS}
+        showSuggestions={showSuggestions}
+        onSuggestionSelect={handleSuggestionSelect}
+      />
+
+      <AiPanelChatBar
+        value={input}
+        onChange={setInput}
+        onSend={handleSend}
+        isStreaming={isStreaming}
+      />
     </div>
   );
 }

packages/epics/src/common/ai-panel/ai-panel-chat-bar.tsx

@@ -0,0 +1,154 @@
+'use client';
+
+import { useRef } from 'react';
+import {
+  Code2,
+  Image,
+  Mic,
+  Paperclip,
+  Search,
+  Send,
+  Square,
+} from 'lucide-react';
+
+import { cn } from '@hypha-platform/ui-utils';
+
+type AiPanelChatBarProps = {
+  value: string;
+  onChange: (value: string) => void;
+  onSend: () => void;
+  isStreaming?: boolean;
+  placeholder?: string;
+};
+
+export function AiPanelChatBar({
+  value,
+  onChange,
+  onSend,
+  isStreaming = false,
+  placeholder = 'Ask Hypha AI anything...',
+}: AiPanelChatBarProps) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const autoResize = () => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto';
+      textareaRef.current.style.height =
+        Math.min(textareaRef.current.scrollHeight, 160) + 'px';
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      onSend();
+    }
+  };
+
+  const canSend = value.trim().length > 0 && !isStreaming;
+
+  return (
+    <div className="flex w-full min-w-0 flex-shrink-0 flex-col border-t border-border bg-background-2 p-3">
+      <div
+        className={cn(
+          'flex min-w-0 flex-col rounded-2xl border border-border bg-muted/50',
+          'transition-all duration-200 focus-within:border-primary/50 focus-within:ring-2 focus-within:ring-primary/20',
+        )}
+      >
+        {/* Toolbar */}
+        <div className="flex min-w-0 items-center gap-1 px-3 pt-2.5">
+          <button
+            type="button"
+            className="rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+            title="Attach file"
+            aria-label="Attach file"
+          >
+            <Paperclip className="h-3.5 w-3.5" />
+          </button>
+          <button
+            type="button"
+            className="rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+            title="Image"
+            aria-label="Add image"
+          >
+            <Image className="h-3.5 w-3.5" />
+          </button>
+          <button
+            type="button"
+            className="rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+            title="Code"
+            aria-label="Add code snippet"
+          >
+            <Code2 className="h-3.5 w-3.5" />
+          </button>
+          <button
+            type="button"
+            className="rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+            title="Search web"
+            aria-label="Search"
+          >
+            <Search className="h-3.5 w-3.5" />
+          </button>
+          <div className="min-w-0 flex-1" />
+          <button
+            type="button"
+            className="rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+            title="Voice"
+            aria-label="Voice input"
+          >
+            <Mic className="h-3.5 w-3.5" />
+          </button>
+        </div>
+
+        {/* Textarea — full width */}
+        <textarea
+          ref={textareaRef}
+          value={value}
+          onChange={(e) => {
+            onChange(e.target.value);
+            autoResize();
+          }}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          rows={1}
+          className={cn(
+            'min-h-[36px] min-w-0 max-h-[160px] w-full resize-none',
+            'bg-transparent px-3 py-2 text-sm leading-relaxed text-foreground',
+            'placeholder:text-muted-foreground focus:outline-none',
+          )}
+          style={{ minHeight: '36px', maxHeight: '160px' }}
+        />
+
+        {/* Bottom bar */}
+        <div className="flex min-w-0 flex-wrap items-center justify-between gap-x-2 gap-y-1 px-3 pb-2.5">
+          <span className="min-w-0 break-words text-xs text-muted-foreground">
+            Shift+Enter for newline
+          </span>
+          <button
+            type="button"
+            onClick={onSend}
+            disabled={!canSend}
+            className={cn(
+              'flex items-center gap-1.5 rounded-xl px-3 py-1.5 text-xs font-medium transition-all duration-200',
+              canSend
+                ? 'bg-primary text-primary-foreground hover:opacity-90'
+                : 'cursor-not-allowed bg-muted text-muted-foreground',
+            )}
+          >
+            {isStreaming ? (
+              <>
+                <Square className="h-3 w-3" />
+                Stop
+              </>
+            ) : (
+              <>
+                <Send className="h-3 w-3" />
+                Send
+              </>
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

packages/epics/src/common/ai-panel/ai-panel-header.tsx

@@ -0,0 +1,107 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { ChevronDown, PanelLeftClose, RefreshCw, Sparkles } from 'lucide-react';
+
+import { cn } from '@hypha-platform/ui-utils';
+
+import type { ModelOption } from './mock-data';
+
+type AiPanelHeaderProps = {
+  onClose: () => void;
+  modelOptions: ModelOption[];
+  selectedModel: ModelOption;
+  onModelSelect: (model: ModelOption) => void;
+};
+
+export function AiPanelHeader({
+  onClose,
+  modelOptions,
+  selectedModel,
+  onModelSelect,
+}: AiPanelHeaderProps) {
+  const [showModelMenu, setShowModelMenu] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const SelectedIcon = selectedModel.icon;
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        showModelMenu &&
+        menuRef.current &&
+        !menuRef.current.contains(e.target as Node)
+      ) {
+        setShowModelMenu(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [showModelMenu]);
+
+  return (
+    <div className="flex min-w-0 flex-shrink-0 flex-wrap items-center justify-between gap-x-2 gap-y-2 border-b border-border bg-background-2 px-4 py-3">
+      <div className="flex min-w-0 shrink-0 items-center gap-2">
+        <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-xl bg-primary">
+          <Sparkles className="h-3.5 w-3.5 text-primary-foreground" />
+        </div>
+        <span className="font-semibold text-sm text-foreground">Hypha AI</span>
+      </div>
+      <div className="flex min-w-0 flex-wrap items-center justify-end gap-1">
+        <div className="relative" ref={menuRef}>
+          <button
+            type="button"
+            onClick={() => setShowModelMenu(!showModelMenu)}
+            className="flex min-w-0 items-center gap-1.5 rounded-lg border border-border bg-secondary px-2.5 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+          >
+            <SelectedIcon className="h-3 w-3 shrink-0" />
+            <span className="min-w-0 truncate">{selectedModel.label}</span>
+            <ChevronDown className="h-3 w-3 shrink-0" />
+          </button>
+          {showModelMenu && (
+            <div className="absolute left-0 top-full z-50 mt-1 w-44 animate-in fade-in slide-in-from-top-2 rounded-xl border border-border bg-popover py-1 shadow-2xl duration-200">
+              {modelOptions.map((m) => {
+                const Icon = m.icon;
+                return (
+                  <button
+                    key={m.id}
+                    type="button"
+                    onClick={() => {
+                      onModelSelect(m);
+                      setShowModelMenu(false);
+                    }}
+                    className={cn(
+                      'flex w-full items-center gap-2 px-3 py-2 text-xs transition-colors hover:bg-muted',
+                      m.id === selectedModel.id
+                        ? 'text-primary'
+                        : 'text-foreground',
+                    )}
+                  >
+                    <Icon className="h-3 w-3" />
+                    {m.label}
+                  </button>
+                );
+              })}
+            </div>
+          )}
+        </div>
+        <button
+          type="button"
+          className="flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+          title="Refresh"
+          aria-label="Refresh"
+        >
+          <RefreshCw className="h-3.5 w-3.5" />
+        </button>
+        <button
+          type="button"
+          onClick={onClose}
+          className="flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+          title="Hide AI panel"
+          aria-label="Close panel"
+        >
+          <PanelLeftClose className="h-3.5 w-3.5" />
+        </button>
+      </div>
+    </div>
+  );
+}