@chat-js/cli 0.4.0 → 0.6.1

package/templates/chat-app/components/multimodal-input.tsx

@@ -29,9 +29,9 @@ import { useArtifact } from "@/hooks/use-artifact";
 import { useIsMobile } from "@/hooks/use-mobile";
 import type { AppModelId } from "@/lib/ai/app-model-id";
 import {
-  expandSelectedModelValue,
   type Attachment,
   type ChatMessage,
+  expandSelectedModelValue,
   type SelectedModelValue,
   type UiToolName,
 } from "@/lib/ai/types";
@@ -325,7 +325,9 @@ function PureMultimodalInput({
   );
 
   const getCurrentProjectId = useCallback(() => {
-    const projectMatch = window.location.pathname.match(PROJECT_CHAT_ROUTE_REGEX);
+    const projectMatch = window.location.pathname.match(
+      PROJECT_CHAT_ROUTE_REGEX
+    );
     return projectMatch?.[1];
   }, []);
 
@@ -499,7 +501,8 @@ function PureMultimodalInput({
       trimMessagesInEditMode(parentMessageId);
     }
 
-    const isParallelRequest = parallelResponsesEnabled && requestedModelIds.length > 1;
+    const isParallelRequest =
+      parallelResponsesEnabled && requestedModelIds.length > 1;
     const parallelGroupId = isParallelRequest ? generateUUID() : null;
     const requestSpecs = isParallelRequest
       ? requestedModelIds.map(
@@ -576,13 +579,13 @@ function PureMultimodalInput({
         });
       }
 
-      void runParallelSecondaryRequests({
+      runParallelSecondaryRequests({
         message,
         secondaryRequestSpecs: requestSpecs.slice(1),
       }).catch((error) => {
         console.error("Failed to complete parallel requests", error);
         toast.error("Failed to complete all parallel responses");
-        void invalidatePersistedMessages();
+        invalidatePersistedMessages();
       });
     } else {
       sendMessage(message);
@@ -833,10 +836,10 @@ function PureMultimodalInput({
         <PromptInput
           className={cn(
             "@container relative transition-colors",
-            isDragActive && "border-blue-500 bg-blue-50 dark:bg-blue-950/20",
+            isDragActive && "border-primary bg-accent",
             className
           )}
-          inputGroupClassName="dark:bg-muted bg-muted"
+          inputGroupClassName="bg-muted dark:bg-muted"
           {...getRootProps({ onError: undefined, onSubmit: undefined })}
           onSubmit={(_message, event) => {
             event.preventDefault();
@@ -852,8 +855,8 @@ function PureMultimodalInput({
           <input {...getInputProps()} />
 
           {isDragActive && attachmentsEnabled && (
-            <div className="absolute inset-0 z-10 flex items-center justify-center rounded-xl border-2 border-blue-500 border-dashed bg-blue-50/80 dark:bg-blue-950/40">
-              <div className="font-medium text-blue-600 dark:text-blue-400">
+            <div className="absolute inset-0 z-10 flex items-center justify-center rounded-xl border-2 border-primary border-dashed bg-accent/80">
+              <div className="font-medium text-primary">
                 Drop images or PDFs here to attach
               </div>
             </div>
@@ -1107,9 +1110,9 @@ function PureChatInputBottomControls({
         )}
         <ModelSelector
           className="@[500px]:h-10 h-8 w-fit max-w-none shrink justify-start truncate @[500px]:px-3 px-2 @[500px]:text-sm text-xs"
+          onModelSelectionChangeAction={onModelSelectionChange}
           selectedModelId={selectedModelId}
           selectedModelSelection={selectedModelSelection}
-          onModelSelectionChangeAction={onModelSelectionChange}
         />
         <ConnectorsDropdown />
         <ResponsiveTools

package/templates/chat-app/components/parallel-response-cards.tsx

@@ -5,6 +5,7 @@ import { LoaderCircle } from "lucide-react";
 import { memo, useMemo } from "react";
 import { Button } from "@/components/ui/button";
 import { useNavigateToMessage } from "@/hooks/use-navigate-to-message";
+import type { AppModelId } from "@/lib/ai/app-models";
 import {
   type ChatMessage,
   expandSelectedModelValue,
@@ -15,11 +16,39 @@ import { cn } from "@/lib/utils";
 import { useChatInput } from "@/providers/chat-input-provider";
 import { useChatModels } from "@/providers/chat-models-provider";
 
-function PureParallelResponseCards({
-  messageId,
-}: {
-  messageId: string;
-}) {
+function getEffectiveModelId(
+  message: {
+    metadata: { selectedModel: ChatMessage["metadata"]["selectedModel"] };
+  } | null,
+  fallbackModelId: AppModelId
+): AppModelId | undefined {
+  return message?.metadata.selectedModel
+    ? (getPrimarySelectedModelId(message.metadata.selectedModel) ?? undefined)
+    : fallbackModelId;
+}
+
+function getModelOrderIndex(
+  modelId: AppModelId | undefined,
+  models: Array<{ id: string }>
+): number {
+  if (!modelId) {
+    return Number.POSITIVE_INFINITY;
+  }
+  const index = models.findIndex((m) => m.id === modelId);
+  return index === -1 ? Number.POSITIVE_INFINITY : index;
+}
+
+function getStatusLabel(isSelected: boolean, isStreaming: boolean): string {
+  if (isSelected) {
+    return "Selected";
+  }
+  if (isStreaming) {
+    return "Generating...";
+  }
+  return "Task completed";
+}
+
+function PureParallelResponseCards({ messageId }: { messageId: string }) {
   const message = useMessageById<ChatMessage>(messageId);
   const parallelGroupInfo = useParallelGroupInfo(messageId);
   const navigateToMessage = useNavigateToMessage();
@@ -36,7 +65,9 @@ function PureParallelResponseCards({
       return [];
     }
 
-    const requestedModelIds = expandSelectedModelValue(message.metadata.selectedModel);
+    const requestedModelIds = expandSelectedModelValue(
+      message.metadata.selectedModel
+    );
 
     return requestedModelIds.map((modelId, parallelIndex) => {
       const actualMessage = parallelGroupInfo?.messages.find(
@@ -53,24 +84,14 @@ function PureParallelResponseCards({
 
   const sortedCardSlots = useMemo(() => {
     return [...cardSlots].sort((left, right) => {
-      const leftModelId =
-        left.message?.metadata.selectedModel
-          ? getPrimarySelectedModelId(left.message.metadata.selectedModel)
-          : left.modelId;
-      const rightModelId =
-        right.message?.metadata.selectedModel
-          ? getPrimarySelectedModelId(right.message.metadata.selectedModel)
-          : right.modelId;
-
-      const leftIndex = leftModelId
-        ? models.findIndex((m) => m.id === leftModelId)
-        : -1;
-      const rightIndex = rightModelId
-        ? models.findIndex((m) => m.id === rightModelId)
-        : -1;
-
-      const leftOrder = leftIndex === -1 ? Infinity : leftIndex;
-      const rightOrder = rightIndex === -1 ? Infinity : rightIndex;
+      const leftOrder = getModelOrderIndex(
+        getEffectiveModelId(left.message, left.modelId),
+        models
+      );
+      const rightOrder = getModelOrderIndex(
+        getEffectiveModelId(right.message, right.modelId),
+        models
+      );
 
       if (leftOrder !== rightOrder) {
         return leftOrder - rightOrder;
@@ -105,20 +126,15 @@ function PureParallelResponseCards({
   return (
     <div className="mt-3 flex flex-wrap justify-end gap-2">
       {sortedCardSlots.map((slot) => {
-        const modelId =
-          slot.message?.metadata.selectedModel
-            ? getPrimarySelectedModelId(slot.message.metadata.selectedModel)
-            : slot.modelId;
-        const modelName = modelId ? getModelById(modelId)?.name ?? modelId : "Model";
+        const modelId = getEffectiveModelId(slot.message, slot.modelId);
+        const modelName = modelId
+          ? (getModelById(modelId)?.name ?? modelId)
+          : "Model";
         const isSelected = selectedParallelIndex === slot.parallelIndex;
         const isStreaming = slot.message
           ? slot.message.metadata.activeStreamId !== null
           : true;
-        const statusLabel = isSelected
-          ? "Selected"
-          : isStreaming
-            ? "Generating..."
-            : "Task completed";
+        const statusLabel = getStatusLabel(isSelected, isStreaming);
 
         return (
           <Button
@@ -141,7 +157,9 @@ function PureParallelResponseCards({
           >
             <span className="font-medium text-sm">{modelName}</span>
             <span className="flex items-center gap-1 text-muted-foreground text-xs">
-              {isStreaming ? <LoaderCircle className="size-3 animate-spin" /> : null}
+              {isStreaming ? (
+                <LoaderCircle className="size-3 animate-spin" />
+              ) : null}
               {statusLabel}
             </span>
           </Button>

package/templates/chat-app/components/part/code-execution.tsx

@@ -33,7 +33,12 @@ function isPngChart(input: unknown): input is PngChart {
 }
 
 export function CodeExecution({ tool }: { tool: CodeExecutionTool }) {
-  const args = tool.input ?? { code: "", title: "", icon: "default" };
+  const args = tool.input ?? {
+    code: "",
+    title: "",
+    language: "python",
+    icon: "default",
+  };
   const result = tool.state === "output-available" ? tool.output : null;
   const chart: BaseChart | null =
     result && isBaseChart(result.chart) ? result.chart : null;
@@ -41,11 +46,12 @@ export function CodeExecution({ tool }: { tool: CodeExecutionTool }) {
     result && isPngChart(result.chart) ? result.chart : null;
   const code = typeof args.code === "string" ? args.code : "";
   const title = typeof args.title === "string" ? args.title : "";
+  const language = args.language === "javascript" ? "javascript" : "python";
   return (
     <div className="space-y-6">
       <SandboxComposed
         code={code}
-        language="python"
+        language={language}
         output={result?.message}
         state={tool.state}
         title={title}

package/templates/chat-app/components/part/document-common.tsx

@@ -128,7 +128,7 @@ function PureDocumentToolCall({
       type="button"
     >
       <div className="flex flex-row items-start gap-3">
-        <div className="mt-1 text-zinc-500">
+        <div className="mt-1 text-muted-foreground">
           {(() => {
             if (type === "create") {
               return <File size={16} />;

package/templates/chat-app/components/part/document-preview.tsx

@@ -155,7 +155,7 @@ const LoadingSkeleton = ({
   artifactKind: ArtifactKind;
 }) => (
   <div className="w-full">
-    <div className="flex h-[57px] flex-row items-center justify-between gap-2 rounded-t-2xl border border-b-0 p-4 dark:border-zinc-700 dark:bg-muted">
+    <div className="flex h-[57px] flex-row items-center justify-between gap-2 rounded-t-2xl border border-b-0 bg-muted p-4">
       <div className="flex flex-row items-center gap-3">
         <div className="text-muted-foreground">
           <div className="size-4 animate-pulse rounded-md bg-muted-foreground/20" />
@@ -167,7 +167,7 @@ const LoadingSkeleton = ({
       </div>
     </div>
 
-    <div className="overflow-y-scroll rounded-b-2xl border border-t-0 bg-muted p-8 pt-4 dark:border-zinc-700">
+    <div className="overflow-y-scroll rounded-b-2xl border border-t-0 bg-muted p-8 pt-4">
       <InlineDocumentSkeleton />
     </div>
   </div>
@@ -217,7 +217,7 @@ const PureHitboxLayer = ({
       role="presentation"
     >
       <div className="flex w-full items-center justify-end p-4">
-        <div className="absolute top-[13px] right-[9px] rounded-md p-2 hover:bg-zinc-100 dark:hover:bg-zinc-700">
+        <div className="absolute top-[13px] right-[9px] rounded-md p-2 hover:bg-accent">
           <Maximize size={16} />
         </div>
       </div>
@@ -257,7 +257,7 @@ const PureDocumentHeader = ({
   isStreaming: boolean;
   type: "create" | "update";
 }) => (
-  <div className="flex flex-row items-start justify-between gap-2 rounded-t-2xl border border-b-0 p-4 sm:items-center dark:border-zinc-700 dark:bg-muted">
+  <div className="flex flex-row items-start justify-between gap-2 rounded-t-2xl border border-b-0 bg-muted p-4 sm:items-center">
     <div className="flex flex-row items-start gap-3 sm:items-center">
       <div className="text-muted-foreground">
         {(() => {
@@ -299,7 +299,7 @@ const DocumentContent = ({ document }: { document: Document }) => {
   const { artifact } = useArtifact();
 
   const containerClassName = cn(
-    "h-[257px] overflow-y-scroll rounded-b-2xl border border-t-0 dark:border-zinc-700 dark:bg-muted",
+    "h-[257px] overflow-y-scroll rounded-b-2xl border border-t-0 bg-muted",
     {
       "p-4 sm:px-14 sm:py-16": document.kind === "text",
       "p-0": document.kind === "code",

package/templates/chat-app/components/part/retrieve-url.tsx

@@ -12,17 +12,17 @@ export type RetrieveUrlTool = Extract<
 
 function LoadingState() {
   return (
-    <div className="my-4 rounded-xl border border-neutral-200 bg-linear-to-b from-white to-neutral-50 p-4 dark:border-neutral-800 dark:from-neutral-900 dark:to-neutral-900/90">
+    <div className="my-4 rounded-xl border border-border bg-card p-4">
       <div className="flex items-center gap-4">
         <div className="relative h-10 w-10">
           <div className="absolute inset-0 animate-pulse rounded-full bg-primary/10" />
           <Globe className="absolute inset-0 m-auto h-5 w-5 text-primary/70" />
         </div>
         <div className="flex-1 space-y-2">
-          <div className="h-4 w-36 animate-pulse rounded-md bg-neutral-200 dark:bg-neutral-800" />
+          <div className="h-4 w-36 animate-pulse rounded-md bg-muted-foreground/20" />
           <div className="space-y-1.5">
-            <div className="h-3 w-full animate-pulse rounded-md bg-neutral-100 dark:bg-neutral-800/50" />
-            <div className="h-3 w-2/3 animate-pulse rounded-md bg-neutral-100 dark:bg-neutral-800/50" />
+            <div className="h-3 w-full animate-pulse rounded-md bg-muted-foreground/15" />
+            <div className="h-3 w-2/3 animate-pulse rounded-md bg-muted-foreground/15" />
           </div>
         </div>
       </div>
@@ -86,10 +86,10 @@ function RetrievedContentHeader({ firstItem }: { firstItem: unknown }) {
           />
         </div>
         <div className="min-w-0 flex-1 space-y-2">
-          <h2 className="truncate font-semibold text-lg text-neutral-900 tracking-tight dark:text-neutral-100">
+          <h2 className="truncate font-semibold text-foreground text-lg tracking-tight">
             {title}
           </h2>
-          <p className="line-clamp-2 text-neutral-600 text-sm dark:text-neutral-400">
+          <p className="line-clamp-2 text-muted-foreground text-sm">
             {description}
           </p>
           <div className="flex items-center gap-3">
@@ -97,7 +97,7 @@ function RetrievedContentHeader({ firstItem }: { firstItem: unknown }) {
               {language}
             </span>
             <a
-              className="inline-flex items-center gap-1.5 text-neutral-500 text-xs transition-colors hover:text-primary"
+              className="inline-flex items-center gap-1.5 text-muted-foreground text-xs transition-colors hover:text-primary"
               href={url || "#"}
               rel="noopener noreferrer"
               target="_blank"
@@ -116,16 +116,16 @@ function RetrievedContentDetails({ firstItem }: { firstItem: unknown }) {
   const content = getItemProperty(firstItem, "content", "No content available");
 
   return (
-    <div className="border-neutral-200 border-t dark:border-neutral-800">
+    <div className="border-border border-t">
       <details className="group">
-        <summary className="flex w-full cursor-pointer items-center justify-between px-4 py-2 text-neutral-700 text-sm transition-colors hover:bg-neutral-50 dark:text-neutral-300 dark:hover:bg-neutral-800/50">
+        <summary className="flex w-full cursor-pointer items-center justify-between px-4 py-2 text-muted-foreground text-sm transition-colors hover:bg-muted">
           <div className="flex items-center gap-2">
-            <TextIcon className="h-4 w-4 text-neutral-400" />
+            <TextIcon className="h-4 w-4 text-muted-foreground" />
             <span>View content</span>
           </div>
           <ChevronDown className="h-4 w-4 transition-transform duration-200 group-open:rotate-180" />
         </summary>
-        <div className="max-h-[50vh] overflow-y-auto bg-neutral-50/50 p-4 dark:bg-neutral-800/30">
+        <div className="max-h-[50vh] overflow-y-auto bg-muted/50 p-4">
           <div className="prose prose-neutral dark:prose-invert prose-sm max-w-none">
             <ReactMarkdown>{content}</ReactMarkdown>
           </div>
@@ -173,7 +173,7 @@ export function RetrieveUrl({ tool }: { tool: RetrieveUrlTool }) {
   }
 
   return (
-    <div className="my-4 overflow-hidden rounded-xl border border-neutral-200 bg-linear-to-b from-white to-neutral-50 dark:border-neutral-800 dark:from-neutral-900 dark:to-neutral-900/90">
+    <div className="my-4 overflow-hidden rounded-xl border border-border bg-card">
       <RetrievedContentHeader firstItem={firstItem} />
       <RetrievedContentDetails firstItem={firstItem} />
     </div>

package/templates/chat-app/components/part/text-message-part.tsx

@@ -4,13 +4,17 @@ import { memo } from "react";
 import { Response } from "../ai-elements/response";
 
 export const TextMessagePart = memo(
-	({ text, isLoading }: { text: string; isLoading: boolean }) => (
-		<Response
-			animated
-			isAnimating={isLoading}
-			mode={isLoading ? "streaming" : "static"}
-		>
-			{text}
-		</Response>
-	),
+  ({ text, isLoading }: { text: string; isLoading: boolean }) => (
+    <Response
+      animated={{
+        duration: 200, // milliseconds (default: 150)
+        stagger: 0,
+      }}
+      isAnimating={isLoading}
+      linkSafety={{ enabled: false }}
+      mode={isLoading ? "streaming" : "static"}
+    >
+      {text}
+    </Response>
+  )
 );

package/templates/chat-app/components/project-chat-item.tsx

@@ -75,7 +75,7 @@ export function ProjectChatItem({
                 <ShareMenuItem onShare={() => setShareDialogOpen(true)} />
 
                 <DropdownMenuItem
-                  className="cursor-pointer text-destructive focus:bg-destructive/15 focus:text-destructive dark:text-red-500"
+                  className="cursor-pointer text-destructive focus:bg-destructive/15 focus:text-destructive"
                   onSelect={() => onDelete(chat.id)}
                 >
                   <Trash2 size={16} />

package/templates/chat-app/components/project-menu-items.tsx

@@ -19,7 +19,7 @@ export function ProjectMenuItems({
         <span>Rename</span>
       </DropdownMenuItem>
       <DropdownMenuItem
-        className="cursor-pointer text-destructive focus:bg-destructive/15 focus:text-destructive dark:text-red-500"
+        className="cursor-pointer text-destructive focus:bg-destructive/15 focus:text-destructive"
         onSelect={onDelete}
       >
         <Trash2 size={16} />

package/templates/chat-app/components/research-task.tsx

@@ -71,7 +71,7 @@ export const ResearchTask = ({
           {update.type === "web" && update.status === "running" && (
             <div className="py-2">
               <div className="flex items-center gap-3">
-                <Loader2 className="size-4 animate-spin text-neutral-500" />
+                <Loader2 className="size-4 animate-spin text-muted-foreground" />
                 <p className="text-xsize-neutral-500">Searching the web...</p>
               </div>
             </div>

package/templates/chat-app/components/research-tasks.tsx

@@ -11,7 +11,7 @@ export const ResearchTasks = ({ updates }: { updates: ResearchUpdate[] }) => (
     {updates.map((update, index) => (
       <StepWrapper
         isLast={index === updates.length - 1}
-        key={`${update.type}-${index}`}
+        key={update.toolCallId}
         update={update}
       >
         <ResearchTask

package/templates/chat-app/components/retry-button.tsx

@@ -7,7 +7,7 @@ import { RefreshCcw } from "lucide-react";
 import { useCallback } from "react";
 import { toast } from "sonner";
 import { Action } from "@/components/ai-elements/actions";
-import { getPrimarySelectedModelId, type ChatMessage } from "@/lib/ai/types";
+import { type ChatMessage, getPrimarySelectedModelId } from "@/lib/ai/types";
 
 export function RetryButton({
   messageId,

package/templates/chat-app/components/sandbox.tsx

@@ -38,7 +38,7 @@ export function SandboxComposed({
       <SandboxHeader state={state} title={title} />
       <SandboxContent>
         <SandboxTabs onValueChange={setActiveTab} value={activeTab}>
-          <div className="flex items-center border-neutral-200 border-b dark:border-neutral-800">
+          <div className="flex items-center border-border border-b">
             <SandboxTabsList>
               <SandboxTabsTrigger value="code">Code</SandboxTabsTrigger>
               <SandboxTabsTrigger value="output">Output</SandboxTabsTrigger>

package/templates/chat-app/components/sheet-editor.tsx

@@ -57,8 +57,8 @@ const PureSpreadsheetEditor = ({
       frozen: true,
       width: 50,
       renderCell: ({ rowIdx }: { rowIdx: number }) => rowIdx + 1,
-      cellClass: "border-t border-r dark:bg-zinc-950 dark:text-zinc-50",
-      headerCellClass: "border-t border-r dark:bg-zinc-900 dark:text-zinc-50",
+      cellClass: "border-t border-r bg-background text-foreground",
+      headerCellClass: "border-t border-r bg-muted text-foreground",
     };
 
     const dataColumns = Array.from({ length: MIN_COLS }, (_, i) => ({
@@ -66,10 +66,10 @@ const PureSpreadsheetEditor = ({
       name: String.fromCharCode(65 + i),
       renderEditCell: isReadonly ? undefined : textEditor,
       width: 120,
-      cellClass: cn("border-t dark:bg-zinc-950 dark:text-zinc-50", {
+      cellClass: cn("border-t bg-background text-foreground", {
         "border-l": i !== 0,
       }),
-      headerCellClass: cn("border-t dark:bg-zinc-900 dark:text-zinc-50", {
+      headerCellClass: cn("border-t bg-muted text-foreground", {
         "border-l": i !== 0,
       }),
     }));
@@ -80,7 +80,7 @@ const PureSpreadsheetEditor = ({
   const initialRows = useMemo(
     () =>
       parseData.map((row, rowIndex) => {
-        const rowData: any = {
+        const rowData: Record<string, string | number> = {
           id: rowIndex,
           rowNumber: rowIndex + 1,
         };
@@ -100,9 +100,9 @@ const PureSpreadsheetEditor = ({
     setLocalRows(initialRows);
   }, [initialRows]);
 
-  const generateCsv = (data: any[][]) => unparse(data);
+  const generateCsv = (data: Array<Array<string | number>>) => unparse(data);
 
-  const handleRowsChange = (newRows: any[]) => {
+  const handleRowsChange = (newRows: Record<string, string | number>[]) => {
     if (isReadonly) {
       return;
     }

package/templates/chat-app/components/sidebar-chats-list.tsx

@@ -106,7 +106,7 @@ export function SidebarChatsList() {
 
   if (chats.length === 0) {
     return (
-      <div className="flex w-full flex-row items-center justify-center gap-2 px-2 py-4 text-sm text-zinc-500">
+      <div className="flex w-full flex-row items-center justify-center gap-2 px-2 py-4 text-muted-foreground text-sm">
         Start chatting to see your conversation history!
       </div>
     );

package/templates/chat-app/components/sidebar-toggle.tsx

@@ -11,14 +11,27 @@ import {
 import { Button } from "./ui/button";
 
 export function SidebarToggle({
-  className: _className,
+  className,
+  onClick,
+  ...props
 }: ComponentProps<typeof SidebarTrigger>) {
   const { toggleSidebar } = useSidebar();
 
   return (
     <Tooltip>
       <TooltipTrigger asChild>
-        <Button onClick={toggleSidebar} size="icon" variant="ghost">
+        <Button
+          {...props}
+          className={className}
+          onClick={(event) => {
+            onClick?.(event);
+            if (!event.defaultPrevented) {
+              toggleSidebar();
+            }
+          }}
+          size="icon"
+          variant="ghost"
+        >
           <PanelLeft size={16} />
         </Button>
       </TooltipTrigger>

package/templates/chat-app/components/sidebar-top-row.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { PanelLeft } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 import { SidebarToggle } from "@/components/sidebar-toggle";
@@ -8,16 +9,13 @@ import { config } from "@/lib/config";
 import { useChatId } from "@/providers/chat-id-provider";
 
 export function SidebarTopRow() {
-  const { setOpenMobile, open, openMobile } = useSidebar();
+  const { isMobile, openMobile, setOpenMobile, state, toggleSidebar } =
+    useSidebar();
   const { refreshChatID } = useChatId();
-  const isExpanded = open || openMobile;
+  const isExpanded = isMobile ? openMobile : state === "expanded";
 
   return (
-    <div
-      className={`flex w-full items-center ${
-        isExpanded ? "justify-between gap-2" : "justify-start"
-      }`}
-    >
+    <div className="flex w-full items-center justify-between gap-2">
       {isExpanded ? (
         <Link
           className="flex flex-row items-center gap-2"
@@ -30,16 +28,33 @@ export function SidebarTopRow() {
           <span className="flex cursor-pointer items-center gap-2 rounded-md p-1 font-semibold text-lg hover:bg-muted">
             <Image
               alt={config.appName}
-              className="h-6 w-6"
-              height={24}
+              className="h-5 w-5"
+              height={20}
               src="/icon.svg"
-              width={24}
+              width={20}
             />
             {config.appName}
           </span>
         </Link>
-      ) : null}
-      <SidebarToggle className="md:h-fit md:px-2" />
+      ) : (
+        <button
+          aria-label="Expand sidebar"
+          className="group/logo relative flex size-8 items-center justify-center rounded-md hover:bg-muted"
+          onClick={toggleSidebar}
+          type="button"
+        >
+          <Image
+            alt={config.appName}
+            className="h-5 w-5 transition-opacity duration-150 group-hover/logo:opacity-0"
+            height={20}
+            src="/icon.svg"
+            width={20}
+          />
+          <PanelLeft className="absolute size-4 opacity-0 transition-opacity duration-150 group-hover/logo:opacity-100" />
+        </button>
+      )}
+
+      {isExpanded && <SidebarToggle className="md:h-fit md:px-2" />}
     </div>
   );
 }

package/templates/chat-app/components/sidebar-user-nav.tsx

@@ -30,6 +30,7 @@ import {
 } from "@/components/ui/sidebar";
 import { useGetCredits } from "@/hooks/chat-sync-hooks";
 import authClient from "@/lib/auth-client";
+import { isElectronRenderer } from "@/lib/electron-auth";
 import { cn } from "@/lib/utils";
 import { useSession } from "@/providers/session-provider";
 
@@ -149,7 +150,15 @@ export function SidebarUserNav() {
             <DropdownMenuSeparator />
             <DropdownMenuItem
               onClick={async () => {
-                await authClient.signOut();
+                if (
+                  isElectronRenderer() &&
+                  typeof window.signOut === "function"
+                ) {
+                  await window.signOut();
+                  await window.electronAPI?.syncAuthSession?.();
+                } else {
+                  await authClient.signOut();
+                }
                 window.location.href = "/";
               }}
             >