@docyrus/ui-pro-ai-assistant 0.0.1

package/src/views/assistant-view.tsx

@@ -0,0 +1,1137 @@
+'use client';
+
+import {
+  useCallback, useEffect, useRef, useState, type ChangeEvent, type FC, type FormEvent, type ReactNode, type Ref
+} from 'react';
+
+import { createPortal } from 'react-dom';
+
+import { Avatar, AvatarFallback, AvatarImage } from '@docyrus/ui-pro-shared/components/avatar';
+import { Button } from '@docyrus/ui-pro-shared/components/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from '@docyrus/ui-pro-shared/components/dropdown-menu';
+import { Input } from '@docyrus/ui-pro-shared/components/input';
+import { ScrollArea } from '@docyrus/ui-pro-shared/components/scroll-area';
+import { cn } from '@docyrus/ui-pro-shared/lib/utils';
+import {
+  ArrowLeft,
+  Brain,
+  ChevronDown,
+  Code2,
+  Edit,
+  Eye,
+  Loader2,
+  Maximize2,
+  Minimize2,
+  PanelLeft,
+  Search,
+  Sparkles,
+  X
+} from 'lucide-react';
+
+import { type ApiResponse, useApiClient } from '../lib/api-client';
+import { type ToolActionEvent, type Work, WorkTypes } from '../types';
+
+import { type CanvasViewOptions, ChatPanel } from './chat-panel';
+
+import { ShellCanvas } from '../components/shell-canvas';
+import { CanvasAppView } from './canvas-app';
+import { CanvasCodeView } from './canvas-code';
+import { CanvasSpreadsheetView } from './canvas-spreadsheet';
+import { CanvasDeepResearchView } from './canvas-deep-research';
+import { CanvasImageView } from './canvas-image';
+import { CanvasRecordView } from './canvas-record-view';
+import { CanvasTextView } from './canvas-text';
+
+/*
+ * ---------------------------------------------------------------------------
+ * Shared props (both modes)
+ * ---------------------------------------------------------------------------
+ */
+
+interface AssistantViewCommonProps {
+  messages: any[];
+  isLoading: boolean;
+  input: string;
+  onInputChange: (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+  onSendMessage: (e?: FormEvent, options?: any) => void;
+  onStop: () => void;
+  logo?: string;
+  userPhoto?: string;
+  userDisplayName?: string;
+  description?: string;
+  title?: string;
+  welcomeMessage?: string;
+  isLoadingAgent?: boolean;
+  placeholder?: string;
+  footerText?: string;
+  supportFiles?: boolean;
+  supportWebSearch?: boolean;
+  supportDocumentSearch?: boolean;
+  supportDeepResearch?: boolean;
+  supportThinking?: boolean;
+  supportWorkCanvas?: boolean;
+  supportMultiModels?: boolean;
+  deploymentId?: string;
+  tenantAiAgentId?: string;
+  enableMicrophone?: boolean;
+  enableVoice?: boolean;
+  isRecording?: boolean;
+  recognition?: any;
+  onMicrophoneClick?: () => void;
+  onToolAction?: (event: ToolActionEvent) => void;
+  threadId?: string;
+}
+
+/*
+ * ---------------------------------------------------------------------------
+ * Inline mode props
+ * ---------------------------------------------------------------------------
+ */
+
+export interface InlineModeProps extends AssistantViewCommonProps {
+  mode: 'inline';
+
+  // Visibility
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+
+  // Display
+  className?: string;
+
+  // Sidebar
+  enableSidebar?: boolean;
+  isSidebarOpen?: boolean;
+  onToggleSidebar?: () => void;
+  renderSidebar?: () => ReactNode;
+
+  // Tabs
+  activeTab?: number;
+  onTabChange?: (tab: number) => void;
+
+  // Navigation
+  onExpand?: () => void;
+  onNewChat?: () => void;
+  enableNavDropdown?: boolean;
+  isFullscreen?: boolean;
+
+  // Content renderers
+  renderSessionsView?: () => ReactNode;
+  renderProjectsView?: () => ReactNode;
+  renderWorksView?: () => ReactNode;
+  renderMemoriesView?: () => ReactNode;
+  renderThreadHeader?: () => ReactNode;
+
+  // Agent selector
+  agentSelectorUrl?: string;
+  baseAgentSelectorUrl?: string;
+  onAgentChange?: (agentId: string, agentType: 'base' | 'deployment') => void;
+
+  // i18n
+  t: (key: string) => string;
+}
+
+/*
+ * ---------------------------------------------------------------------------
+ * Conversation mode props
+ * ---------------------------------------------------------------------------
+ */
+
+export interface ConversationModeProps extends AssistantViewCommonProps {
+  mode: 'conversation';
+  onWorkSelect: (work: Work) => void;
+  onOpenRightSidebar: () => void;
+}
+
+/*
+ * ---------------------------------------------------------------------------
+ * Union type
+ * ---------------------------------------------------------------------------
+ */
+
+export type AssistantViewProps = InlineModeProps | ConversationModeProps;
+
+/*
+ * ---------------------------------------------------------------------------
+ * Unified component
+ * ---------------------------------------------------------------------------
+ */
+
+export const AssistantView = ({ ref, ...props }: AssistantViewProps & { ref?: Ref<HTMLDivElement | null> }) => {
+  // Canvas state — always declared (rules of hooks), only used in inline mode
+  const [canvasWork, setCanvasWork] = useState<Work | null>(null);
+  const [canvasVersions, setCanvasVersions] = useState<{ id: string; name: string }[]>([]);
+  const [canvasVersionsLoading, setCanvasVersionsLoading] = useState(false);
+  const [canvasSelectedVersionId, setCanvasSelectedVersionId] = useState<string | null>(null);
+  const [canvasVersionImages, setCanvasVersionImages] = useState<any[] | null>(null);
+  const [canvasVersionContent, setCanvasVersionContent] = useState<string | null>(null);
+  const [canvasVersionLanguage, setCanvasVersionLanguage] = useState<string | undefined>(undefined);
+  const [activeCanvasTab, setActiveCanvasTab] = useState<0 | 1>(0);
+  const [canvasSpreadsheetCommands, setCanvasSpreadsheetCommands] = useState<any[]>([]);
+  const apiClient = useApiClient();
+
+  // Agent selector state
+  const [agentSelectorOpen, setAgentSelectorOpen] = useState(false);
+  const [agents, setAgents] = useState<any[]>([]);
+  const [baseAgents, setBaseAgents] = useState<any[]>([]);
+  const [agentsLoading, setAgentsLoading] = useState(false);
+  const [agentSearch, setAgentSearch] = useState('');
+  const [selectedAgent, setSelectedAgent] = useState<any | null>(null);
+  const agentSearchRef = useRef<HTMLInputElement>(null);
+
+  // Canvas open handler for inline mode
+  const handleOpenCanvasViewInline = (options: CanvasViewOptions) => {
+    if (options.type === 'xlsx' && canvasWork?.id === options.id && canvasWork?.type === WorkTypes.Xlsx) {
+      setCanvasSpreadsheetCommands(options.commands ?? []);
+
+      return;
+    }
+
+    setCanvasVersions([]);
+    setCanvasVersionsLoading(false);
+    setCanvasSelectedVersionId(null);
+    setCanvasVersionImages(null);
+    setCanvasVersionContent(null);
+    setCanvasVersionLanguage(undefined);
+    setActiveCanvasTab(0);
+    setCanvasSpreadsheetCommands([]);
+
+    if (options.type === 'record') {
+      setCanvasWork({
+        id: options.id,
+        title: options.title || 'Record Form',
+        type: WorkTypes.Record,
+        content_json: {
+          dataSourceId: options.dataSourceId,
+          data: options.data,
+          mode: options.mode || 'add',
+          recordId: options.recordId
+        },
+        created_on: new Date(),
+        last_modified_on: new Date()
+      });
+    } else if (options.type === 'image') {
+      setCanvasWork({
+        id: options.id,
+        title: options.title || 'Image',
+        type: WorkTypes.Image,
+        content_json: options.images,
+        created_on: new Date(),
+        last_modified_on: new Date()
+      });
+    } else if (options.type === 'text' || options.type === 'code') {
+      setCanvasWork({
+        id: options.id,
+        title: options.title || (options.type === 'text' ? 'Text' : 'Code'),
+        type: options.type === 'text' ? WorkTypes.Text : WorkTypes.Code,
+        created_on: new Date(),
+        last_modified_on: new Date()
+      });
+    } else if (options.type === 'data') {
+      setCanvasWork({
+        id: options.id,
+        title: options.title || 'Deep Research',
+        type: WorkTypes.Data,
+        content_json: options.contentJson ?? null,
+        created_on: new Date(),
+        last_modified_on: new Date()
+      });
+    } else if (options.type === 'app') {
+      setCanvasWork({
+        id: options.id,
+        title: options.title || options.contentJson?.layout?.title || 'App Preview',
+        type: WorkTypes.App,
+        content_json: options.contentJson ?? null,
+        created_on: new Date(),
+        last_modified_on: new Date()
+      });
+    } else if (options.type === 'xlsx') {
+      if (canvasWork?.id === options.id && canvasWork?.type === WorkTypes.Xlsx) {
+        setCanvasSpreadsheetCommands(options.commands ?? []);
+      } else {
+        setCanvasWork({
+          id: options.id,
+          title: options.title || 'Spreadsheet',
+          type: WorkTypes.Xlsx,
+          content_json: options.contentJson ?? null,
+          created_on: new Date(),
+          last_modified_on: new Date()
+        });
+        setCanvasSpreadsheetCommands(options.commands ?? []);
+      }
+    }
+  };
+
+  const handleCanvasVersionSelect = useCallback(async (versionId: string) => {
+    if (!canvasWork?.id) return;
+
+    setCanvasSelectedVersionId(versionId);
+    setCanvasVersionImages(null);
+
+    try {
+      const response = await apiClient.get(`/ai/works/${canvasWork.id}/versions/${versionId}`) as ApiResponse & { data: any };
+
+      if (response.success && response.data) {
+        setCanvasVersionImages(response.data.content_json);
+        setCanvasVersionContent(response.data.content_text ?? null);
+        setCanvasVersionLanguage(response.data.content_json?.language ?? response.data.content_json?.subType ?? undefined);
+
+        if (response.data.type) {
+          setCanvasWork(prev => prev ? { ...prev, type: response.data.type as WorkTypes } : prev);
+        }
+      }
+    } catch {
+      // silently ignore
+    }
+  }, [apiClient, canvasWork?.id]);
+
+  useEffect(() => {
+    const fetchVersions = async () => {
+      if (!canvasWork?.id || canvasWork.id.startsWith('record-') || canvasWork.type === WorkTypes.Data || canvasWork.type === WorkTypes.App) {
+        setCanvasVersions([]);
+        setCanvasVersionsLoading(false);
+        setCanvasSelectedVersionId(null);
+        setCanvasVersionImages(null);
+
+        return;
+      }
+
+      setCanvasVersionsLoading(true);
+
+      try {
+        const response = await apiClient.get(`/ai/works/${canvasWork.id}`) as ApiResponse & { data: any };
+
+        if (response.success && response.data?.versions?.length > 0) {
+          const sorted = [...response.data.versions].sort(
+            (a: any, b: any) => new Date(a.created_on).getTime() - new Date(b.created_on).getTime()
+          );
+          const mapped = sorted.map((v: any, i: number) => ({ id: v.id, name: `v${i + 1}` })).reverse();
+
+          setCanvasVersions(mapped);
+          setCanvasSelectedVersionId(mapped[0].id);
+          await handleCanvasVersionSelect(mapped[0].id);
+        }
+      } catch {
+        // silently ignore
+      } finally {
+        setCanvasVersionsLoading(false);
+      }
+    };
+
+    fetchVersions();
+  }, [
+    apiClient,
+    canvasWork?.id,
+    canvasWork?.type,
+    handleCanvasVersionSelect
+  ]);
+
+  // Fetch agents when selector opens
+  const tenantAiAgentId = props.mode !== 'conversation' ? props.tenantAiAgentId : undefined;
+  const inlineProps = props.mode !== 'conversation' ? props as InlineModeProps : null;
+  const agentUrl = inlineProps?.agentSelectorUrl;
+  const baseAgentUrl = inlineProps?.baseAgentSelectorUrl;
+  const hasFetchedRef = useRef(false);
+
+  useEffect(() => {
+    if (!agentSelectorOpen) return;
+    if (hasFetchedRef.current) return;
+    if (!agentUrl && !baseAgentUrl) return;
+
+    hasFetchedRef.current = true;
+
+    const fetchAgents = async () => {
+      setAgentsLoading(true);
+
+      try {
+        const deployedRes = agentUrl ? await apiClient.get(agentUrl) : { success: true, data: [] };
+        const baseRes = baseAgentUrl ? await apiClient.get(baseAgentUrl) : { success: true, data: [] };
+
+        if (deployedRes.success) {
+          const raw = Array.isArray(deployedRes.data) ? deployedRes.data : [];
+
+          setAgents(raw.map((d: any) => ({
+            id: d.deploymentId ?? d.id,
+            name: d.agentName ?? d.name,
+            avatar: d.agentAvatar?.signed_url ?? d.avatar
+          })));
+        }
+
+        if (baseRes.success) {
+          const rawBase = Array.isArray(baseRes.data) ? baseRes.data : [];
+
+          setBaseAgents(rawBase.map((d: any) => ({
+            id: d.agentId ?? d.id,
+            name: d.agentName ?? d.name,
+            avatar: d.agentAvatar?.signed_url ?? d.agentAvatar ?? d.avatar
+          })));
+        }
+      } catch {
+        // silently ignore
+      } finally {
+        setAgentsLoading(false);
+      }
+    };
+
+    fetchAgents();
+  }, [
+    agentSelectorOpen,
+    agentUrl,
+    baseAgentUrl,
+    apiClient
+  ]);
+
+  const allAgents = [...agents, ...baseAgents];
+
+  let activeAgent: any;
+
+  if (selectedAgent != null) {
+    activeAgent = selectedAgent;
+  } else if (props.deploymentId) {
+    activeAgent = agents.find(a => a.id === props.deploymentId) ?? null;
+  } else {
+    activeAgent = tenantAiAgentId ? (allAgents.find(a => a.id === tenantAiAgentId) ?? null) : null;
+  }
+  const filteredDeployedAgents = agents.filter(
+    a => !agentSearch || a.name?.toLowerCase().includes(agentSearch.toLowerCase())
+  );
+  const filteredBaseAgents = baseAgents.filter(
+    a => !agentSearch || a.name?.toLowerCase().includes(agentSearch.toLowerCase())
+  );
+  const hasAnyAgents = filteredDeployedAgents.length > 0 || filteredBaseAgents.length > 0;
+
+  /*
+   * -----------------------------------------------------------------------
+   * Conversation mode
+   * -----------------------------------------------------------------------
+   */
+
+  if (props.mode === 'conversation') {
+    const { onWorkSelect, onOpenRightSidebar, ...commonProps } = props;
+
+    const handleOpenCanvasView = (options: CanvasViewOptions) => {
+      let tempWork: Work | null = null;
+
+      if (options.type === 'image') {
+        tempWork = {
+          id: options.id || `image-${Date.now()}`,
+          title: options.title || 'Generated Image',
+          type: WorkTypes.Image,
+          content_json: options.images,
+          created_on: new Date(),
+          last_modified_on: new Date()
+        };
+      } else if (options.type === 'code') {
+        tempWork = {
+          id: options.id || `preview-${Date.now()}`,
+          title: options.title || 'Code Preview',
+          content_text: '',
+          type: WorkTypes.Code,
+          created_on: new Date(),
+          last_modified_on: new Date()
+        };
+      } else if (options.type === 'record') {
+        tempWork = {
+          id: options.id || `record-${Date.now()}`,
+          title: options.title || 'Record Form',
+          type: WorkTypes.Record,
+          content_json: {
+            dataSourceId: options.dataSourceId,
+            data: options.data,
+            mode: options.mode || 'add',
+            recordId: options.recordId
+          },
+          created_on: new Date(),
+          last_modified_on: new Date()
+        };
+      }
+
+      if (tempWork) {
+        onWorkSelect(tempWork);
+        onOpenRightSidebar();
+      }
+    };
+
+    return (
+      <ChatPanel
+        messages={commonProps.messages}
+        isLoading={commonProps.isLoading}
+        input={commonProps.input}
+        onInputChange={commonProps.onInputChange}
+        onSendMessage={commonProps.onSendMessage}
+        onStop={commonProps.onStop}
+        logo={commonProps.logo}
+        userPhoto={commonProps.userPhoto}
+        userDisplayName={commonProps.userDisplayName}
+        description={commonProps.description}
+        title={commonProps.title}
+        welcomeMessage={commonProps.welcomeMessage}
+        isLoadingAgent={commonProps.isLoadingAgent}
+        placeholder={commonProps.placeholder}
+        footerText={commonProps.footerText}
+        supportFiles={commonProps.supportFiles}
+        supportWebSearch={commonProps.supportWebSearch}
+        supportDocumentSearch={commonProps.supportDocumentSearch}
+        supportDeepResearch={commonProps.supportDeepResearch}
+        supportThinking={commonProps.supportThinking}
+        supportWorkCanvas={commonProps.supportWorkCanvas}
+        supportMultiModels={commonProps.supportMultiModels}
+        deploymentId={commonProps.deploymentId}
+        tenantAiAgentId={commonProps.tenantAiAgentId}
+        enableMicrophone={commonProps.enableMicrophone}
+        enableVoice={commonProps.enableVoice}
+        isRecording={commonProps.isRecording}
+        recognition={commonProps.recognition}
+        onMicrophoneClick={commonProps.onMicrophoneClick}
+        onToolAction={commonProps.onToolAction}
+        openCanvasView={handleOpenCanvasView}
+        threadId={commonProps.threadId}
+        messagesClassName="p-4" />
+    );
+  }
+
+  /*
+   * -----------------------------------------------------------------------
+   * Inline mode
+   * -----------------------------------------------------------------------
+   */
+
+  const {
+    open,
+    onOpenChange,
+    className,
+    enableSidebar,
+    isSidebarOpen,
+    onToggleSidebar,
+    renderSidebar,
+    activeTab = 0,
+    onTabChange,
+    onExpand,
+    onNewChat,
+    enableNavDropdown = false,
+    isFullscreen = false,
+    renderSessionsView,
+    renderProjectsView,
+    renderWorksView,
+    renderMemoriesView,
+    renderThreadHeader,
+    agentSelectorUrl,
+    baseAgentSelectorUrl,
+    onAgentChange,
+    t,
+    ...commonProps
+  } = props;
+
+  if (!open) return null;
+
+  const content = (
+    <div
+      className={cn(
+        'relative flex flex-col bg-background text-foreground border shadow-sm @container',
+        isFullscreen ? 'fixed inset-0 z-[9999] rounded-none h-screen' : 'h-full rounded-xl',
+        className
+      )}
+      data-render-mode="inline"
+      ref={ref}>
+      {/* Header */}
+      <div className="flex items-center justify-between h-12 px-3 border-b shrink-0">
+        <div className="flex items-center gap-1">
+          {enableNavDropdown && (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-8 w-8 rounded-md hover:bg-accent relative overflow-hidden group">
+                  <span
+                    className="pointer-events-none absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-violet-200/60 to-transparent group-hover:translate-x-full transition-transform duration-700 ease-in-out"
+                    aria-hidden="true" />
+                  <Sparkles className="w-4 h-4 text-brown-500 relative z-10" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start" className={cn('w-40', isFullscreen && 'z-[10000]')}>
+                <DropdownMenuItem
+                  className="cursor-pointer"
+                  onClick={() => onTabChange?.(activeTab === 1 ? 0 : 1)}>
+                  {t('tabs.sessions')}
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  className="cursor-pointer"
+                  onClick={() => onTabChange?.(activeTab === 2 ? 0 : 2)}>
+                  {t('sections.projects')}
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  className="cursor-pointer"
+                  onClick={() => onTabChange?.(activeTab === 3 ? 0 : 3)}>
+                  {t('tabs.works')}
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
+
+          {(agentSelectorUrl || baseAgentSelectorUrl) ? (
+            <DropdownMenu
+              open={agentSelectorOpen}
+              onOpenChange={(o) => {
+                setAgentSelectorOpen(o);
+                if (!o) setAgentSearch('');
+              }}>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="ghost"
+                  className="h-8 px-2 gap-1 text-sm font-medium text-foreground hover:bg-accent rounded-md max-w-[260px]">
+                  <span className="truncate">{activeAgent?.name ?? commonProps.title ?? 'Assistant'}</span>
+                  <ChevronDown className="w-3 h-3 shrink-0 text-muted-foreground" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                align="start"
+                className={cn('w-64 p-0', isFullscreen && 'z-[10000]')}
+                onCloseAutoFocus={e => e.preventDefault()}>
+                <div className="p-2 border-b">
+                  <div className="relative">
+                    <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground pointer-events-none" />
+                    <Input
+                      ref={agentSearchRef}
+                      value={agentSearch}
+                      onChange={e => setAgentSearch(e.target.value)}
+                      onKeyDown={e => e.stopPropagation()}
+                      placeholder="Search agents..."
+                      className="h-7 pl-7 text-sm"
+                      autoFocus />
+                  </div>
+                </div>
+                <ScrollArea className="max-h-56">
+                  {agentsLoading ? (
+                    <div className="flex items-center justify-center py-4">
+                      <Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : !hasAnyAgents ? (
+                    <div className="py-4 text-center text-xs text-muted-foreground">No agents found</div>
+                  ) : (
+                    <>
+                      {filteredBaseAgents.length > 0 && (
+                        <>
+                          <div className="px-3 py-1.5 text-xs font-medium text-muted-foreground">Base Agents</div>
+                          {filteredBaseAgents.map(agent => (
+                            <DropdownMenuItem
+                              key={agent.id}
+                              className="cursor-pointer gap-2 px-3 py-2"
+                              onClick={() => {
+                                setSelectedAgent(agent);
+                                setAgentSelectorOpen(false);
+                                setAgentSearch('');
+                                onAgentChange?.(agent.id, 'base');
+                              }}>
+                              {agent.avatar ? (
+                                <img src={typeof agent.avatar === 'string' ? agent.avatar : agent.avatar?.signed_url} alt="" className="w-5 h-5 rounded-full shrink-0 object-cover" />
+                              ) : (
+                                <div className="w-5 h-5 rounded-full shrink-0 bg-muted flex items-center justify-center">
+                                  <Brain className="w-3 h-3 text-muted-foreground" />
+                                </div>
+                              )}
+                              <span className="truncate text-sm">{agent.name}</span>
+                            </DropdownMenuItem>
+                          ))}
+                        </>
+                      )}
+                      {filteredDeployedAgents.length > 0 && (
+                        <>
+                          {filteredBaseAgents.length > 0 && <DropdownMenuSeparator />}
+                          <div className="px-3 py-1.5 text-xs font-medium text-muted-foreground">Deployed Agents</div>
+                          {filteredDeployedAgents.map(agent => (
+                            <DropdownMenuItem
+                              key={agent.id}
+                              className="cursor-pointer gap-2 px-3 py-2"
+                              onClick={() => {
+                                setSelectedAgent(agent);
+                                setAgentSelectorOpen(false);
+                                setAgentSearch('');
+                                onAgentChange?.(agent.id, 'deployment');
+                              }}>
+                              {agent.avatar ? (
+                                <img src={typeof agent.avatar === 'string' ? agent.avatar : agent.avatar?.signed_url} alt="" className="w-5 h-5 rounded-full shrink-0 object-cover" />
+                              ) : (
+                                <div className="w-5 h-5 rounded-full shrink-0 bg-muted flex items-center justify-center">
+                                  <Brain className="w-3 h-3 text-muted-foreground" />
+                                </div>
+                              )}
+                              <span className="truncate text-sm">{agent.name}</span>
+                            </DropdownMenuItem>
+                          ))}
+                        </>
+                      )}
+                    </>
+                  )}
+                </ScrollArea>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          ) : (
+            <span className="text-sm font-medium text-foreground">{commonProps.title || 'Assistant'}</span>
+          )}
+        </div>
+        <div className="flex items-center gap-1">
+          {enableNavDropdown && onNewChat && (
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8 text-muted-foreground hover:bg-accent hover:text-accent-foreground rounded-md"
+              onClick={onNewChat}
+              title={t('buttons.start_new_thread')}>
+              <Edit className="w-4 h-4" />
+            </Button>
+          )}
+          {onExpand && (
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8 text-muted-foreground hover:bg-accent hover:text-accent-foreground rounded-md"
+              onClick={onExpand}
+              title={isFullscreen ? t('actions.minimize') : t('actions.expand_fullscreen')}>
+              {isFullscreen ? <Minimize2 className="w-4 h-4" /> : <Maximize2 className="w-4 h-4" />}
+            </Button>
+          )}
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-8 w-8 text-muted-foreground hover:bg-accent hover:text-accent-foreground rounded-md"
+            onClick={() => onOpenChange(false)}
+            title={t('common.close')}>
+            <X className="w-4 h-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Main Content Area + Canvas Panel (side-by-side) */}
+      <div className="flex-1 flex flex-row min-h-0 overflow-hidden relative">
+
+        {/* Floating Buttons — visible only when sidebar is closed */}
+        {!isSidebarOpen && (
+          <div className="absolute top-2 left-2 z-40 flex flex-col gap-1">
+            {enableSidebar && onToggleSidebar && (
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={onToggleSidebar}
+                className="h-8 w-8 text-muted-foreground hover:bg-accent hover:text-accent-foreground rounded-md shadow-sm"
+                title={t('tabs.sessions')}>
+                <PanelLeft className="w-4 h-4" />
+              </Button>
+            )}
+            {onTabChange && (
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => onTabChange(activeTab === 4 ? 0 : 4)}
+                className={cn(
+                  'h-8 w-8 text-muted-foreground hover:bg-accent hover:text-accent-foreground rounded-md shadow-sm',
+                  activeTab === 4 && 'bg-background text-foreground shadow'
+                )}
+                title={t('tabs.memories')}>
+                <Brain className="w-4 h-4" />
+              </Button>
+            )}
+            {isFullscreen && onNewChat && (
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={onNewChat}
+                className="h-8 w-8 text-muted-foreground hover:bg-accent hover:text-accent-foreground rounded-md shadow-sm"
+                title={t('buttons.start_new_thread')}>
+                <Edit className="w-4 h-4" />
+              </Button>
+            )}
+          </div>
+        )}
+
+        {/* Floating Sidebar — narrow screens only */}
+        {enableSidebar && isSidebarOpen && renderSidebar && (
+          <>
+            {/* Background Mask */}
+            <div
+              className="absolute inset-0 bg-black/20 z-[99] @3xl:hidden"
+              onClick={onToggleSidebar} />
+
+            {/* Sidebar Panel */}
+            <div className="absolute left-0 top-0 h-full w-72 bg-background z-[100] shadow-xl border-r @3xl:hidden">
+              <div className="w-full h-full flex flex-col">
+                {/* Sidebar Header */}
+                <div className="flex items-center justify-between h-12 px-3 border-b shrink-0">
+                  {commonProps.logo || commonProps.title ? (
+                    <div className="flex items-center gap-2 min-w-0">
+                      <Avatar className="h-7 w-7 shrink-0 after:hidden">
+                        <AvatarImage src={commonProps.logo} alt={commonProps.title} />
+                        <AvatarFallback className="text-xs">
+                          {(commonProps.title || 'AI').substring(0, 2).toUpperCase()}
+                        </AvatarFallback>
+                      </Avatar>
+                      <span className="text-sm font-medium truncate">{commonProps.title}</span>
+                    </div>
+                  ) : <div />}
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={onToggleSidebar}
+                    className="h-8 w-8 shrink-0 text-muted-foreground hover:text-foreground">
+                    <X className="w-4 h-4" />
+                  </Button>
+                </div>
+                {/* Sidebar Content */}
+                <div className="flex-1 p-4 flex flex-col min-h-0 overflow-hidden">
+                  {renderSidebar()}
+                </div>
+              </div>
+            </div>
+          </>
+        )}
+
+        {/* Inline Sidebar — wide screens only */}
+        {enableSidebar && renderSidebar && (
+          <div
+            className={cn(
+              'hidden @3xl:flex flex-col flex-none bg-background border-r transition-all duration-300 overflow-hidden',
+              isSidebarOpen ? 'w-72' : 'w-0'
+            )}>
+            <div className="w-72 h-full flex flex-col relative">
+              {/* Top-right controls inside sidebar when open */}
+              {isSidebarOpen && (
+                <div className="absolute top-2 right-2 z-10 flex flex-col gap-1">
+                  {onToggleSidebar && (
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={onToggleSidebar}
+                      className="h-8 w-8 text-muted-foreground hover:bg-accent hover:text-accent-foreground rounded-md">
+                      <PanelLeft className="w-4 h-4" />
+                    </Button>
+                  )}
+                  {onTabChange && (
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={() => onTabChange(activeTab === 4 ? 0 : 4)}
+                      className={cn(
+                        'h-8 w-8 text-muted-foreground hover:bg-accent hover:text-accent-foreground rounded-md',
+                        activeTab === 4 && 'bg-accent text-accent-foreground'
+                      )}
+                      title={t('tabs.memories')}>
+                      <Brain className="w-4 h-4" />
+                    </Button>
+                  )}
+                </div>
+              )}
+              <div className="flex-1 p-4 flex flex-col min-h-0 overflow-hidden">
+                {renderSidebar()}
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Chat */}
+        <div className={cn(
+          'flex flex-col min-h-0 overflow-hidden transition-all duration-200',
+          canvasWork ? 'w-2/5' : 'flex-1',
+          !isSidebarOpen && enableSidebar && 'pl-10'
+        )}>
+          {activeTab === 1 ? (
+          // Sessions View
+            <div className="flex flex-col flex-1 min-h-0 overflow-hidden">
+              <div className="flex items-center gap-1 px-3 h-10 shrink-0">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7 text-muted-foreground hover:text-foreground"
+                  onClick={() => onTabChange?.(0)}>
+                  <ArrowLeft className="w-4 h-4" />
+                </Button>
+              </div>
+              {renderSessionsView ? (
+                renderSessionsView()
+              ) : (
+                <div className="flex-1 flex items-center justify-center text-muted-foreground">
+                  Sessions view not available
+                </div>
+              )}
+            </div>
+          ) : activeTab === 2 ? (
+          // Projects View
+            <div className="flex flex-col flex-1 min-h-0 overflow-hidden">
+              <div className="flex items-center gap-1 px-3 h-10 shrink-0">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7 text-muted-foreground hover:text-foreground"
+                  onClick={() => onTabChange?.(0)}>
+                  <ArrowLeft className="w-4 h-4" />
+                </Button>
+              </div>
+              {renderProjectsView ? (
+                renderProjectsView()
+              ) : (
+                <div className="flex-1 flex items-center justify-center text-muted-foreground">
+                  Projects view not available
+                </div>
+              )}
+            </div>
+          ) : activeTab === 4 ? (
+          // Memories View
+            <div className="flex flex-col flex-1 min-h-0 overflow-hidden">
+              <div className="flex items-center gap-1 px-3 h-10 shrink-0">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7 text-muted-foreground hover:text-foreground"
+                  onClick={() => onTabChange?.(0)}>
+                  <ArrowLeft className="w-4 h-4" />
+                </Button>
+              </div>
+              {renderMemoriesView ? (
+                renderMemoriesView()
+              ) : (
+                <div className="flex-1 flex items-center justify-center text-muted-foreground">
+                  Memories view not available
+                </div>
+              )}
+            </div>
+          ) : activeTab === 3 ? (
+          // Works View
+            <div className="flex flex-col flex-1 min-h-0 overflow-hidden">
+              <div className="flex items-center gap-1 px-3 h-10 shrink-0">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7 text-muted-foreground hover:text-foreground"
+                  onClick={() => onTabChange?.(0)}>
+                  <ArrowLeft className="w-4 h-4" />
+                </Button>
+              </div>
+              {renderWorksView ? (
+                renderWorksView()
+              ) : (
+                <div className="flex-1 flex items-center justify-center text-muted-foreground">
+                  Works view not available
+                </div>
+              )}
+            </div>
+          ) : (
+          // Default: Chat View
+            <ChatPanel
+              messages={commonProps.messages}
+              isLoading={commonProps.isLoading}
+              input={commonProps.input}
+              onInputChange={commonProps.onInputChange}
+              onSendMessage={commonProps.onSendMessage}
+              onStop={commonProps.onStop}
+              logo={commonProps.logo}
+              userPhoto={commonProps.userPhoto}
+              userDisplayName={commonProps.userDisplayName}
+              description={commonProps.description}
+              title={commonProps.title}
+              welcomeMessage={commonProps.welcomeMessage}
+              isLoadingAgent={commonProps.isLoadingAgent}
+              placeholder={commonProps.placeholder}
+              footerText={commonProps.footerText}
+              supportFiles={commonProps.supportFiles}
+              supportWebSearch={commonProps.supportWebSearch}
+              supportDocumentSearch={commonProps.supportDocumentSearch}
+              supportDeepResearch={commonProps.supportDeepResearch}
+              supportThinking={commonProps.supportThinking}
+              supportWorkCanvas={commonProps.supportWorkCanvas}
+              supportMultiModels={commonProps.supportMultiModels}
+              deploymentId={commonProps.deploymentId}
+              tenantAiAgentId={commonProps.tenantAiAgentId}
+              enableMicrophone={commonProps.enableMicrophone}
+              enableVoice={commonProps.enableVoice}
+              isRecording={commonProps.isRecording}
+              recognition={commonProps.recognition}
+              onMicrophoneClick={commonProps.onMicrophoneClick}
+              onToolAction={commonProps.onToolAction}
+              openCanvasView={handleOpenCanvasViewInline}
+              renderThreadHeader={renderThreadHeader}
+              threadId={commonProps.threadId}
+              compactToolbar={!isFullscreen} />
+          )}
+        </div>
+
+        {/* Canvas Panel */}
+        {canvasWork && (
+          <div className="w-3/5 border-l bg-background flex flex-col shrink-0">
+            <div className="flex items-center gap-2 h-12 px-3 border-b shrink-0">
+              <span className="text-sm font-medium truncate flex-1">{canvasWork.title}</span>
+              {canvasWork.type === WorkTypes.Code && (
+                <div className="flex items-center gap-0.5 bg-muted rounded-md p-0.5 shrink-0">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className={cn(
+                      'h-6 px-2 text-xs rounded-sm',
+                      activeCanvasTab === 0 ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground'
+                    )}
+                    onClick={() => setActiveCanvasTab(0)}>
+                    <Eye className="w-3 h-3 mr-1" />
+                    Preview
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className={cn(
+                      'h-6 px-2 text-xs rounded-sm',
+                      activeCanvasTab === 1 ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground'
+                    )}
+                    onClick={() => setActiveCanvasTab(1)}>
+                    <Code2 className="w-3 h-3 mr-1" />
+                    Code
+                  </Button>
+                </div>
+              )}
+              {canvasWork.type !== WorkTypes.Record && canvasWork.type !== WorkTypes.Data && canvasWork.type !== WorkTypes.App && (
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="outline" size="sm" className="h-7 text-xs px-2 shrink-0" disabled={canvasVersionsLoading}>
+                      {canvasVersionsLoading ? '...' : (canvasVersions.find(v => v.id === canvasSelectedVersionId)?.name ?? t('labels.select_version'))}
+                      <ChevronDown className="ml-1 h-3 w-3" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end" className="max-h-60 overflow-y-auto">
+                    {canvasVersions.length === 0 ? (
+                      <DropdownMenuItem disabled className="text-xs text-muted-foreground">
+                        {t('messages.no_versions_found')}
+                      </DropdownMenuItem>
+                    ) : (
+                      canvasVersions.map(v => (
+                        <DropdownMenuItem
+                          key={v.id}
+                          className={`cursor-pointer text-xs ${canvasSelectedVersionId === v.id ? 'bg-accent text-accent-foreground' : ''}`}
+                          onClick={() => handleCanvasVersionSelect(v.id)}>
+                          {v.name}
+                        </DropdownMenuItem>
+                      ))
+                    )}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              )}
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => setCanvasWork(null)}
+                className="h-8 w-8 shrink-0 text-muted-foreground hover:text-foreground">
+                <X className="w-4 h-4" />
+              </Button>
+            </div>
+            <div className="flex-1 overflow-y-auto">
+              {canvasVersionsLoading && (
+                <div className="flex h-full items-center justify-center">
+                  <Loader2 className="size-5 animate-spin text-muted-foreground" />
+                </div>
+              )}
+              {!canvasVersionsLoading && canvasWork.type === WorkTypes.Record && (
+                <CanvasRecordView
+                  dataSourceId={canvasWork.content_json?.dataSourceId ?? ''}
+                  mode={canvasWork.content_json?.mode ?? 'add'}
+                  defaultValues={canvasWork.content_json?.data}
+                  recordId={canvasWork.content_json?.recordId}
+                  onClose={() => setCanvasWork(null)}
+                  onSave={(id, data) => {
+                    console.info('[CanvasRecordView] saved:', id, data);
+                  }} />
+              )}
+              {!canvasVersionsLoading && canvasWork.type === WorkTypes.Image && (
+                <CanvasImageView
+                  title={canvasWork.title}
+                  images={canvasVersionImages ?? canvasWork.content_json} />
+              )}
+              {!canvasVersionsLoading && canvasWork.type === WorkTypes.Text && (
+                <CanvasTextView
+                  contentText={canvasVersionContent ?? ''}
+                  language={(canvasVersionLanguage as any) ?? 'markdown'}
+                  title={canvasWork.title} />
+              )}
+              {!canvasVersionsLoading && canvasWork.type === WorkTypes.Data && (
+                <CanvasDeepResearchView
+                  title={canvasWork.title}
+                  output_schema={canvasWork.content_json?.output_schema}
+                  content={canvasWork.content_json?.content}
+                  basis={canvasWork.content_json?.basis} />
+              )}
+              {!canvasVersionsLoading && canvasWork.type === WorkTypes.Xlsx && (
+                canvasSelectedVersionId && !canvasVersionImages ? (
+                  <div className="flex h-full items-center justify-center">
+                    <Loader2 className="size-5 animate-spin text-muted-foreground" />
+                  </div>
+                ) : (
+                  <CanvasSpreadsheetView
+                    key={canvasSelectedVersionId ?? canvasWork.id}
+                    title={canvasWork.title}
+                    content={canvasVersionImages ?? canvasWork.content_json}
+                    workId={canvasWork.id}
+                    versionId={canvasSelectedVersionId ?? undefined}
+                    commands={canvasSpreadsheetCommands}
+                    onData={async (data) => {
+                      const workId = canvasWork.id;
+
+                      if (!workId || workId === 'streaming') return;
+
+                      try {
+                        await apiClient.post(`/ai/works/${workId}/modify`, {
+                          content_json: {
+                            ...(canvasWork.content_json ?? {}),
+                            workbook: data.workbook
+                          }
+                        });
+                      } catch {
+                        console.warn("Version didn't save succesfully.");
+                      }
+                    }} />
+                )
+              )}
+              {!canvasVersionsLoading && canvasWork.type === WorkTypes.App && (
+                <CanvasAppView app={canvasWork.content_json} />
+              )}
+              {!canvasVersionsLoading && canvasWork.type === WorkTypes.Code && canvasWork.id && (
+                activeCanvasTab === 0 ? (
+                  <ShellCanvas
+                    workId={canvasWork.id}
+                    versionId={canvasSelectedVersionId}
+                    title={canvasWork.title} />
+                ) : (
+                  <CanvasCodeView
+                    contentText={canvasVersionContent ?? ''}
+                    language={canvasVersionLanguage as any}
+                    title={canvasWork.title} />
+                )
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+
+  if (isFullscreen && typeof document !== 'undefined') {
+    return createPortal(content, document.body);
+  }
+
+  return content;
+};
+
+AssistantView.displayName = 'AssistantView';
+
+export type InlineViewProps = Omit<InlineModeProps, 'mode'>;
+export type ConversationViewProps = Omit<ConversationModeProps, 'mode'>;
+
+export const InlineView = ({ ref, ...props }: InlineViewProps & { ref?: Ref<HTMLDivElement | null> }) => <AssistantView mode="inline" {...props} ref={ref} />;
+
+InlineView.displayName = 'InlineView';
+
+export const ConversationView: FC<ConversationViewProps> = props => (
+  <AssistantView mode="conversation" {...props} />
+);
+
+ConversationView.displayName = 'ConversationView';