@docyrus/ui-pro-ai-assistant 0.0.2 → 0.0.5

package/src/docy-assistant.tsx

@@ -1,1962 +0,0 @@
-'use client';
-
-import {
-  useCallback, useEffect, useMemo, useRef, useState, type ChangeEvent, type FormEvent, type KeyboardEvent, type Ref, type RefObject
-} from 'react';
-
-import { useChat } from '@ai-sdk/react';
-import { Button } from '@docyrus/ui-pro-shared/components/button';
-import { toast } from 'sonner';
-import {
-  Dialog, DialogContent, DialogTitle
-} from '@docyrus/ui-pro-shared/components/dialog';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger
-} from '@docyrus/ui-pro-shared/components/dropdown-menu';
-import { Textarea } from '@docyrus/ui-pro-shared/components/textarea';
-import { Input } from '@docyrus/ui-pro-shared/components/input';
-import {
-  Tabs, TabsContent, TabsList, TabsTrigger
-} from '@docyrus/ui-pro-shared/components/tabs';
-import { cn } from '@docyrus/ui-pro-shared/lib/utils';
-import {
-  DefaultChatTransport,
-  type FinishReason,
-  lastAssistantMessageIsCompleteWithToolCalls,
-  type UIMessage
-} from 'ai';
-import {
-  Archive,
-  ArrowLeft,
-  ArrowRight,
-  Edit,
-  FolderInput,
-  Maximize2,
-  Minimize2,
-  MoreHorizontal,
-  PanelLeft,
-  Plus,
-  Search,
-  Trash,
-  X
-} from 'lucide-react';
-
-import { AssistantDialogs } from './components/assistant-dialogs';
-import { WorkCard } from './components/work-card';
-import {
-  useAssistantApi, useProjectState, useSessionState, useSpeechRecognition, useUIState, useWorksState
-} from './hooks';
-import { AssistantCanvasView } from './views/canvas';
-import { ConversationView, InlineView } from './views/assistant-view';
-import { MemoriesPanel } from './views/memories-panel';
-import { AssistantProjectDetailView } from './views/project-detail';
-import { AssistantProjectsPanel } from './views/projects-panel';
-import { SessionsListView } from './views/sessions-list';
-import { SidebarContent } from './views/sidebar-content';
-import { AssistantWorkDetailView } from './views/work-detail';
-import { useAssistantTranslation } from './i18n';
-import { useApiClient } from './lib/api-client';
-import {
-  createThread,
-  deleteProject as deleteProjectApi,
-  deleteSession as deleteSessionApi,
-  fetchAgentThreads,
-  fetchProjectThreads as fetchProjectThreadsApi,
-  fetchProjects as fetchProjectsApi,
-  fetchProjectWorks as fetchProjectWorksApi,
-  fetchWorks as fetchWorksApi,
-  loadThreadMessages as loadThreadMessagesApi,
-  updateProject as updateProjectApi,
-  updateProjectInstructions as updateProjectInstructionsApi,
-  updateSession as updateSessionApi,
-  uploadThreadFile
-} from './lib/assistant-api-actions';
-import { useAssistantConfig } from './lib/assistant-config';
-import { getContainerClassName, getDialogClassName } from './lib/class-utils';
-
-import {
-  type AssistantSession,
-  type DocyAssistantProps,
-  type Project,
-  type Work
-} from './types';
-
-interface ThreadHeaderInlineProps {
-  session: AssistantSession;
-  projects: Project[];
-  projectContext: { id: string; name: string } | null;
-  onSaveTitle: (newTitle: string) => Promise<void>;
-  onDelete: () => void;
-  onArchive: () => Promise<void>;
-  onMoveToProject: (projectId: string) => Promise<void>;
-  onProjectContextClick?: () => void;
-  isFullscreen?: boolean;
-  t: (key: string) => string;
-}
-
-function ThreadHeaderInline({
-  session,
-  projects,
-  projectContext,
-  onSaveTitle,
-  onDelete,
-  onArchive,
-  onMoveToProject,
-  onProjectContextClick,
-  isFullscreen = false,
-  t
-}: ThreadHeaderInlineProps) {
-  const dropdownZClass = isFullscreen ? 'z-[10000]' : '';
-  const [editValue, setEditValue] = useState<string | null>(null);
-
-  const handleBlur = async () => {
-    if (editValue === null) return;
-    const trimmed = editValue.trim();
-
-    if (trimmed && trimmed !== session.title) {
-      await onSaveTitle(trimmed);
-    }
-
-    setEditValue(null);
-  };
-
-  const handleKeyDown = async (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') {
-      e.currentTarget.blur();
-    } else if (e.key === 'Escape') {
-      setEditValue(null);
-    }
-  };
-
-  return (
-    <div className="flex-none h-10 flex bg-background items-center justify-between border-b border-x border-border px-3 mx-3 rounded-b-md  shrink-0">
-      <div className="flex items-center gap-2 min-w-0 flex-1">
-        {projectContext?.id && onProjectContextClick && (
-          <Button
-            variant="ghost"
-            onClick={onProjectContextClick}
-            className="inline-flex items-center gap-1 px-2 py-0.5 h-auto rounded-full bg-sky-100 text-sky-700 dark:bg-sky-900/40 dark:text-sky-300 text-xs font-medium flex-none hover:bg-sky-200 transition-colors">
-            {projectContext.name}
-          </Button>
-        )}
-        {editValue !== null ? (
-          <input
-            autoFocus
-            value={editValue}
-            onChange={e => setEditValue(e.target.value)}
-            onBlur={handleBlur}
-            onKeyDown={handleKeyDown}
-            className="text-sm font-medium text-foreground bg-transparent border-b border-border focus:outline-none min-w-0 flex-1" />
-        ) : (
-          <div className="group/title flex items-center gap-1 min-w-0">
-            <span className="text-sm font-medium text-foreground truncate min-w-0">
-              {session.title || t('common.untitled')}
-            </span>
-            <Button
-              variant="ghost"
-              size="icon"
-              onClick={() => setEditValue(session.title || '')}
-              className="opacity-0 group-hover/title:opacity-100 transition-opacity shrink-0 h-5 w-5 text-muted-foreground hover:text-foreground">
-              <Edit className="w-3.5 h-3.5" />
-            </Button>
-          </div>
-        )}
-      </div>
-      <div className="flex items-center flex-none">
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" size="icon" className="h-7 w-7 text-muted-foreground hover:text-foreground">
-              <MoreHorizontal className="w-4 h-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className={cn('w-48', dropdownZClass)}>
-            <DropdownMenuSub>
-              <DropdownMenuSubTrigger className="cursor-pointer">
-                <FolderInput className="w-4 h-4 mr-2" />
-                {t('actions.move_to_project')}
-              </DropdownMenuSubTrigger>
-              <DropdownMenuSubContent className={cn('w-48', dropdownZClass)}>
-                {projects.length === 0 ? (
-                  <DropdownMenuItem disabled className="text-muted-foreground text-xs">
-                    {t('messages.no_projects_yet')}
-                  </DropdownMenuItem>
-                ) : (
-                  projects.map(project => (
-                    <DropdownMenuItem
-                      key={project.id}
-                      className="cursor-pointer"
-                      onClick={() => onMoveToProject(project.id)}>
-                      {project.name}
-                    </DropdownMenuItem>
-                  ))
-                )}
-              </DropdownMenuSubContent>
-            </DropdownMenuSub>
-            <DropdownMenuItem
-              className="cursor-pointer"
-              onClick={onArchive}>
-              <Archive className="w-4 h-4 mr-2" />
-              {t('actions.archive')}
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem
-              className="text-destructive focus:text-destructive cursor-pointer"
-              onClick={onDelete}>
-              <Trash className="w-4 h-4 mr-2" />
-              {t('common.delete')}
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-    </div>
-  );
-}
-
-function dataUrlToFile(dataUrl: string, filename: string): File {
-  const arr = dataUrl.split(',');
-  const mime = arr[0].match(/:(.*?);/)?.[1] || 'application/octet-stream';
-  const bstr = atob(arr[1]);
-  let n = bstr.length;
-  const u8arr = new Uint8Array(n);
-
-  while (n--) {
-    u8arr[n] = bstr.charCodeAt(n);
-  }
-
-  return new File([u8arr], filename, { type: mime });
-}
-
-export const DocyAssistant = (
-  {
-    ref, open, onOpenChange, supportWebSearch = false, supportThinking = false, supportFiles = false, supportDocumentSearch = false, supportDeepResearch = false, supportMultiModels = false, supportWorkCanvas = false, apiEndpoint = '/ai/agents/:agentId/chat', title: titleProp, description: descriptionProp, placeholder: placeholderProp, logo, footerText: footerTextProp, variant = 'default', renderMode = 'modal', enableSidebar = true, enableNavDropdown = false, enableVoice = false, enableMicrophone = true, tenantAiAgentId, deploymentId, onMessageSend, onVoiceStart, onVoiceEnd, className, defaultFullscreen = false, hideExpand = false, agentSelectorUrl, baseAgentSelectorUrl, onAgentChange, ...props
-  }: DocyAssistantProps & { ref?: RefObject<HTMLDivElement | null> }
-) => {
-  const config = useAssistantConfig();
-  const { apiBaseUrl: baseUrl, getAuthToken, user: configUser } = config;
-  const apiClient = useApiClient();
-  const { t } = useAssistantTranslation();
-
-  // Localized default values
-  const title = titleProp || 'DocyAssistant';
-  const description = descriptionProp || t('descriptions.default');
-  const placeholder = placeholderProp || t('placeholders.type_message');
-  const footerText = footerTextProp || t('descriptions.footer_default');
-
-  // Custom hooks for grouped state management
-  const { state: uiState, actions: uiActions } = useUIState(variant, renderMode);
-  const { state: sessionState, actions: sessionActions } = useSessionState();
-  const { state: projectState, actions: projectActions } = useProjectState();
-  const { state: worksState, actions: worksActions } = useWorksState();
-
-  // Remaining local state
-  const [input, setInput] = useState('');
-  const currentUserId = configUser?.id || null;
-  const [projectSearchQuery, setProjectSearchQuery] = useState('');
-  const [isInlineFullscreen, setIsInlineFullscreen] = useState(defaultFullscreen);
-
-  // Speech recognition hook
-  const { isRecording, recognition, handleMicrophoneClick } = useSpeechRecognition({
-    enabled: enableMicrophone,
-    onTranscript: transcript => setInput(prev => prev + (prev ? ' ' : '') + transcript),
-    onStart: onVoiceStart,
-    onEnd: onVoiceEnd
-  });
-
-  // Refs
-  const selectedSessionIdRef = useRef<string | null>(null);
-  const sidebarCloseTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const rightSidebarCloseTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const authTokenRef = useRef<string>('');
-  const messageOptionsRef = useRef<any>(null);
-
-  // Keep refs in sync with state
-  useEffect(() => {
-    selectedSessionIdRef.current = sessionState.selectedSessionId;
-  }, [sessionState.selectedSessionId]);
-
-  // Get and maintain auth token in ref
-  useEffect(() => {
-    getAuthToken().then((token: string) => {
-      if (token) {
-        authTokenRef.current = token;
-      }
-    });
-  }, [getAuthToken]);
-
-  // Create transport with headers and body using functions for dynamic values
-  const transport = useMemo(() => {
-    // Build URL from apiEndpoint template, replacing :agentId and optionally adding deployment
-    const endpointPath = apiEndpoint.replace(':agentId', tenantAiAgentId);
-    const apiUrl = deploymentId ? `${baseUrl}${endpointPath.replace('/chat', `/deployments/${deploymentId}/chat`)}` : `${baseUrl}${endpointPath}`;
-
-    return new DefaultChatTransport({
-      api: apiUrl,
-      prepareSendMessagesRequest: ({ messages, body }: { messages: any[]; body: any }) => {
-        const options = messageOptionsRef.current;
-
-        return {
-          body: {
-            ...body,
-            agentId: tenantAiAgentId,
-            threadId: selectedSessionIdRef.current, // Use ref for immediate access
-            messages: messages.slice(-10), // Only send last 10 messages
-            modelId: options?.modelId,
-            supportMultipleModels: options?.supportMultipleModels,
-            supportFiles: options?.supportFiles,
-            supportWebSearch: options?.supportWebSearch,
-            supportDeepResearch: options?.supportDeepResearch,
-            supportDocumentSearch: options?.supportDocumentSearch,
-            supportThinking: options?.supportThinking,
-            supportWorkCanvas: options?.supportWorkCanvas,
-            ...(options?.filePaths?.length ? { files: options.filePaths } : {})
-          }
-        };
-      },
-      headers: () => {
-        const token = authTokenRef.current;
-
-        return {
-          'Content-Type': 'application/json',
-          ...(token && { Authorization: `Bearer ${token}` })
-        };
-      },
-      body: () => ({
-        agentId: tenantAiAgentId,
-        threadId: selectedSessionIdRef.current
-      })
-    });
-  }, [
-    baseUrl,
-    apiEndpoint,
-    tenantAiAgentId,
-    deploymentId
-  ]);
-
-  // Use the AI SDK's useChat hook with agent-specific endpoint
-  const {
-    messages = [],
-    status,
-    sendMessage,
-    setMessages,
-    stop,
-    addToolOutput
-  } = useChat({
-    id: `docy-assistant:${tenantAiAgentId}`,
-    transport,
-    sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithToolCalls,
-    onFinish: (
-      message: UIMessage,
-      options?: {
-        usage?: {
-          inputTokens?: number;
-          outputTokens?: number;
-          totalTokens?: number;
-          cacheReadTokens?: number;
-          cacheWriteTokens?: number;
-        };
-        finishReason?: FinishReason;
-      }
-    ) => {
-      const { usage, finishReason } = options || {};
-
-      if (typeof process !== 'undefined' && process.env.NODE_ENV === 'development') {
-        console.info('[AI] Message finished:', {
-          messageId: message.id,
-          role: message.role,
-          finishReason,
-          inputTokens: usage?.inputTokens,
-          outputTokens: usage?.outputTokens,
-          totalTokens: usage?.totalTokens,
-          cacheReadTokens: usage?.cacheReadTokens,
-          cacheWriteTokens: usage?.cacheWriteTokens
-        });
-      }
-    },
-    onError: (error: Error) => {
-      console.error('[AI] Chat error:', error);
-    }
-  } as any);
-
-  // AI SDK v6 status handling
-  const isStreaming = status === 'streaming';
-  const isSubmitting = status === 'submitted';
-  const isLoading = isStreaming || isSubmitting;
-
-  const handleToolAction = useCallback((event: {
-    tool: string;
-    toolCallId: string;
-    decision: string;
-    input: any;
-  }) => {
-    switch (event.decision) {
-      case 'approve':
-
-      case 'continue':
-        addToolOutput({
-          tool: event.tool as any,
-          toolCallId: event.toolCallId,
-          output: { action: event.decision }
-        });
-        break;
-
-      case 'submit':
-        addToolOutput({
-          tool: event.tool as any,
-          toolCallId: event.toolCallId,
-          output: event.input
-        });
-        break;
-
-      default:
-        addToolOutput({
-          tool: event.tool as any,
-          toolCallId: event.toolCallId,
-          output: { decision: event.decision }
-        });
-    }
-  }, [addToolOutput]);
-
-  // Compute user display info from config
-  const userDisplayName = configUser ? `${configUser.firstname || ''} ${configUser.lastname || ''}`.trim() || configUser.email?.split('@')[0] || 'User' : 'User';
-  const userPhoto = configUser?.photo || '';
-
-  // Computed values from state
-  const isInlineMode = uiState.currentRenderMode === 'inline';
-
-  // Auto-open create view when no projects
-  useEffect(() => {
-    if (
-      uiState.activeTab === 2
-      && projectState.projectsLoaded
-      && projectState.projects.length === 0
-      && projectState.view === 'list'
-    ) {
-      projectActions.setView('create');
-    }
-  }, [
-    uiState.activeTab,
-    projectState.projectsLoaded,
-    projectState.projects.length,
-    projectState.view,
-    projectActions
-  ]);
-
-  /*
-   * Fetch agent details with request deduplication
-   * Uses module-level cache to prevent multiple requests across component instances
-   */
-  const apiClientRef = useRef(apiClient);
-
-  apiClientRef.current = apiClient;
-
-  // Use the assistant API hook for agent details
-  const { agentDetails, isLoadingAgentDetails } = useAssistantApi({
-    tenantAiAgentId,
-    deploymentId,
-    logo,
-    title,
-    t
-  });
-
-  const fetchThreads = useCallback(async () => {
-    await fetchAgentThreads(apiClient, tenantAiAgentId, sessionActions.setSessions, currentUserId, deploymentId);
-  }, [
-    apiClient,
-    tenantAiAgentId,
-    sessionActions,
-    currentUserId,
-    deploymentId
-  ]);
-
-  const fetchProjectThreads = useCallback(async (projectId: string) => {
-    await fetchProjectThreadsApi(apiClient, projectId, projectActions.setProjectThreads);
-  }, [apiClient, projectActions]);
-
-  const fetchProjectWorks = useCallback(async (projectId: string) => {
-    await fetchProjectWorksApi(apiClient, projectId, projectActions.setProjectWorks, tenantAiAgentId, currentUserId);
-  }, [
-    apiClient,
-    projectActions,
-    tenantAiAgentId,
-    currentUserId
-  ]);
-
-  const fetchProjects = useCallback(async () => {
-    await fetchProjectsApi(
-      apiClient,
-      configUser?.id || null,
-      projectActions.setProjects,
-      (project) => {
-        fetchProjectThreads(project.id);
-        fetchProjectWorks(project.id);
-      },
-      () => projectActions.setProjectsLoaded(true),
-      tenantAiAgentId
-    );
-  }, [
-    apiClient,
-    configUser?.id,
-    projectActions,
-    fetchProjectThreads,
-    fetchProjectWorks,
-    tenantAiAgentId
-  ]);
-
-  const fetchWorks = useCallback(async () => {
-    await fetchWorksApi(apiClient, worksActions.setWorks, tenantAiAgentId, currentUserId);
-  }, [
-    apiClient,
-    worksActions,
-    tenantAiAgentId,
-    currentUserId
-  ]);
-
-  // Fetch threads from API
-  useEffect(() => {
-    if (open && (enableSidebar || enableNavDropdown)) {
-      fetchThreads();
-    }
-  }, [
-    open,
-    enableSidebar,
-    enableNavDropdown,
-    fetchThreads
-  ]);
-
-  // Fetch projects when projects tab is active
-  useEffect(() => {
-    if (open && (enableSidebar || enableNavDropdown) && uiState.activeTab === 3) {
-      fetchWorks();
-    } else if (open && (enableSidebar || enableNavDropdown)) {
-      projectActions.setProjectsLoaded(false);
-      fetchProjects();
-    }
-  }, [
-    open,
-    enableSidebar,
-    enableNavDropdown,
-    uiState.activeTab,
-    projectActions,
-    fetchProjects,
-    fetchWorks
-  ]);
-
-  // Fetch works when right sidebar opens
-  useEffect(() => {
-    if (open && uiState.isRightSidebarOpen) {
-      fetchWorks();
-    }
-  }, [open, uiState.isRightSidebarOpen, fetchWorks]);
-
-  const updateProject = async () => {
-    await updateProjectApi(apiClient, projectState, projectActions, fetchProjects, t);
-  };
-
-  const deleteProject = async () => {
-    await deleteProjectApi(apiClient, projectState, projectActions, fetchProjects, t);
-  };
-
-  const loadThreadMessages = async (threadId: string) => {
-    await loadThreadMessagesApi(apiClient, threadId, setMessages);
-  };
-
-  const handleSessionClick = async (session: AssistantSession) => {
-    sessionActions.selectSessionId(session.id);
-    sessionActions.selectSession(session);
-    uiActions.setActiveTab(0); // Switch to Home tab when a session is clicked
-    await loadThreadMessages(session.id);
-  };
-
-  const createNewThread = () => {
-    sessionActions.selectSessionId(null);
-    sessionActions.selectSession(null);
-    uiActions.setActiveTab(0); // Switch to Home tab when creating a new thread
-    setMessages([]); // Clear messages for new thread
-  };
-
-  const handleSendMessage = async (e?: FormEvent, options?: any) => {
-    e?.preventDefault();
-    if (!input.trim()) return;
-
-    // Store options in ref for access in prepareSendMessagesRequest
-    messageOptionsRef.current = options;
-
-    const messageText = input.trim();
-    let currentThreadId = selectedSessionIdRef.current;
-
-    // If no thread ID exists, create a new one
-    if (!currentThreadId) {
-      const subject = messageText.substring(0, 100);
-
-      const newThread = await createThread(apiClient, {
-        subject,
-        body_text: messageText,
-        sender_name: userDisplayName,
-        deploymentId,
-        tenantAiAgentId,
-        projectId: projectState.projectContext?.id
-      });
-
-      if (newThread) {
-        currentThreadId = newThread.id;
-
-        // Update the selected session ID
-        sessionActions.selectSessionId(currentThreadId);
-        selectedSessionIdRef.current = currentThreadId;
-
-        // Add the new session to the list
-        const session: AssistantSession = {
-          id: newThread.id,
-          title: newThread.subject || subject,
-          messages: [],
-          createdAt: new Date(newThread.created_on || new Date()),
-          updatedAt: new Date(newThread.last_modified_on || new Date())
-        };
-
-        sessionActions.addSession(session);
-
-        fetchThreads();
-
-        if (projectState.projectContext?.id) {
-          fetchProjectThreads(projectState.projectContext.id);
-        }
-      } else {
-        return;
-      }
-    }
-
-    onMessageSend?.(messageText);
-    setInput('');
-
-    // Upload files to thread storage via REST API
-    const rawFiles: { url: string; mediaType: string; filename: string }[] = options?.files || [];
-    const filePaths: string[] = [];
-
-    if (rawFiles.length > 0 && currentThreadId) {
-      for (const rawFile of rawFiles) {
-        try {
-          const file = dataUrlToFile(rawFile.url, rawFile.filename);
-          const path = await uploadThreadFile(apiClient, currentThreadId, file);
-
-          if (path) {
-            filePaths.push(path);
-          }
-        } catch (error) {
-          console.error('[FILE_UPLOAD] Error:', error);
-        }
-      }
-    }
-
-    // Store file paths in ref for prepareSendMessagesRequest
-    messageOptionsRef.current = {
-      ...options,
-      filePaths: filePaths.length > 0 ? filePaths : undefined
-    };
-
-    await sendMessage({
-      text: messageText,
-      metadata: {
-        modelId: options?.modelId,
-        supportMultipleModels: options?.supportMultipleModels,
-        supportFiles: options?.supportFiles,
-        supportWebSearch: options?.supportWebSearch,
-        supportDeepResearch: options?.supportDeepResearch,
-        supportDocumentSearch: options?.supportDocumentSearch,
-        supportThinking: options?.supportThinking,
-        supportWorkCanvas: options?.supportWorkCanvas
-      }
-    });
-  };
-
-  const handleInputChange = useCallback((e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-    setInput(e.target.value);
-  }, []);
-
-  const handleProjectMessage = async (e?: FormEvent) => {
-    e?.preventDefault();
-    if (!input.trim() || !projectState.selectedProject) return;
-
-    // Clear everything and switch to home tab
-    sessionActions.selectSessionId(null);
-    selectedSessionIdRef.current = null;
-    setMessages([]);
-    uiActions.setActiveTab(0);
-
-    const originalMessage = input.trim();
-
-    // Store project context for breadcrumb
-    projectActions.setContext({
-      name: projectState.selectedProject.name,
-      id: projectState.selectedProject.id,
-      message: originalMessage
-    });
-
-    // Set input and use existing handleSendMessage logic
-    setInput(originalMessage);
-
-    // Small delay to ensure state updates, then send message
-    setTimeout(async () => {
-      // Double-check that session is cleared before sending
-      sessionActions.selectSessionId(null);
-      selectedSessionIdRef.current = null;
-      await handleSendMessage();
-    }, 200);
-  };
-
-  const handleDockLeft = () => {
-    // If in inline mode, switch to modal mode when docking
-    if (isInlineMode) {
-      uiActions.setRenderMode('modal');
-      uiActions.setDocked(true);
-      uiActions.setExpanded(false);
-
-      return;
-    }
-    // If currently docked and original renderMode was inline, return to inline
-    if (uiState.isDocked && renderMode === 'inline') {
-      uiActions.setRenderMode('inline');
-      uiActions.setDocked(false);
-      uiActions.setExpanded(false);
-
-      return;
-    }
-    uiActions.setDocked(!uiState.isDocked);
-    uiActions.setExpanded(false);
-  };
-
-  const handleExpand = () => {
-    // In inline mode, always toggle fullscreen overlay (InlineView handles it via portal)
-    if (isInlineMode) {
-      setIsInlineFullscreen(prev => !prev);
-
-      return;
-    }
-    // If currently expanded and original renderMode was inline, return to inline
-    if (uiState.isExpanded && renderMode === 'inline') {
-      uiActions.setRenderMode('inline');
-      uiActions.setExpanded(false);
-      uiActions.setDocked(false);
-
-      return;
-    }
-    uiActions.setExpanded(!uiState.isExpanded);
-    uiActions.setDocked(false);
-  };
-
-  const handleCreateProject = async (e: FormEvent) => {
-    e.preventDefault();
-
-    if (!projectState.form.name.trim()) return;
-
-    projectActions.setCreating(true);
-
-    try {
-      const response: any = await apiClient.post('/ai/projects', {
-        name: projectState.form.name,
-        tenant_ai_agent_id: tenantAiAgentId,
-        description: projectState.form.description || undefined
-      });
-
-      if (response.success && response.data) {
-        const newProject = response.data;
-
-        // Set the selected project
-        projectActions.selectProject(newProject);
-
-        // Reset form
-        projectActions.setForm({ name: '', description: '' });
-
-        // Navigate to conversation view
-        projectActions.setView('conversation');
-
-        // Refresh projects list
-        fetchProjects();
-      }
-    } catch (error) {
-      console.error('Failed to create project:', error);
-      // Could add error handling/toast here
-    } finally {
-      projectActions.setCreating(false);
-    }
-  };
-
-  const updateSession = async () => {
-    await updateSessionApi(
-      apiClient,
-      sessionState,
-      sessionActions,
-      fetchThreads,
-      fetchProjectThreads,
-      projectState.projectContext?.id || null,
-      projectState.selectedProject?.id || null,
-      t
-    );
-  };
-
-  const deleteSession = async () => {
-    await deleteSessionApi(
-      apiClient,
-      sessionState,
-      sessionActions,
-      fetchThreads,
-      fetchProjectThreads,
-      projectState.projectContext?.id || null,
-      projectState.selectedProject?.id || null,
-      t
-    );
-  };
-
-  const updateProjectInstructions = async () => {
-    await updateProjectInstructionsApi(apiClient, projectState, projectActions, fetchProjects, t);
-  };
-
-  // Filter sessions based on search query
-  const filteredSessions = sessionState.sessions.filter((session) => {
-    if (!sessionState.searchQuery.trim()) return true;
-
-    const query = sessionState.searchQuery.toLowerCase();
-
-    return session.title.toLowerCase().includes(query);
-  });
-
-  // Sidebar content render helper
-  const renderSidebarContent = () => (
-    <SidebarContent
-      sessions={sessionState.sessions}
-      works={worksState.works}
-      projects={projectState.projects}
-      selectedSessionId={sessionState.selectedSessionId}
-      selectedWorkId={worksState.selectedWork?.id}
-      activeTab={uiState.activeTab}
-      onNewChat={() => {
-        createNewThread();
-        projectActions.setContext(null);
-      }}
-      onTabChange={uiActions.setActiveTab}
-      onSessionClick={handleSessionClick}
-      onDeleteSession={(session) => {
-        sessionActions.selectSession(session);
-        sessionActions.setDeleteDialogOpen(true);
-      }}
-      onWorkClick={async (work) => {
-        if (work.base_thread_id) {
-          sessionActions.selectSessionId(work.base_thread_id);
-          uiActions.setActiveTab(0);
-          await loadThreadMessages(work.base_thread_id);
-        }
-      }}
-      onProjectClick={(project) => {
-        projectActions.selectProject(project);
-        projectActions.setView('conversation');
-        uiActions.setActiveTab(2);
-      }}
-      onShowMoreProjects={() => {
-        uiActions.setActiveTab(2);
-        projectActions.setView('list');
-      }}
-      onNewProject={() => {
-        uiActions.setActiveTab(2);
-        projectActions.setView('create');
-      }}
-      onToggleSidebar={uiState.isExpanded ? undefined : () => uiActions.setSidebarOpen(false)}
-      t={t} />
-  );
-
-  const handleWorkNavigation = (work: Work | null) => {
-    worksActions.selectWork(work);
-    uiActions.setRightSidebarView(work ? 'detail' : 'list');
-  };
-
-  // Inline mode: render directly without Dialog wrapper
-  if (isInlineMode) {
-    return (
-      <>
-        <InlineView
-          ref={ref as Ref<HTMLDivElement>}
-          open={open}
-          onOpenChange={onOpenChange}
-          messages={messages}
-          isLoading={isLoading}
-          input={input}
-          onInputChange={handleInputChange}
-          onSendMessage={handleSendMessage}
-          onStop={stop}
-          title={agentDetails?.name ?? title}
-          description={description}
-          welcomeMessage={agentDetails?.welcomeMessage}
-          isLoadingAgent={isLoadingAgentDetails}
-          logo={agentDetails?.logo ?? logo}
-          placeholder={placeholder}
-          footerText={footerText}
-          className={className}
-          userPhoto={userPhoto}
-          userDisplayName={userDisplayName}
-          enableSidebar={isInlineFullscreen ? true : enableSidebar}
-          supportFiles={supportFiles}
-          supportWebSearch={supportWebSearch}
-          supportDocumentSearch={supportDocumentSearch}
-          supportDeepResearch={supportDeepResearch}
-          supportThinking={supportThinking}
-          supportWorkCanvas={supportWorkCanvas}
-          supportMultiModels={supportMultiModels}
-          deploymentId={deploymentId}
-          tenantAiAgentId={tenantAiAgentId}
-          enableMicrophone={enableMicrophone}
-          enableVoice={enableVoice}
-          isRecording={isRecording}
-          recognition={recognition}
-          onMicrophoneClick={handleMicrophoneClick}
-          isSidebarOpen={uiState.isSidebarOpen}
-          onToggleSidebar={() => uiActions.setSidebarOpen(!uiState.isSidebarOpen)}
-          renderSidebar={renderSidebarContent}
-          activeTab={uiState.activeTab}
-          onTabChange={uiActions.setActiveTab}
-          onNewChat={() => {
-            createNewThread();
-            projectActions.setContext(null);
-          }}
-          enableNavDropdown={isInlineFullscreen ? false : enableNavDropdown}
-          isFullscreen={isInlineFullscreen}
-          onExpand={hideExpand ? undefined : handleExpand}
-          renderThreadHeader={sessionState.selectedSession && sessionState.selectedSession.id === sessionState.selectedSessionId ? () => (
-            <ThreadHeaderInline
-              session={sessionState.selectedSession!}
-              projects={projectState.projects}
-              projectContext={projectState.projectContext}
-              isFullscreen={isInlineFullscreen}
-              onSaveTitle={async (newTitle) => {
-                await updateSessionApi(
-                  apiClient,
-                  { ...sessionState, name: newTitle },
-                  sessionActions,
-                  fetchThreads,
-                  fetchProjectThreads,
-                  projectState.projectContext?.id || null,
-                  projectState.selectedProject?.id || null,
-                  t
-                );
-                sessionActions.updateSession({ ...sessionState.selectedSession!, title: newTitle });
-              }}
-              onDelete={() => sessionActions.setDeleteDialogOpen(true)}
-              onArchive={async () => {
-                try {
-                  await apiClient.patch(
-                    `/apps/base/data-sources/thread/items/${sessionState.selectedSession!.id}`,
-                    { archived: true }
-                  );
-                  sessionActions.removeSession(sessionState.selectedSession!.id);
-                  sessionActions.selectSession(null);
-                  sessionActions.selectSessionId(null);
-                  toast.success(t('toast.session_archived_success'));
-                } catch {
-                  toast.error(t('toast.failed_archive_session'));
-                }
-              }}
-              onMoveToProject={async (projectId) => {
-                try {
-                  await apiClient.patch(
-                    `/apps/base/data-sources/thread/items/${sessionState.selectedSession!.id}`,
-                    { tenant_ai_project_id: projectId }
-                  );
-                  sessionActions.removeSession(sessionState.selectedSession!.id);
-                  sessionActions.selectSession(null);
-                  sessionActions.selectSessionId(null);
-                  toast.success(t('toast.session_moved_success'));
-                } catch {
-                  toast.error(t('toast.failed_move_session'));
-                }
-              }}
-              onProjectContextClick={() => {
-                const project = projectState.projects.find(p => p.id === projectState.projectContext!.id);
-
-                if (project) {
-                  projectActions.selectProject(project);
-                  projectActions.setView('conversation');
-                  uiActions.setActiveTab(2);
-                  projectActions.setContext(null);
-                }
-              }}
-              t={t} />
-          ) : undefined}
-          renderSessionsView={() => (
-            <SessionsListView
-              sessions={sessionState.sessions}
-              filteredSessions={filteredSessions}
-              searchQuery={sessionState.searchQuery}
-              onSearchChange={sessionActions.setSearchQuery}
-              onNewSession={createNewThread}
-              onSessionClick={handleSessionClick}
-              onEditSession={(session) => {
-                sessionActions.selectSession(session);
-                sessionActions.setName(session.title || '');
-                sessionActions.startEditing();
-              }}
-              onDeleteSession={(session) => {
-                sessionActions.selectSession(session);
-                sessionActions.setDeleteDialogOpen(true);
-              }}
-              t={t} />
-          )}
-          renderProjectsView={() => (
-            projectState.view === 'create' ? (
-              <div className="flex-1 flex flex-col p-6">
-                <div className="flex items-center gap-4 mb-6">
-                  {projectState.projects && projectState.projects.length > 0 && (
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      onClick={() => projectActions.setView('list')}
-                      className="text-muted-foreground cursor-pointer hover:text-foreground">
-                      <ArrowLeft className="w-5 h-5" />
-                    </Button>
-                  )}
-                </div>
-                <div className="max-w-lg mx-auto w-full">
-                  <h1 className="text-2xl font-semibold mb-4 ps-2">{t('dialogs.create_project')}</h1>
-                  <form onSubmit={handleCreateProject} className="grid grid-cols-1 gap-4">
-                    <div>
-                      <label className="text-sm ps-2 mb-1 block font-base">
-                        {t('placeholders.what_are_you_working')}
-                      </label>
-                      <Input
-                        value={projectState.form.name}
-                        onChange={(e: ChangeEvent<HTMLInputElement>) => projectActions.setForm({ ...projectState.form, name: e.target.value })}
-                        className="border border-border-300 hover:border-border-200 transition-colors font-large h-11 px-3 rounded-[0.6rem] w-full"
-                        placeholder={t('placeholders.name_your_project')}
-                        required />
-                    </div>
-                    <div>
-                      <label className="text-sm ps-2 mb-1 block font-base">
-                        {t('placeholders.what_are_you_trying')}
-                      </label>
-                      <Textarea
-                        value={projectState.form.description}
-                        onChange={(e: ChangeEvent<HTMLTextAreaElement>) => projectActions.setForm({ ...projectState.form, description: e.target.value })}
-                        className="border border-border-300 min-h-25 resize-none p-2 hover:border-border-200 transition-colors font-large px-3 rounded-[0.6rem] w-full"
-                        placeholder={t('placeholders.describe_project')} />
-                    </div>
-                    <div className="mt-2 flex justify-end gap-2">
-                      <Button
-                        type="button"
-                        variant="outline"
-                        onClick={() => projectActions.setView('list')}>
-                        {t('buttons.cancel')}
-                      </Button>
-                      <Button
-                        type="submit"
-                        disabled={projectState.isCreating || !projectState.form.name.trim()}>
-                        {projectState.isCreating ? t('buttons.creating') : t('buttons.create_project')}
-                      </Button>
-                    </div>
-                  </form>
-                </div>
-              </div>
-            ) : projectState.view === 'conversation' && projectState.selectedProject ? (
-              <AssistantProjectDetailView
-                project={projectState.selectedProject}
-                projectThreads={projectState.projectThreads}
-                projectWorks={projectState.projectWorks}
-                onBack={() => projectActions.setView('list')}
-                onEditInstructions={(instructions) => {
-                  projectActions.setInstructions(instructions);
-                  projectActions.startEditingInstructions();
-                }}
-                onProjectMessage={handleProjectMessage}
-                onThreadClick={(thread) => {
-                  sessionActions.selectSessionId(thread.id);
-                  sessionActions.selectSession(thread);
-                  projectActions.setContext({
-                    name: projectState.selectedProject!.name,
-                    id: projectState.selectedProject!.id,
-                    message: thread.title || 'Untitled'
-                  });
-                  loadThreadMessages(thread.id);
-                  uiActions.setActiveTab(0);
-                }}
-                onEditSession={(thread) => {
-                  sessionActions.selectSession(thread);
-                  sessionActions.setName(thread.title || '');
-                  sessionActions.startEditing();
-                }}
-                onDeleteSession={(thread) => {
-                  sessionActions.selectSession(thread);
-                  sessionActions.setDeleteDialogOpen(true);
-                }}
-                input={input}
-                onChange={handleInputChange}
-                isLoading={isLoading}
-                supportFiles={supportFiles}
-                supportWebSearch={supportWebSearch}
-                supportDocumentSearch={supportDocumentSearch}
-                supportDeepResearch={supportDeepResearch}
-                supportThinking={supportThinking}
-                supportWorkCanvas={supportWorkCanvas}
-                supportMultiModels={supportMultiModels}
-                deploymentId={deploymentId}
-                enableMicrophone={enableMicrophone}
-                enableVoice={enableVoice}
-                isRecording={isRecording}
-                recognition={recognition}
-                onMicrophoneClick={handleMicrophoneClick} />
-            ) : (
-              <AssistantProjectsPanel
-                projects={projectState.projects}
-                searchQuery={projectSearchQuery}
-                onSearchChange={setProjectSearchQuery}
-                onNewProject={() => projectActions.setView('create')}
-                onProjectClick={(project) => {
-                  projectActions.selectProject(project);
-                  projectActions.setView('conversation');
-                }}
-                onEditProject={(project) => {
-                  projectActions.selectProject(project);
-                  projectActions.setName(project.name || '');
-                  projectActions.setDescription(project.description || '');
-                  projectActions.startEditing();
-                }}
-                onDeleteProject={(project) => {
-                  projectActions.selectProject(project);
-                  projectActions.setDeleteDialogOpen(true);
-                }}
-                compact={enableNavDropdown}
-                t={t} />
-            )
-          )}
-          renderMemoriesView={() => <MemoriesPanel t={t} />}
-          renderWorksView={() => (
-            worksState.detailViewWork ? (
-              <div className="flex-1 flex flex-col overflow-y-auto">
-                <AssistantWorkDetailView
-                  work={worksState.detailViewWork}
-                  onClose={() => worksActions.setDetailViewWork(null)}
-                  onBack={() => worksActions.setDetailViewWork(null)} />
-              </div>
-            ) : (
-              <div className="flex-1 flex flex-col overflow-y-auto p-6">
-                {/* Header */}
-                <div className="flex items-center justify-between mb-6">
-                  <div className="flex flex-col min-w-0">
-                    <h1 className="text-2xl font-semibold ps-2">{t('tabs.works')}</h1>
-                    <div className="text-sm text-muted-foreground ps-2">{t('descriptions.manage_works')}</div>
-                  </div>
-                  <Button size="sm" className="shrink-0">
-                    <Plus className="w-4 h-4" />
-                    {t('buttons.new_work')}
-                  </Button>
-                </div>
-
-                {/* Search */}
-                <div className="flex items-center gap-4 mb-6">
-                  <div className="relative flex-1">
-                    <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
-                    <Input
-                      type="text"
-                      placeholder={t('placeholders.search_works')}
-                      value={worksState.searchQuery}
-                      onChange={(e: ChangeEvent<HTMLInputElement>) => worksActions.setSearchQuery(e.target.value)}
-                      className="pl-10 pr-4 py-2 w-full border border-border rounded-lg focus:outline-none" />
-                  </div>
-                </div>
-
-                {/* Works Tabs */}
-                <Tabs value={worksState.tabValue} onValueChange={worksActions.setTabValue}>
-                  <TabsList className="mb-4 p-1">
-                    <TabsTrigger className="py-2" value="1">
-                      {t('tabs.my_works')}
-                    </TabsTrigger>
-                    <TabsTrigger className="py-2" value="2">
-                      {t('tabs.shared_to_me')}
-                    </TabsTrigger>
-                    <TabsTrigger className="py-2" value="3">
-                      {t('tabs.library')}
-                    </TabsTrigger>
-                  </TabsList>
-                  <TabsContent value="1">
-                    {worksState.works.length === 0 ? (
-                      <div className="text-center py-8 text-muted-foreground">{t('messages.no_works_start')}</div>
-                    ) : (
-                      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-                        {worksState.works
-                          .filter(
-                            work => work.title.toLowerCase().includes(worksState.searchQuery.toLowerCase())
-                              || work.content_text?.toLowerCase().includes(worksState.searchQuery.toLowerCase())
-                          )
-                          .map(work => (
-                            <WorkCard
-                              key={work.id}
-                              work={work}
-                              onClick={async () => {
-                                if (work.base_thread_id) {
-                                  sessionActions.selectSessionId(work.base_thread_id);
-                                  uiActions.setActiveTab(0);
-                                  await loadThreadMessages(work.base_thread_id);
-                                }
-                              }}
-                              t={t} />
-                          ))}
-                      </div>
-                    )}
-                  </TabsContent>
-                  <TabsContent value="2">
-                    {(() => {
-                      const sharedWorks = worksState.works.filter(
-                        work => work.shared_to
-                          && Array.isArray(work.shared_to)
-                          && currentUserId
-                          && work.shared_to.includes(currentUserId)
-                      );
-
-                      return sharedWorks.length === 0 ? (
-                        <div className="text-center py-8 text-muted-foreground">
-                          {t('messages.no_works_shared')}
-                        </div>
-                      ) : (
-                        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-                          {worksState.works
-                            .filter((work) => {
-                              const isSharedToMe
-                                = work.shared_to
-                                  && Array.isArray(work.shared_to)
-                                  && currentUserId
-                                  && work.shared_to.includes(currentUserId);
-                              const matchesSearch
-                                = work.title.toLowerCase().includes(worksState.searchQuery.toLowerCase())
-                                  || work.content_text?.toLowerCase().includes(worksState.searchQuery.toLowerCase());
-
-                              return isSharedToMe && matchesSearch;
-                            })
-                            .map(work => (
-                              <WorkCard
-                                key={work.id}
-                                work={work}
-                                onClick={async () => {
-                                  if (work.base_thread_id) {
-                                    sessionActions.selectSessionId(work.base_thread_id);
-                                    uiActions.setActiveTab(0);
-                                    await loadThreadMessages(work.base_thread_id);
-                                  }
-                                }}
-                                t={t} />
-                            ))}
-                        </div>
-                      );
-                    })()}
-                  </TabsContent>
-                  <TabsContent value="3">
-                    {worksState.works.length === 0 ? (
-                      <div className="text-center py-8 text-muted-foreground">{t('messages.no_works_found')}</div>
-                    ) : (
-                      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-                        {worksState.works
-                          .filter(
-                            work => work.title.toLowerCase().includes(worksState.searchQuery.toLowerCase())
-                              || work.content_text?.toLowerCase().includes(worksState.searchQuery.toLowerCase())
-                          )
-                          .map(work => (
-                            <WorkCard
-                              key={work.id}
-                              work={work}
-                              onClick={() => worksActions.setDetailViewWork(work)}
-                              t={t} />
-                          ))}
-                      </div>
-                    )}
-                  </TabsContent>
-                </Tabs>
-              </div>
-            )
-          )}
-          onToolAction={handleToolAction}
-          threadId={sessionState.selectedSessionId ?? undefined}
-          agentSelectorUrl={agentSelectorUrl}
-          baseAgentSelectorUrl={baseAgentSelectorUrl}
-          onAgentChange={(agentId, agentType) => {
-            createNewThread();
-            onAgentChange?.(agentId, agentType);
-          }}
-          t={t} />
-        <AssistantDialogs
-          projectState={projectState}
-          projectActions={projectActions}
-          sessionState={sessionState}
-          sessionActions={sessionActions}
-          onUpdateProject={updateProject}
-          onDeleteProject={deleteProject}
-          onUpdateSession={updateSession}
-          onDeleteSession={deleteSession}
-          onUpdateProjectInstructions={updateProjectInstructions}
-          t={t} />
-      </>
-    );
-  }
-
-  // Modal mode: render with Dialog wrapper (original implementation)
-  return (
-    <>
-      <Dialog open={open} onOpenChange={onOpenChange}>
-        <DialogTitle className="sr-only">DocyAssistant</DialogTitle>
-        <DialogContent
-          className={cn(getDialogClassName({ isExpanded: uiState.isExpanded, isDocked: uiState.isDocked }), className, '@container')}
-          data-docked={uiState.isDocked}
-          data-expanded={uiState.isExpanded}
-          data-container-query="true"
-          showCloseButton={!uiState.isRightSidebarOpen}
-          style={{
-            position: 'fixed',
-            ...(uiState.isExpanded && {
-              top: 0,
-              left: 0,
-              right: 0,
-              bottom: 0,
-              width: '100vw',
-              height: '100vh',
-              transform: 'none',
-              maxWidth: 'none',
-              maxHeight: 'none'
-            }),
-            ...(uiState.isDocked && {
-              top: 0,
-              left: 0,
-              width: '700px',
-              height: '100vh',
-              transform: 'none',
-              maxWidth: 'none',
-              maxHeight: 'none'
-            })
-          }}
-          {...props}
-          ref={ref}>
-          {/* Floating Sidebar with Overlay - shown only when container < 3xl */}
-          {enableSidebar && uiState.isSidebarOpen && (
-            <>
-              {/* Background Mask */}
-              <div
-                className={cn(
-                  'absolute inset-0 bg-black/30 z-99',
-                  // Show only when container is smaller than 3xl
-                  '@3xl:hidden'
-                )}
-                onClick={() => uiActions.setSidebarOpen(false)} />
-
-              {/* Floating Sidebar */}
-              <div
-                className={cn(
-                  'absolute left-0 top-0 h-full w-72 rounded-lg z-100 shadow-xl',
-                  // Show floating sidebar when container is smaller than 3xl
-                  '@3xl:hidden'
-                )}
-                onMouseLeave={() => {
-                  // Auto-close when mouse leaves sidebar (not in fullscreen/expanded mode)
-                  if (uiState.isExpanded) return;
-                  if (sidebarCloseTimeoutRef.current) {
-                    clearTimeout(sidebarCloseTimeoutRef.current);
-                  }
-                  sidebarCloseTimeoutRef.current = setTimeout(() => {
-                    uiActions.setSidebarOpen(false);
-                  }, 300);
-                }}
-                onMouseEnter={() => {
-                  // Clear any pending close timeout when mouse enters
-                  if (sidebarCloseTimeoutRef.current) {
-                    clearTimeout(sidebarCloseTimeoutRef.current);
-                    sidebarCloseTimeoutRef.current = null;
-                  }
-                }}>
-                <div className="w-full h-full flex flex-col">
-                  {/* Header with Close Button */}
-                  <div className="flex items-center justify-end h-10 px-2 border-b">
-                    {/* Close Button */}
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      onClick={() => uiActions.setSidebarOpen(false)}
-                      className="h-8 w-8 text-muted-foreground hover:text-foreground">
-                      <X className="w-4 h-4" />
-                    </Button>
-                  </div>
-
-                  <div className="flex-1 p-4 flex flex-col min-h-0">
-                    {renderSidebarContent()}
-                  </div>
-                </div>
-              </div>
-            </>
-          )}
-
-          <div className={getContainerClassName({ isExpanded: uiState.isExpanded, isDocked: uiState.isDocked })}>
-            {/* Top Left Controls - Sidebar Toggle & New Thread */}
-            {enableSidebar && (
-              <div className="absolute z-10 top-2.5 left-3 flex items-center gap-2">
-                {/* Sidebar Toggle */}
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  onClick={() => uiActions.setSidebarOpen(!uiState.isSidebarOpen)}
-                  data-sidebar-open={uiState.isSidebarOpen}
-                  className={cn(
-                    'h-8 w-8 text-muted-foreground hover:bg-accent hover:text-accent-foreground rounded-md transition-all duration-300',
-                    // Hide button when sidebar is open
-                    uiState.isSidebarOpen && 'opacity-0 pointer-events-none'
-                  )}>
-                  <PanelLeft
-                    className={cn(
-                      'w-5 h-5 transition-transform duration-300',
-                      uiState.isSidebarOpen && 'scale-x-[-1]'
-                    )} />
-                </Button>
-
-                {/* New Thread Button */}
-                {!uiState.isSidebarOpen && (
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    onClick={createNewThread}
-                    className="h-8 w-8 text-muted-foreground hover:bg-accent hover:text-accent-foreground rounded-md transition-all duration-300"
-                    title={t('buttons.start_new_thread')}>
-                    <Edit className="w-5 h-5" />
-                  </Button>
-                )}
-              </div>
-            )}
-
-            {/* Top Right Controls - Dock & Expand */}
-            {!uiState.isRightSidebarOpen && (
-              <div className="absolute top-2 right-12 flex items-center gap-2 z-50">
-                {!uiState.isExpanded && (
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="h-8 w-8 text-muted-foreground hover:bg-accent hover:text-accent-foreground rounded-md transition-colors"
-                    onClick={handleDockLeft}
-                    title={uiState.isDocked ? t('actions.undock') : t('actions.dock_left')}>
-                    {uiState.isDocked ? <ArrowRight className="w-5 h-5" /> : <ArrowLeft className="w-5 h-5" />}
-                  </Button>
-                )}
-
-                {!uiState.isDocked && (
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="h-8 w-8 text-muted-foreground hover:bg-accent hover:text-accent-foreground rounded-md transition-colors"
-                    onClick={handleExpand}
-                    title={uiState.isExpanded ? t('actions.minimize') : t('actions.expand')}>
-                    {uiState.isExpanded ? <Minimize2 className="w-5 h-5" /> : <Maximize2 className="w-5 h-5" />}
-                  </Button>
-                )}
-              </div>
-            )}
-
-            {/* Inline Sidebar - shown only when container >= 3xl */}
-            {enableSidebar && (
-              <div
-                className={cn(
-                  'relative flex-none transition-all duration-300',
-                  // Show inline sidebar when container is 3xl or larger (48rem/768px)
-                  'hidden @3xl:block',
-                  uiState.isSidebarOpen ? 'w-72' : 'w-0 overflow-hidden'
-                )}>
-                <div className="w-72 h-full flex flex-col">
-                  <div className="flex-1 p-4 flex flex-col min-h-0">
-                    {renderSidebarContent()}
-                  </div>
-                </div>
-              </div>
-            )}
-
-            {/* Main Content Area */}
-            <div className={cn('flex-1 flex flex-col bg-background', uiState.isDocked ? 'min-w-0' : 'min-w-96')}>
-              {/* Conditionally render content based on activeTab */}
-              {uiState.activeTab === 1 ? (
-                <SessionsListView
-                  sessions={sessionState.sessions}
-                  filteredSessions={filteredSessions}
-                  searchQuery={sessionState.searchQuery}
-                  onSearchChange={sessionActions.setSearchQuery}
-                  onNewSession={createNewThread}
-                  onSessionClick={handleSessionClick}
-                  onEditSession={(session) => {
-                    sessionActions.selectSession(session);
-                    sessionActions.setName(session.title || '');
-                    sessionActions.startEditing();
-                  }}
-                  onDeleteSession={(session) => {
-                    sessionActions.selectSession(session);
-                    sessionActions.setDeleteDialogOpen(true);
-                  }}
-                  t={t} />
-              ) : uiState.activeTab === 2 ? (
-              /* Projects View */
-                projectState.view === 'list' ? (
-                  <AssistantProjectsPanel
-                    projects={projectState.projects}
-                    searchQuery={projectSearchQuery}
-                    onSearchChange={setProjectSearchQuery}
-                    onNewProject={() => projectActions.setView('create')}
-                    onProjectClick={(project) => {
-                      projectActions.selectProject(project);
-                      projectActions.setView('conversation');
-                    }}
-                    onEditProject={(project) => {
-                      projectActions.selectProject(project);
-                      projectActions.setName(project.name || '');
-                      projectActions.setDescription(project.description || '');
-                      projectActions.startEditing();
-                    }}
-                    onDeleteProject={(project) => {
-                      projectActions.selectProject(project);
-                      projectActions.setDeleteDialogOpen(true);
-                    }}
-                    compact={enableNavDropdown}
-                    t={t} />
-                ) : projectState.view === 'create' ? (
-                /* Create Project Form */
-                  <div className="flex-1 flex flex-col p-6">
-                    {/* Header with Back Button */}
-                    <div className="flex items-center gap-4 mb-6">
-                      {projectState.projects && projectState.projects.length > 0 && (
-                        <Button
-                          variant="ghost"
-                          size="icon"
-                          onClick={() => projectActions.setView('list')}
-                          className="text-muted-foreground cursor-pointer hover:text-foreground">
-                          <ArrowLeft className="w-5 h-5" />
-                        </Button>
-                      )}
-                    </div>
-
-                    <div className="max-w-lg mx-auto w-full">
-                      <h1 className="text-2xl font-semibold mb-4 ps-2">{t('dialogs.create_project')}</h1>
-                      <form onSubmit={handleCreateProject} className="grid grid-cols-1 gap-4">
-                        <div>
-                          <label className="text-sm ps-2 mb-1 block font-base">
-                            {t('placeholders.what_are_you_working')}
-                          </label>
-                          <Input
-                            value={projectState.form.name}
-                            onChange={(e: ChangeEvent<HTMLInputElement>) => projectActions.setForm({ ...projectState.form, name: e.target.value })}
-                            className="border border-border-300 hover:border-border-200 transition-colors font-large h-11 px-3 rounded-[0.6rem] w-full"
-                            placeholder={t('placeholders.name_your_project')}
-                            required />
-                        </div>
-
-                        <div>
-                          <label className="text-sm ps-2 mb-1 block font-base">
-                            {t('placeholders.what_are_you_trying')}
-                          </label>
-                          <Textarea
-                            value={projectState.form.description}
-                            onChange={(e: ChangeEvent<HTMLTextAreaElement>) => projectActions.setForm({ ...projectState.form, description: e.target.value })}
-                            className="border border-border-300 min-h-25 resize-none p-2 hover:border-border-200 transition-colors font-large px-3 rounded-[0.6rem] w-full"
-                            placeholder={t('placeholders.describe_project')} />
-                        </div>
-
-                        <div className="mt-2 flex justify-end gap-2">
-                          <Button
-                            type="button"
-                            variant="outline"
-                            onClick={() => projectActions.setView('list')}>
-                            {t('buttons.cancel')}
-                          </Button>
-                          <Button
-                            type="submit"
-                            disabled={projectState.isCreating || !projectState.form.name.trim()}>
-                            {projectState.isCreating ? t('buttons.creating') : t('buttons.create_project')}
-                          </Button>
-                        </div>
-                      </form>
-                    </div>
-                  </div>
-                ) : (
-                /* Project Conversation View */
-                  projectState.selectedProject && (
-                    <AssistantProjectDetailView
-                      project={projectState.selectedProject}
-                      projectThreads={projectState.projectThreads}
-                      projectWorks={projectState.projectWorks}
-                      onBack={() => projectActions.setView('list')}
-                      onEditInstructions={(instructions) => {
-                        projectActions.setInstructions(instructions);
-                        projectActions.startEditingInstructions();
-                      }}
-                      onProjectMessage={handleProjectMessage}
-                      onThreadClick={(thread) => {
-                        sessionActions.selectSessionId(thread.id);
-                        sessionActions.selectSession(thread);
-                        projectActions.setContext({
-                          name: projectState.selectedProject!.name,
-                          id: projectState.selectedProject!.id,
-                          message: thread.title || 'Untitled'
-                        });
-                        loadThreadMessages(thread.id);
-                        uiActions.setActiveTab(0); // Switch to Home tab
-                      }}
-                      onEditSession={(thread) => {
-                        sessionActions.selectSession(thread);
-                        sessionActions.setName(thread.title || '');
-                        sessionActions.startEditing();
-                      }}
-                      onDeleteSession={(thread) => {
-                        sessionActions.selectSession(thread);
-                        sessionActions.setDeleteDialogOpen(true);
-                      }}
-                      input={input}
-                      onChange={handleInputChange}
-                      isLoading={isLoading}
-                      supportFiles={supportFiles}
-                      supportWebSearch={supportWebSearch}
-                      supportDocumentSearch={supportDocumentSearch}
-                      supportDeepResearch={supportDeepResearch}
-                      supportThinking={supportThinking}
-                      supportWorkCanvas={supportWorkCanvas}
-                      supportMultiModels={supportMultiModels}
-                      deploymentId={deploymentId}
-                      enableMicrophone={enableMicrophone}
-                      enableVoice={enableVoice}
-                      isRecording={isRecording}
-                      recognition={recognition}
-                      onMicrophoneClick={handleMicrophoneClick} />
-                  )
-                )
-              ) : uiState.activeTab === 3 ? (
-              /* Works View */
-                worksState.detailViewWork ? (
-                /* Work Detail View */
-                  <div className="flex-1 flex flex-col overflow-y-auto">
-                    <AssistantWorkDetailView
-                      work={worksState.detailViewWork}
-                      onClose={() => worksActions.setDetailViewWork(null)}
-                      onBack={() => worksActions.setDetailViewWork(null)} />
-                  </div>
-                ) : (
-                  <div className="flex-1 flex flex-col overflow-y-auto p-6">
-                    {/* Header */}
-                    <div className="flex items-center justify-between mb-6">
-                      <div className="flex flex-col min-w-0">
-                        <h1 className="text-2xl font-semibold ps-2">{t('tabs.works')}</h1>
-                        <div className="text-sm text-muted-foreground ps-2">{t('descriptions.manage_works')}</div>
-                      </div>
-                      <Button size="sm" className="shrink-0">
-                        <Plus className="w-4 h-4" />
-                        {t('buttons.new_work')}
-                      </Button>
-                    </div>
-
-                    {/* Search */}
-                    <div className="flex items-center gap-4 mb-6">
-                      <div className="relative flex-1">
-                        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
-                        <Input
-                          type="text"
-                          placeholder={t('placeholders.search_works')}
-                          value={worksState.searchQuery}
-                          onChange={(e: ChangeEvent<HTMLInputElement>) => worksActions.setSearchQuery(e.target.value)}
-                          className="pl-10 pr-4 py-2 w-full border border-border rounded-lg focus:outline-none" />
-                      </div>
-                    </div>
-
-                    {/* Works Tabs */}
-                    <Tabs value={worksState.tabValue} onValueChange={worksActions.setTabValue}>
-                      <TabsList className="mb-4 p-1">
-                        <TabsTrigger className="py-2" value="1">
-                          {t('tabs.my_works')}
-                        </TabsTrigger>
-                        <TabsTrigger className="py-2" value="2">
-                          {t('tabs.shared_to_me')}
-                        </TabsTrigger>
-                        <TabsTrigger className="py-2" value="3">
-                          {t('tabs.library')}
-                        </TabsTrigger>
-                      </TabsList>
-                      <TabsContent value="1">
-                        {worksState.works.length === 0 ? (
-                          <div className="text-center py-8 text-muted-foreground">{t('messages.no_works_start')}</div>
-                        ) : (
-                          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-                            {worksState.works
-                              .filter(
-                                work => work.title.toLowerCase().includes(worksState.searchQuery.toLowerCase())
-                                  || work.content_text?.toLowerCase().includes(worksState.searchQuery.toLowerCase())
-                              )
-                              .map(work => (
-                                <WorkCard
-                                  key={work.id}
-                                  work={work}
-                                  onClick={async () => {
-                                    if (work.base_thread_id) {
-                                      sessionActions.selectSessionId(work.base_thread_id);
-                                      uiActions.setActiveTab(0);
-                                      await loadThreadMessages(work.base_thread_id);
-                                    }
-                                  }}
-                                  t={t} />
-                              ))}
-                          </div>
-                        )}
-                      </TabsContent>
-                      <TabsContent value="2">
-                        {(() => {
-                          const sharedWorks = worksState.works.filter(
-                            work => work.shared_to
-                              && Array.isArray(work.shared_to)
-                              && currentUserId
-                              && work.shared_to.includes(currentUserId)
-                          );
-
-                          return sharedWorks.length === 0 ? (
-                            <div className="text-center py-8 text-muted-foreground">
-                              {t('messages.no_works_shared')}
-                            </div>
-                          ) : (
-                            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-                              {worksState.works
-                                .filter((work) => {
-                                  // Filter by shared_to field containing current user ID
-                                  const isSharedToMe
-                                    = work.shared_to
-                                      && Array.isArray(work.shared_to)
-                                      && currentUserId
-                                      && work.shared_to.includes(currentUserId);
-                                    // Also filter by search query
-                                  const matchesSearch
-                                    = work.title.toLowerCase().includes(worksState.searchQuery.toLowerCase())
-                                      || work.content_text?.toLowerCase().includes(worksState.searchQuery.toLowerCase());
-
-                                  return isSharedToMe && matchesSearch;
-                                })
-                                .map(work => (
-                                  <WorkCard
-                                    key={work.id}
-                                    work={work}
-                                    onClick={async () => {
-                                      if (work.base_thread_id) {
-                                        sessionActions.selectSessionId(work.base_thread_id);
-                                        uiActions.setActiveTab(0);
-                                        await loadThreadMessages(work.base_thread_id);
-                                      }
-                                    }}
-                                    t={t} />
-                                ))}
-                            </div>
-                          );
-                        })()}
-                      </TabsContent>
-                      <TabsContent value="3">
-                        {worksState.works.length === 0 ? (
-                          <div className="text-center py-8 text-muted-foreground">{t('messages.no_works_found')}</div>
-                        ) : (
-                          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-                            {worksState.works
-                              .filter(
-                                work => work.title.toLowerCase().includes(worksState.searchQuery.toLowerCase())
-                                  || work.content_text?.toLowerCase().includes(worksState.searchQuery.toLowerCase())
-                              )
-                              .map(work => (
-                                <WorkCard
-                                  key={work.id}
-                                  work={work}
-                                  onClick={() => worksActions.setDetailViewWork(work)}
-                                  t={t} />
-                              ))}
-                          </div>
-                        )}
-                      </TabsContent>
-                    </Tabs>
-                  </div>
-                )
-              ) : uiState.activeTab === 4 ? (
-              /* Memories View */
-                <MemoriesPanel t={t} />
-              ) : (
-                <>
-                  {sessionState.selectedSession && sessionState.selectedSession.id === sessionState.selectedSessionId && (
-                    <ThreadHeaderInline
-                      session={sessionState.selectedSession}
-                      projects={projectState.projects}
-                      projectContext={projectState.projectContext}
-                      onSaveTitle={async (newTitle) => {
-                        await updateSessionApi(
-                          apiClient,
-                          { ...sessionState, name: newTitle },
-                          sessionActions,
-                          fetchThreads,
-                          fetchProjectThreads,
-                          projectState.projectContext?.id || null,
-                          projectState.selectedProject?.id || null,
-                          t
-                        );
-                        sessionActions.updateSession({ ...sessionState.selectedSession!, title: newTitle });
-                      }}
-                      onDelete={() => sessionActions.setDeleteDialogOpen(true)}
-                      onArchive={async () => {
-                        try {
-                          await apiClient.patch(
-                            `/apps/base/data-sources/thread/items/${sessionState.selectedSession!.id}`,
-                            { archived: true }
-                          );
-                          sessionActions.removeSession(sessionState.selectedSession!.id);
-                          sessionActions.selectSession(null);
-                          sessionActions.selectSessionId(null);
-                          toast.success(t('toast.session_archived_success'));
-                        } catch {
-                          toast.error(t('toast.failed_archive_session'));
-                        }
-                      }}
-                      onMoveToProject={async (projectId) => {
-                        try {
-                          await apiClient.patch(
-                            `/apps/base/data-sources/thread/items/${sessionState.selectedSession!.id}`,
-                            { tenant_ai_project_id: projectId }
-                          );
-                          sessionActions.removeSession(sessionState.selectedSession!.id);
-                          sessionActions.selectSession(null);
-                          sessionActions.selectSessionId(null);
-                          toast.success(t('toast.session_moved_success'));
-                        } catch {
-                          toast.error(t('toast.failed_move_session'));
-                        }
-                      }}
-                      onProjectContextClick={() => {
-                        const project = projectState.projects.find(p => p.id === projectState.projectContext!.id);
-
-                        if (project) {
-                          projectActions.selectProject(project);
-                          projectActions.setView('conversation');
-                          uiActions.setActiveTab(2);
-                          projectActions.setContext(null);
-                        }
-                      }}
-                      t={t} />
-                  )}
-                  <ConversationView
-                    messages={messages}
-                    isLoading={isLoading}
-                    input={input}
-                    onInputChange={handleInputChange}
-                    onSendMessage={handleSendMessage}
-                    onStop={stop}
-                    logo={logo}
-                    userPhoto={userPhoto}
-                    userDisplayName={userDisplayName}
-                    description={description}
-                    title={agentDetails?.name ?? title}
-                    welcomeMessage={agentDetails?.welcomeMessage}
-                    isLoadingAgent={isLoadingAgentDetails}
-                    placeholder={placeholder}
-                    footerText={footerText}
-                    onWorkSelect={(work) => {
-                      worksActions.updateWork(work);
-                      worksActions.selectWork(work);
-                    }}
-                    onOpenRightSidebar={() => {
-                      uiActions.setRightSidebarOpen(true);
-                      uiActions.setRightSidebarView('detail');
-                    }}
-                    supportFiles={supportFiles}
-                    supportWebSearch={supportWebSearch}
-                    supportDocumentSearch={supportDocumentSearch}
-                    supportDeepResearch={supportDeepResearch}
-                    supportThinking={supportThinking}
-                    supportWorkCanvas={supportWorkCanvas}
-                    supportMultiModels={supportMultiModels}
-                    deploymentId={deploymentId}
-                    tenantAiAgentId={tenantAiAgentId}
-                    enableMicrophone={enableMicrophone}
-                    enableVoice={enableVoice}
-                    isRecording={isRecording}
-                    recognition={recognition}
-                    onMicrophoneClick={handleMicrophoneClick}
-                    onToolAction={handleToolAction}
-                    threadId={sessionState.selectedSessionId ?? undefined} />
-                </>
-              )}
-            </div>
-
-            {/* Floating Right Sidebar with Overlay - shown only when container < 3xl */}
-            {uiState.isRightSidebarOpen && (
-              <>
-                {/* Background Mask */}
-                <div
-                  className={cn(
-                    'absolute inset-0 bg-black/30 z-99',
-                    // Show only when container is smaller than 3xl
-                    '@3xl:hidden'
-                  )}
-                  onClick={() => uiActions.setRightSidebarOpen(false)} />
-
-                {/* Floating Right Sidebar */}
-                <div
-                  className={cn(
-                    'absolute right-0 top-0 h-full w-80 rounded-lg bg-card z-100 shadow-xl',
-                    // Show floating sidebar when container is smaller than 3xl
-                    '@3xl:hidden'
-                  )}
-                  onMouseLeave={() => {
-                    // Auto-close when mouse leaves sidebar
-                    if (rightSidebarCloseTimeoutRef.current) {
-                      clearTimeout(rightSidebarCloseTimeoutRef.current);
-                    }
-                    rightSidebarCloseTimeoutRef.current = setTimeout(() => {
-                      uiActions.setRightSidebarOpen(false);
-                    }, 300);
-                  }}
-                  onMouseEnter={() => {
-                    // Clear any pending close timeout when mouse enters
-                    if (rightSidebarCloseTimeoutRef.current) {
-                      clearTimeout(rightSidebarCloseTimeoutRef.current);
-                      rightSidebarCloseTimeoutRef.current = null;
-                    }
-                  }}>
-                  <AssistantCanvasView
-                    works={worksState.works}
-                    selectedWork={worksState.selectedWork}
-                    rightSidebarView={uiState.rightSidebarView}
-                    onWorkSelect={handleWorkNavigation}
-                    onBackToList={() => handleWorkNavigation(null)}
-                    onClose={() => uiActions.setRightSidebarOpen(false)} />
-                </div>
-              </>
-            )}
-
-            {/* Inline Right Sidebar - shown only when container >= 3xl */}
-            <div
-              className={cn(
-                'relative bg-card flex-none transition-all duration-300 border-l',
-                // Show inline sidebar when container is 3xl or larger
-                'hidden @3xl:block',
-                uiState.isRightSidebarOpen ? 'w-80' : 'w-0 overflow-hidden'
-              )}>
-              <AssistantCanvasView
-                works={worksState.works}
-                selectedWork={worksState.selectedWork}
-                rightSidebarView={uiState.rightSidebarView}
-                onWorkSelect={handleWorkNavigation}
-                onBackToList={() => handleWorkNavigation(null)}
-                onClose={() => uiActions.setRightSidebarOpen(false)} />
-            </div>
-          </div>
-        </DialogContent>
-      </Dialog>
-
-      {/* CRUD Dialogs */}
-      <AssistantDialogs
-        projectState={projectState}
-        projectActions={projectActions}
-        sessionState={sessionState}
-        sessionActions={sessionActions}
-        onUpdateProject={updateProject}
-        onDeleteProject={deleteProject}
-        onUpdateSession={updateSession}
-        onDeleteSession={deleteSession}
-        onUpdateProjectInstructions={updateProjectInstructions}
-        t={t} />
-
-    </>
-  );
-};