@chat-js/cli 0.3.0 → 0.4.0

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

@@ -1,7 +1,7 @@
 "use client";
 import type { UseChatHelpers } from "@ai-sdk/react";
 import { useChatActions, useChatStoreApi } from "@ai-sdk-tools/store";
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { CameraIcon, FileIcon, ImageIcon, PlusIcon } from "lucide-react";
 import type React from "react";
 import {
@@ -25,17 +25,22 @@ import {
 } from "@/components/ai-elements/prompt-input";
 import { ContextBar } from "@/components/context-bar";
 import { ContextUsageFromParent } from "@/components/context-usage";
-import { useSaveMessageMutation } from "@/hooks/chat-sync-hooks";
 import { useArtifact } from "@/hooks/use-artifact";
 import { useIsMobile } from "@/hooks/use-mobile";
 import type { AppModelId } from "@/lib/ai/app-model-id";
-import type { Attachment, ChatMessage, UiToolName } from "@/lib/ai/types";
+import {
+  expandSelectedModelValue,
+  type Attachment,
+  type ChatMessage,
+  type SelectedModelValue,
+  type UiToolName,
+} from "@/lib/ai/types";
 import { config } from "@/lib/config";
 import { processFilesForUpload } from "@/lib/files/upload-prep";
 import { useLastMessageId } from "@/lib/stores/hooks-base";
 import { useAddMessageToTree } from "@/lib/stores/hooks-threads";
 import { ANONYMOUS_LIMITS } from "@/lib/types/anonymous";
-import { cn, generateUUID } from "@/lib/utils";
+import { cn, fetchWithErrorHandlers, generateUUID } from "@/lib/utils";
 import { useChatId } from "@/providers/chat-id-provider";
 import { useChatInput } from "@/providers/chat-input-provider";
 import { useChatModels } from "@/providers/chat-models-provider";
@@ -57,6 +62,16 @@ import { LimitDisplay } from "./upgrade-cta/limit-display";
 import { LoginPrompt } from "./upgrade-cta/login-prompt";
 
 const PROJECT_ROUTE_REGEX = /^\/project\/([^/]+)$/;
+const PROJECT_CHAT_ROUTE_REGEX = /^\/project\/([^/]+)(?:\/chat\/[^/]+)?$/;
+
+interface ParallelRequestSpec {
+  assistantMessageId: string;
+  createdAt: Date;
+  isPrimary: boolean;
+  modelId: AppModelId;
+  parallelGroupId: string;
+  parallelIndex: number;
+}
 
 /** Derive accept string for images only */
 function getAcceptImages(acceptedTypes: Record<string, string[]>): string {
@@ -100,8 +115,8 @@ function PureMultimodalInput({
   const { artifact, closeArtifact } = useArtifact();
   const { data: session } = useSession();
   const trpc = useTRPC();
+  const queryClient = useQueryClient();
   const isMobile = useIsMobile();
-  const { mutate: saveChatMessage } = useSaveMessageMutation();
   const addMessageToTree = useAddMessageToTree();
   useChatId();
   const {
@@ -117,7 +132,9 @@ function PureMultimodalInput({
     attachments,
     setAttachments,
     selectedModelId,
+    selectedModelSelection,
     handleModelChange,
+    handleModelSelectionChange,
     getInputValue,
     handleInputChange,
     getInitialInput,
@@ -135,6 +152,18 @@ function PureMultimodalInput({
   const stopStreamMutation = useMutation(
     trpc.chat.stopStream.mutationOptions()
   );
+  const normalizedSelectedModel = useMemo<SelectedModelValue>(() => {
+    const expanded = expandSelectedModelValue(selectedModelSelection);
+
+    return expanded.length > 1 ? selectedModelSelection : selectedModelId;
+  }, [selectedModelId, selectedModelSelection]);
+  const requestedModelIds = useMemo(
+    () => expandSelectedModelValue(normalizedSelectedModel),
+    [normalizedSelectedModel]
+  );
+  const parallelResponsesEnabled = config.features.parallelResponses;
+  const isParallelModelRequest =
+    parallelResponsesEnabled && requestedModelIds.length > 1;
 
   // Attachment configuration from site config
   const { maxBytes, maxDimension, acceptedTypes } = config.attachments;
@@ -181,6 +210,18 @@ function PureMultimodalInput({
   const submission = useMemo(():
     | { enabled: false; message: string }
     | { enabled: true } => {
+    if (isParallelModelRequest && !session?.user) {
+      return {
+        enabled: false,
+        message: "Log in to use multiple models",
+      };
+    }
+    if (isParallelModelRequest && attachments.length > 0) {
+      return {
+        enabled: false,
+        message: "Multiple models with attachments are not supported yet",
+      };
+    }
     if (isModelDisallowedForAnonymous) {
       return { enabled: false, message: "Log in to use this model" };
     }
@@ -203,7 +244,15 @@ function PureMultimodalInput({
       };
     }
     return { enabled: true };
-  }, [isEmpty, isModelDisallowedForAnonymous, status, uploadQueue.length]);
+  }, [
+    attachments.length,
+    isEmpty,
+    isModelDisallowedForAnonymous,
+    isParallelModelRequest,
+    session?.user,
+    status,
+    uploadQueue.length,
+  ]);
 
   // Helper function to process and validate files
   const processFiles = useCallback(
@@ -275,6 +324,11 @@ function PureMultimodalInput({
     [session?.user]
   );
 
+  const getCurrentProjectId = useCallback(() => {
+    const projectMatch = window.location.pathname.match(PROJECT_CHAT_ROUTE_REGEX);
+    return projectMatch?.[1];
+  }, []);
+
   // Trim messages in edit mode
   const trimMessagesInEditMode = useCallback(
     (parentId: string | null) => {
@@ -319,11 +373,122 @@ function PureMultimodalInput({
     ]
   );
 
+  const invalidatePersistedMessages = useCallback(async () => {
+    await queryClient.invalidateQueries({
+      queryKey: trpc.chat.getChatMessages.queryKey({ chatId }),
+    });
+  }, [chatId, queryClient, trpc]);
+
+  const drainSecondaryParallelRequest = useCallback(
+    async ({
+      message,
+      requestSpec,
+    }: {
+      message: ChatMessage;
+      requestSpec: ParallelRequestSpec;
+    }) => {
+      const response = await fetchWithErrorHandlers("/api/chat", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          id: chatId,
+          message,
+          prevMessages: [],
+          projectId: getCurrentProjectId(),
+          assistantMessageId: requestSpec.assistantMessageId,
+          selectedModelId: requestSpec.modelId,
+          parallelGroupId: requestSpec.parallelGroupId,
+          parallelIndex: requestSpec.parallelIndex,
+          isPrimaryParallel: false,
+        }),
+      });
+
+      if (!response.body) {
+        return;
+      }
+
+      const reader = response.body.getReader();
+
+      while (true) {
+        const { done } = await reader.read();
+
+        if (done) {
+          break;
+        }
+      }
+    },
+    [chatId, getCurrentProjectId]
+  );
+
+  const runParallelSecondaryRequests = useCallback(
+    async ({
+      message,
+      secondaryRequestSpecs,
+    }: {
+      message: ChatMessage;
+      secondaryRequestSpecs: ParallelRequestSpec[];
+    }) => {
+      await fetchWithErrorHandlers("/api/chat/prepare", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          id: chatId,
+          message,
+          projectId: getCurrentProjectId(),
+        }),
+      });
+
+      const results = await Promise.allSettled(
+        secondaryRequestSpecs.map((requestSpec) =>
+          drainSecondaryParallelRequest({ message, requestSpec })
+        )
+      );
+
+      results.forEach((result, index) => {
+        if (result.status === "fulfilled") {
+          return;
+        }
+
+        const failedRequestSpec = secondaryRequestSpecs[index];
+        if (!failedRequestSpec) {
+          return;
+        }
+
+        addMessageToTree({
+          id: failedRequestSpec.assistantMessageId,
+          parts: [],
+          role: "assistant",
+          metadata: {
+            createdAt: failedRequestSpec.createdAt,
+            parentMessageId: message.id,
+            parallelGroupId: failedRequestSpec.parallelGroupId,
+            parallelIndex: failedRequestSpec.parallelIndex,
+            isPrimaryParallel: failedRequestSpec.isPrimary,
+            selectedModel: failedRequestSpec.modelId,
+            activeStreamId: null,
+            selectedTool: undefined,
+          },
+        });
+      });
+
+      await invalidatePersistedMessages();
+    },
+    [
+      addMessageToTree,
+      chatId,
+      drainSecondaryParallelRequest,
+      getCurrentProjectId,
+      invalidatePersistedMessages,
+    ]
+  );
+
   const coreSubmitLogic = useCallback(() => {
     const input = getInputValue();
 
-    updateChatUrl(chatId);
-
     // Get the appropriate parent message ID
     const effectiveParentMessageId = isEditMode
       ? parentMessageId
@@ -334,6 +499,21 @@ function PureMultimodalInput({
       trimMessagesInEditMode(parentMessageId);
     }
 
+    const isParallelRequest = parallelResponsesEnabled && requestedModelIds.length > 1;
+    const parallelGroupId = isParallelRequest ? generateUUID() : null;
+    const requestSpecs = isParallelRequest
+      ? requestedModelIds.map(
+          (modelId, parallelIndex): ParallelRequestSpec => ({
+            assistantMessageId: generateUUID(),
+            createdAt: new Date(Date.now() + parallelIndex),
+            isPrimary: parallelIndex === 0,
+            modelId,
+            parallelGroupId: parallelGroupId || generateUUID(),
+            parallelIndex,
+          })
+        )
+      : [];
+
     const message: ChatMessage = {
       id: generateUUID(),
       parts: [
@@ -351,7 +531,10 @@ function PureMultimodalInput({
       metadata: {
         createdAt: new Date(),
         parentMessageId: effectiveParentMessageId,
-        selectedModel: selectedModelId,
+        parallelGroupId,
+        parallelIndex: null,
+        isPrimaryParallel: null,
+        selectedModel: normalizedSelectedModel,
         activeStreamId: null,
         selectedTool: selectedTool || undefined,
       },
@@ -360,10 +543,53 @@ function PureMultimodalInput({
 
     onSendMessage?.(message);
 
-    addMessageToTree(message);
-    saveChatMessage({ message, chatId });
+    const primaryRequest = requestSpecs[0];
 
-    sendMessage(message);
+    if (primaryRequest) {
+      sendMessage(message, {
+        body: {
+          assistantMessageId: primaryRequest.assistantMessageId,
+          selectedModelId: primaryRequest.modelId,
+          parallelGroupId: primaryRequest.parallelGroupId,
+          parallelIndex: primaryRequest.parallelIndex,
+          isPrimaryParallel: true,
+        },
+      });
+
+      addMessageToTree(message);
+      handleModelChange(primaryRequest.modelId);
+      for (const requestSpec of requestSpecs) {
+        addMessageToTree({
+          id: requestSpec.assistantMessageId,
+          parts: [],
+          role: "assistant",
+          metadata: {
+            createdAt: requestSpec.createdAt,
+            parentMessageId: message.id,
+            parallelGroupId: requestSpec.parallelGroupId,
+            parallelIndex: requestSpec.parallelIndex,
+            isPrimaryParallel: requestSpec.isPrimary,
+            selectedModel: requestSpec.modelId,
+            activeStreamId: `pending:${requestSpec.assistantMessageId}`,
+            selectedTool: undefined,
+          },
+        });
+      }
+
+      void 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();
+      });
+    } else {
+      sendMessage(message);
+      addMessageToTree(message);
+    }
+
+    updateChatUrl(chatId);
 
     // Refocus after submit
     if (!isMobile) {
@@ -374,15 +600,19 @@ function PureMultimodalInput({
     attachments,
     isMobile,
     chatId,
+    handleModelChange,
+    invalidatePersistedMessages,
     selectedTool,
     isEditMode,
     getInputValue,
-    saveChatMessage,
     parentMessageId,
-    selectedModelId,
+    normalizedSelectedModel,
     editorRef,
     lastMessageId,
     onSendMessage,
+    parallelResponsesEnabled,
+    requestedModelIds,
+    runParallelSecondaryRequests,
     sendMessage,
     updateChatUrl,
     trimMessagesInEditMode,
@@ -680,10 +910,11 @@ function PureMultimodalInput({
             acceptImages={acceptImages}
             attachmentsEnabled={attachmentsEnabled}
             fileInputRef={fileInputRef}
-            onModelChange={handleModelChange}
+            onModelSelectionChange={handleModelSelectionChange}
             onStop={handleStop}
             parentMessageId={parentMessageId}
             selectedModelId={selectedModelId}
+            selectedModelSelection={selectedModelSelection}
             selectedTool={selectedTool}
             setSelectedTool={setSelectedTool}
             status={status}
@@ -831,7 +1062,8 @@ const AttachmentsButton = memo(PureAttachmentsButton);
 
 function PureChatInputBottomControls({
   selectedModelId,
-  onModelChange,
+  selectedModelSelection,
+  onModelSelectionChange,
   selectedTool,
   setSelectedTool,
   fileInputRef,
@@ -846,7 +1078,8 @@ function PureChatInputBottomControls({
   onStop,
 }: {
   selectedModelId: AppModelId;
-  onModelChange: (modelId: AppModelId) => void;
+  selectedModelSelection: SelectedModelValue;
+  onModelSelectionChange: (selection: SelectedModelValue) => void;
   selectedTool: UiToolName | null;
   setSelectedTool: Dispatch<SetStateAction<UiToolName | null>>;
   fileInputRef: React.MutableRefObject<HTMLInputElement | null>;
@@ -874,8 +1107,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"
-          onModelChangeAction={onModelChange}
           selectedModelId={selectedModelId}
+          selectedModelSelection={selectedModelSelection}
+          onModelSelectionChangeAction={onModelSelectionChange}
         />
         <ConnectorsDropdown />
         <ResponsiveTools

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

@@ -0,0 +1,157 @@
+"use client";
+
+import { useMessageById } from "@ai-sdk-tools/store";
+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 ChatMessage,
+  expandSelectedModelValue,
+  getPrimarySelectedModelId,
+} from "@/lib/ai/types";
+import { useParallelGroupInfo } from "@/lib/stores/hooks-threads";
+import { cn } from "@/lib/utils";
+import { useChatInput } from "@/providers/chat-input-provider";
+import { useChatModels } from "@/providers/chat-models-provider";
+
+function PureParallelResponseCards({
+  messageId,
+}: {
+  messageId: string;
+}) {
+  const message = useMessageById<ChatMessage>(messageId);
+  const parallelGroupInfo = useParallelGroupInfo(messageId);
+  const navigateToMessage = useNavigateToMessage();
+  const { handleModelChange } = useChatInput();
+  const { getModelById, models } = useChatModels();
+
+  const cardSlots = useMemo(() => {
+    if (
+      !message ||
+      message.role !== "user" ||
+      !message.metadata.parallelGroupId ||
+      typeof message.metadata.selectedModel === "string"
+    ) {
+      return [];
+    }
+
+    const requestedModelIds = expandSelectedModelValue(message.metadata.selectedModel);
+
+    return requestedModelIds.map((modelId, parallelIndex) => {
+      const actualMessage = parallelGroupInfo?.messages.find(
+        (candidate) => candidate.metadata.parallelIndex === parallelIndex
+      );
+
+      return {
+        modelId,
+        parallelIndex,
+        message: actualMessage ?? null,
+      };
+    });
+  }, [message, parallelGroupInfo]);
+
+  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;
+
+      if (leftOrder !== rightOrder) {
+        return leftOrder - rightOrder;
+      }
+
+      const leftMessageId =
+        left.message?.id ?? `${left.modelId}:${left.parallelIndex}`;
+      const rightMessageId =
+        right.message?.id ?? `${right.modelId}:${right.parallelIndex}`;
+
+      return leftMessageId.localeCompare(rightMessageId);
+    });
+  }, [cardSlots, models]);
+
+  const selectedParallelIndex = useMemo(() => {
+    if (parallelGroupInfo?.selectedMessageId) {
+      const selectedMessage = parallelGroupInfo.messages.find(
+        (candidate) => candidate.id === parallelGroupInfo.selectedMessageId
+      );
+      if (typeof selectedMessage?.metadata.parallelIndex === "number") {
+        return selectedMessage.metadata.parallelIndex;
+      }
+    }
+
+    return cardSlots.length > 0 ? 0 : null;
+  }, [cardSlots.length, parallelGroupInfo]);
+
+  if (!message || sortedCardSlots.length <= 1) {
+    return null;
+  }
+
+  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 isSelected = selectedParallelIndex === slot.parallelIndex;
+        const isStreaming = slot.message
+          ? slot.message.metadata.activeStreamId !== null
+          : true;
+        const statusLabel = isSelected
+          ? "Selected"
+          : isStreaming
+            ? "Generating..."
+            : "Task completed";
+
+        return (
+          <Button
+            className={cn(
+              "h-auto min-w-[160px] flex-col items-start gap-1 rounded-xl px-3 py-2 text-left",
+              isSelected && "border-primary bg-primary/5 text-primary"
+            )}
+            disabled={!slot.message}
+            key={`${message.id}-${slot.parallelIndex}`}
+            onClick={() => {
+              if (slot.message) {
+                navigateToMessage(slot.message.id);
+                if (modelId) {
+                  handleModelChange(modelId);
+                }
+              }
+            }}
+            type="button"
+            variant="outline"
+          >
+            <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}
+              {statusLabel}
+            </span>
+          </Button>
+        );
+      })}
+    </div>
+  );
+}
+
+export const ParallelResponseCards = memo(
+  PureParallelResponseCards,
+  (prevProps, nextProps) => prevProps.messageId === nextProps.messageId
+);

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

@@ -4,9 +4,13 @@ import { memo } from "react";
 import { Response } from "../ai-elements/response";
 
 export const TextMessagePart = memo(
-  ({ text, isLoading }: { text: string; isLoading: boolean }) => (
-    <Response isAnimating={isLoading} mode={isLoading ? "streaming" : "static"}>
-      {text}
-    </Response>
-  )
+	({ text, isLoading }: { text: string; isLoading: boolean }) => (
+		<Response
+			animated
+			isAnimating={isLoading}
+			mode={isLoading ? "streaming" : "static"}
+		>
+			{text}
+		</Response>
+	),
 );

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 type { ChatMessage } from "@/lib/ai/types";
+import { getPrimarySelectedModelId, type ChatMessage } from "@/lib/ai/types";
 
 export function RetryButton({
   messageId,
@@ -28,16 +28,20 @@ export function RetryButton({
 
     // Find the current message (AI response) and its parent (user message)
     const currentMessages = chatStore.getState().messages;
-    const currentMessageIdx = currentMessages.findIndex(
-      (msg) => msg.id === messageId
-    );
-    if (currentMessageIdx === -1) {
+    const currentMessage = currentMessages.find((msg) => msg.id === messageId);
+    if (!currentMessage) {
       toast.error("Cannot find the message to retry");
       return;
     }
 
-    // Find the parent user message (should be the message before the AI response)
-    const parentMessageIdx = currentMessageIdx - 1;
+    const currentMessageIdx = currentMessages.findIndex(
+      (msg) => msg.id === messageId
+    );
+    const parentMessageId = currentMessage.metadata?.parentMessageId ?? null;
+    const parentMessageIdx = parentMessageId
+      ? currentMessages.findIndex((msg) => msg.id === parentMessageId)
+      : currentMessageIdx - 1;
+
     if (parentMessageIdx < 0) {
       toast.error("Cannot find the user message to retry");
       return;
@@ -48,6 +52,16 @@ export function RetryButton({
       toast.error("Parent message is not from user");
       return;
     }
+
+    const retryModelId =
+      getPrimarySelectedModelId(currentMessage.metadata?.selectedModel) ||
+      getPrimarySelectedModelId(parentMessage.metadata?.selectedModel);
+
+    if (!retryModelId) {
+      toast.error("Cannot determine which model to retry");
+      return;
+    }
+
     setMessages(currentMessages.slice(0, parentMessageIdx));
 
     // Resend the parent user message
@@ -57,7 +71,10 @@ export function RetryButton({
         metadata: {
           ...parentMessage.metadata,
           createdAt: parentMessage.metadata?.createdAt || new Date(),
-          selectedModel: parentMessage.metadata?.selectedModel || "",
+          parallelGroupId: null,
+          parallelIndex: null,
+          isPrimaryParallel: null,
+          selectedModel: retryModelId,
           parentMessageId: parentMessage.metadata?.parentMessageId || null,
         },
       },