@invect/ui 0.0.1

package/src/components/chat/ChatModelSelector.tsx

@@ -0,0 +1,208 @@
+/**
+ * ChatModelSelector — Combobox for selecting the LLM model in the chat input area.
+ *
+ * Shows models from the provider's API (server-filtered with debounced search),
+ * with a "Recent" section for recently used models tracked via localStorage.
+ */
+
+import React, { useState, useCallback, useMemo, useEffect } from 'react';
+import { Check, ChevronsUpDown, Clock, Loader2, Sparkles } from 'lucide-react';
+import { useQuery } from '@tanstack/react-query';
+import { cn } from '~/lib/utils';
+import { Button } from '~/components/ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from '~/components/ui/popover';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '~/components/ui/command';
+import { useApiClient } from '~/contexts/ApiContext';
+import { useChatStore } from './chat.store';
+
+const MAX_RECENT_MODELS = 5;
+const DEBOUNCE_MS = 300;
+
+function useDebouncedValue<T>(value: T, delayMs: number): T {
+  const [debounced, setDebounced] = useState(value);
+  useEffect(() => {
+    const timer = setTimeout(() => setDebounced(value), delayMs);
+    return () => clearTimeout(timer);
+  }, [value, delayMs]);
+  return debounced;
+}
+
+interface ChatModelSelectorProps {
+  className?: string;
+}
+
+export function ChatModelSelector({ className }: ChatModelSelectorProps) {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState('');
+  const debouncedSearch = useDebouncedValue(search, DEBOUNCE_MS);
+  const apiClient = useApiClient();
+
+  const credentialId = useChatStore((s) => s.settings.credentialId);
+  const selectedModel = useChatStore((s) => s.settings.model);
+  const recentModels = useChatStore((s) => s.settings.recentModels);
+  const updateSettings = useChatStore((s) => s.updateSettings);
+
+  // Fetch models with server-side search filter
+  const {
+    data: models = [],
+    isLoading,
+    isError,
+    isFetching,
+  } = useQuery({
+    queryKey: ['chat-models', credentialId, debouncedSearch],
+    queryFn: () => apiClient.getChatModels(credentialId ?? '', debouncedSearch || undefined),
+    enabled: !!credentialId && open,
+    staleTime: 5 * 60 * 1000, // 5 min cache per query
+    retry: 1,
+  });
+
+  // Reset search when popover closes
+  useEffect(() => {
+    if (!open) {
+      setSearch('');
+    }
+  }, [open]);
+
+  const handleSelect = useCallback(
+    (modelId: string) => {
+      const newRecents = [modelId, ...recentModels.filter((id) => id !== modelId)].slice(
+        0,
+        MAX_RECENT_MODELS,
+      );
+      updateSettings({ model: modelId, recentModels: newRecents });
+      setOpen(false);
+    },
+    [recentModels, updateSettings],
+  );
+
+  // Recent models (only shown when not searching)
+  const recentModelItems = useMemo(() => {
+    if (debouncedSearch || !recentModels.length || !models.length) {
+      return [];
+    }
+    return recentModels
+      .map((id) => models.find((m) => m.id === id))
+      .filter((m): m is NonNullable<typeof m> => m !== null && m !== undefined);
+  }, [debouncedSearch, recentModels, models]);
+
+  const displayLabel = useMemo(() => {
+    if (!selectedModel) {
+      return 'Default model';
+    }
+    return selectedModel;
+  }, [selectedModel]);
+
+  if (!credentialId) {
+    return null;
+  }
+
+  const showSpinner = isFetching && debouncedSearch !== search;
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          role="combobox"
+          aria-expanded={open}
+          className={cn(
+            'h-6 gap-1 px-2 text-[11px] font-normal text-muted-foreground hover:text-foreground max-w-50',
+            className,
+          )}
+        >
+          <Sparkles className="size-3 shrink-0" />
+          <span className="truncate">{displayLabel}</span>
+          <ChevronsUpDown className="ml-auto size-3 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-70 p-0" align="start" side="top" sideOffset={8}>
+        <Command shouldFilter={false}>
+          <div className="relative">
+            <CommandInput
+              placeholder="Search models…"
+              className="h-8 text-xs focus:ring-0 focus:outline-none"
+              value={search}
+              onValueChange={setSearch}
+            />
+            {showSpinner && (
+              <Loader2 className="absolute size-3 animate-spin right-2 top-2.5 text-muted-foreground" />
+            )}
+          </div>
+          <CommandList className="max-h-62.5">
+            {isLoading && (
+              <div className="py-4 text-xs text-center text-muted-foreground">Loading models…</div>
+            )}
+            {isError && (
+              <div className="py-4 text-xs text-center text-muted-foreground">
+                Failed to load models
+              </div>
+            )}
+            {!isLoading && !isError && models.length === 0 && debouncedSearch && (
+              <CommandEmpty>No models matching &ldquo;{debouncedSearch}&rdquo;</CommandEmpty>
+            )}
+
+            {/* Default option (only when not searching) */}
+            {!debouncedSearch && (
+              <CommandGroup>
+                <CommandItem
+                  value="__default__"
+                  onSelect={() => {
+                    updateSettings({ model: null });
+                    setOpen(false);
+                  }}
+                  className="text-xs"
+                >
+                  <span className="text-muted-foreground">Provider default</span>
+                  {!selectedModel && <Check className="ml-auto size-3" />}
+                </CommandItem>
+              </CommandGroup>
+            )}
+
+            {/* Recent models (only when not searching) */}
+            {recentModelItems.length > 0 && (
+              <CommandGroup heading="Recent">
+                {recentModelItems.map((model) => (
+                  <CommandItem
+                    key={`recent-${model.id}`}
+                    value={`recent-${model.id}`}
+                    onSelect={() => handleSelect(model.id)}
+                    className="text-xs"
+                  >
+                    <Clock className="mr-1.5 size-3 text-muted-foreground/60" />
+                    <span className="truncate">{model.name || model.id}</span>
+                    {selectedModel === model.id && <Check className="ml-auto size-3" />}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            )}
+
+            {/* All / filtered models */}
+            {models.length > 0 && (
+              <CommandGroup heading={debouncedSearch ? 'Results' : 'All models'}>
+                {models.map((model) => (
+                  <CommandItem
+                    key={model.id}
+                    value={model.id}
+                    onSelect={() => handleSelect(model.id)}
+                    className="text-xs"
+                  >
+                    <span className="truncate">{model.name || model.id}</span>
+                    {selectedModel === model.id && <Check className="ml-auto size-3" />}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/components/chat/ChatPanel.tsx

@@ -0,0 +1,243 @@
+/**
+ * ChatPanel — Main chat assistant sidebar component.
+ *
+ * Slim composition shell that wires up hooks and composes
+ * ChatMessageList, ChatInput, and ChatSettingsPanel.
+ */
+
+import React, { useRef, useEffect, useCallback, useMemo } from 'react';
+import { MessageSquare, X, Trash2, Bot, Settings2 } from 'lucide-react';
+import { cn } from '~/lib/utils';
+import { Button } from '~/components/ui/button';
+import { Tooltip, TooltipTrigger, TooltipContent } from '~/components/ui/tooltip';
+import { useChat } from './use-chat';
+import { useCredentials } from '~/api/credentials.api';
+import { useChatStore } from './chat.store';
+import { ChatSettingsPanel } from './ChatSettingsPanel';
+import { ChatMessageList } from './ChatMessageList';
+import { ChatInput } from './ChatInput';
+import { useToolbarCollapsed } from '~/components/flow-editor/toolbar-context';
+
+const DEFAULT_WIDTH = 440;
+const MIN_WIDTH = 340;
+const MAX_WIDTH = 700;
+
+// =====================================
+// ChatPanel (main export)
+// =====================================
+
+interface ChatPanelProps {
+  flowId?: string;
+  selectedNodeId?: string;
+  selectedRunId?: string;
+  viewMode?: 'edit' | 'runs';
+  basePath?: string;
+  className?: string;
+}
+
+export function ChatPanel({
+  flowId,
+  selectedNodeId,
+  selectedRunId,
+  viewMode,
+  basePath,
+  className,
+}: ChatPanelProps) {
+  const {
+    sendMessage,
+    stopStreaming,
+    clearMessages,
+    messages,
+    isStreaming,
+    isLoadingHistory,
+    streamingText,
+    error,
+    isOpen,
+    setOpen,
+    isSettingsPanelOpen,
+    toggleSettingsPanel,
+  } = useChat({ flowId, selectedNodeId, selectedRunId, viewMode: viewMode ?? 'edit', basePath });
+
+  // Check if a credential has been selected for the chat assistant
+  const credentialId = useChatStore((s) => s.settings.credentialId);
+  const { data: llmCredentials = [], isLoading: isLoadingCredentials } = useCredentials({
+    type: 'llm',
+    isActive: true,
+  });
+  const hasAvailableLlmCredentials = llmCredentials.length > 0;
+  const hasSelectedCredential = useMemo(
+    () =>
+      Boolean(credentialId && llmCredentials.some((credential) => credential.id === credentialId)),
+    [credentialId, llmCredentials],
+  );
+  const hasConfiguredCredential = credentialId
+    ? isLoadingCredentials || hasSelectedCredential
+    : false;
+
+  // Consume pending prompt from overlay (fires once when panel opens with a queued prompt)
+  const pendingConsumed = useRef(false);
+  useEffect(() => {
+    if (!isOpen || isStreaming || pendingConsumed.current || !hasConfiguredCredential) {
+      return;
+    }
+    const prompt = useChatStore.getState().consumePendingPrompt();
+    if (prompt) {
+      pendingConsumed.current = true;
+      setTimeout(() => {
+        sendMessage(prompt);
+        pendingConsumed.current = false;
+      }, 50);
+    }
+  }, [hasConfiguredCredential, isOpen, isStreaming, sendMessage]);
+
+  // --- Resize logic ---
+  const [panelWidth, setPanelWidth] = React.useState(DEFAULT_WIDTH);
+  const isResizing = useRef(false);
+
+  const startResize = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      isResizing.current = true;
+      const startX = e.clientX;
+      const startWidth = panelWidth;
+
+      const onMouseMove = (ev: MouseEvent) => {
+        if (!isResizing.current) {
+          return;
+        }
+        const delta = startX - ev.clientX;
+        const next = Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, startWidth + delta));
+        setPanelWidth(next);
+      };
+
+      const onMouseUp = () => {
+        isResizing.current = false;
+        document.removeEventListener('mousemove', onMouseMove);
+        document.removeEventListener('mouseup', onMouseUp);
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+      };
+
+      document.body.style.cursor = 'col-resize';
+      document.body.style.userSelect = 'none';
+      document.addEventListener('mousemove', onMouseMove);
+      document.addEventListener('mouseup', onMouseUp);
+    },
+    [panelWidth],
+  );
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        'relative flex flex-col h-full border-l border-border bg-imp-background text-card-foreground',
+        className,
+      )}
+      style={{ width: panelWidth, minWidth: MIN_WIDTH, maxWidth: MAX_WIDTH }}
+    >
+      {/* Resize handle on left edge */}
+      <div
+        onMouseDown={startResize}
+        className="absolute inset-y-0 left-0 z-20 w-1 transition-colors cursor-col-resize hover:bg-primary/20 active:bg-primary/30"
+      />
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-2.5 border-b border-border">
+        <div className="flex items-center gap-2">
+          <Bot className="size-4 text-primary" />
+          <span className="text-sm font-semibold">Chat</span>
+        </div>
+        <div className="flex items-center gap-1.5">
+          <Button
+            variant={isSettingsPanelOpen ? 'secondary' : 'ghost'}
+            size="icon-sm"
+            onClick={toggleSettingsPanel}
+            title="Chat settings"
+          >
+            <Settings2 className="size-3.5" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            onClick={clearMessages}
+            title="Clear chat"
+            disabled={isStreaming || messages.length === 0}
+          >
+            <Trash2 className="size-3.5" />
+          </Button>
+          <Button variant="ghost" size="icon-sm" onClick={() => setOpen(false)} title="Close">
+            <X className="size-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Settings Panel (slide-over) */}
+      {isSettingsPanelOpen && (
+        <div className="absolute inset-0 z-30 flex flex-col bg-imp-background">
+          <ChatSettingsPanel onClose={toggleSettingsPanel} />
+        </div>
+      )}
+
+      {/* Messages */}
+      <ChatMessageList
+        messages={messages}
+        isStreaming={isStreaming}
+        isLoadingHistory={isLoadingHistory}
+        streamingText={streamingText}
+        error={error}
+        hasConfiguredCredential={hasConfiguredCredential}
+        hasAvailableLlmCredentials={hasAvailableLlmCredentials}
+        onOpenSettings={toggleSettingsPanel}
+        onSendMessage={sendMessage}
+      />
+
+      {/* Input */}
+      <ChatInput
+        isStreaming={isStreaming}
+        isLoadingHistory={isLoadingHistory}
+        hasConfiguredCredential={hasConfiguredCredential}
+        hasAvailableLlmCredentials={hasAvailableLlmCredentials}
+        onSend={sendMessage}
+        onStop={stopStreaming}
+        onOpenSettings={toggleSettingsPanel}
+      />
+    </div>
+  );
+}
+
+// =====================================
+// ChatToggleButton (for toolbar)
+// =====================================
+
+export function ChatToggleButton({ className }: { className?: string }) {
+  const { isOpen, togglePanel } = useChat();
+  const collapsed = useToolbarCollapsed();
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={togglePanel}
+          title={collapsed ? undefined : isOpen ? 'Close AI Chat' : 'Open AI Chat'}
+          className={cn(
+            'gap-1.5 hover:bg-accent',
+            isOpen
+              ? 'bg-accent text-accent-foreground'
+              : 'text-muted-foreground hover:text-foreground',
+            className,
+          )}
+        >
+          <MessageSquare className="size-4" />
+          {!collapsed && <span className="text-xs font-medium">Chat</span>}
+        </Button>
+      </TooltipTrigger>
+      {collapsed && (
+        <TooltipContent side="top">{isOpen ? 'Close AI Chat' : 'Open AI Chat'}</TooltipContent>
+      )}
+    </Tooltip>
+  );
+}

package/src/components/chat/ChatPromptOverlay.tsx

@@ -0,0 +1,150 @@
+/**
+ * ChatPromptOverlay — Centered empty-flow prompt.
+ *
+ * Appears in the center of the flow editor viewport when the flow
+ * has no nodes. Shows an "Add Node" button, an "or" separator,
+ * and a chat input encouraging users to describe what they need.
+ * On submit, opens the full ChatPanel and sends the prompt.
+ */
+
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+import { Plus, ArrowUp } from 'lucide-react';
+import { cn } from '~/lib/utils';
+import { useChatStore, useChatOpen } from './chat.store';
+import { useNodes } from '~/stores/flow-editor.store';
+import { useUIStore } from '~/stores/uiStore';
+
+interface ChatPromptOverlayProps {
+  className?: string;
+}
+
+export function ChatPromptOverlay({ className }: ChatPromptOverlayProps) {
+  const [value, setValue] = useState('');
+  const [focused, setFocused] = useState(false);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  const nodes = useNodes();
+  const isChatOpen = useChatOpen();
+  const setNodeSidebarOpen = useUIStore((s) => s.setNodeSidebarOpen);
+
+  // Only show when the flow is empty and the full chat panel isn't open
+  const isFlowEmpty = nodes.length === 0;
+  const shouldShow = isFlowEmpty && !isChatOpen;
+
+  const handleSubmit = useCallback(() => {
+    const text = value.trim();
+    if (!text) {
+      return;
+    }
+
+    // Queue the prompt and open the panel — ChatPanel will consume it
+    useChatStore.getState().setPendingPrompt(text);
+    setValue('');
+  }, [value]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        handleSubmit();
+      }
+    },
+    [handleSubmit],
+  );
+
+  const handleAddNode = useCallback(() => {
+    setNodeSidebarOpen(true);
+  }, [setNodeSidebarOpen]);
+
+  // Auto-focus the input after a short delay when visible
+  useEffect(() => {
+    if (shouldShow) {
+      const timer = setTimeout(() => inputRef.current?.focus(), 400);
+      return () => clearTimeout(timer);
+    }
+  }, [shouldShow]);
+
+  if (!shouldShow) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        'absolute inset-0 z-20 flex items-center justify-center pointer-events-none',
+        'animate-in fade-in duration-500',
+        className,
+      )}
+    >
+      <div className="flex items-center gap-4 pointer-events-auto">
+        {/* Add Node button */}
+        <button
+          type="button"
+          onClick={handleAddNode}
+          className={cn(
+            'flex items-center gap-2 px-5 py-3 rounded-xl',
+            'bg-primary text-primary-foreground',
+            'text-sm font-medium',
+            'shadow-md hover:shadow-lg hover:bg-primary/90',
+            'transition-all duration-200',
+            'cursor-pointer',
+          )}
+        >
+          <Plus className="size-4" />
+          Add Node
+        </button>
+
+        {/* "or" separator */}
+        <div className="flex items-center gap-3">
+          <span className="text-xs font-medium tracking-wide uppercase text-muted-foreground">
+            or
+          </span>
+        </div>
+
+        {/* Chat input */}
+        <div
+          className={cn(
+            'flex items-end gap-2 w-[420px] rounded-xl px-3 py-2.5',
+            'bg-background/95 backdrop-blur-sm',
+            'border border-primary/40 ring-1 ring-primary/15',
+            'shadow-md shadow-primary/5',
+            'transition-all duration-200',
+            focused && 'shadow-lg shadow-primary/10 border-primary/60 ring-2 ring-primary/25',
+          )}
+        >
+          <textarea
+            ref={inputRef}
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            onKeyDown={handleKeyDown}
+            onFocus={() => setFocused(true)}
+            onBlur={() => setFocused(false)}
+            placeholder="Describe what you need done…"
+            className={cn(
+              'flex-1 resize-none bg-transparent text-sm leading-relaxed',
+              'placeholder:text-muted-foreground/50',
+              'focus:outline-none',
+              'min-h-[72px] max-h-[120px] py-1.5 px-1',
+            )}
+            rows={3}
+          />
+          <button
+            type="button"
+            onClick={handleSubmit}
+            disabled={!value.trim()}
+            className={cn(
+              'flex items-center justify-center shrink-0',
+              'size-7 rounded-full',
+              'transition-all duration-150',
+              value.trim()
+                ? 'bg-primary text-primary-foreground hover:bg-primary/90 cursor-pointer'
+                : 'bg-muted text-muted-foreground cursor-default',
+            )}
+          >
+            <ArrowUp className="size-4" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}