@chat-js/cli 0.2.1 → 0.4.0

package/templates/chat-app/components/feedback-actions.tsx

@@ -2,7 +2,7 @@ import { useMessageById } from "@ai-sdk-tools/store";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { ThumbsDown, ThumbsUp } from "lucide-react";
 import { toast } from "sonner";
-import type { ChatMessage } from "@/lib/ai/types";
+import { getPrimarySelectedModelId, type ChatMessage } from "@/lib/ai/types";
 import type { Vote } from "@/lib/db/schema";
 import { useSession } from "@/providers/session-provider";
 import { useTRPC } from "@/trpc/react";
@@ -97,9 +97,13 @@ export function FeedbackActions({
 
 function SelectedModelId({ messageId }: { messageId: string }) {
   const message = useMessageById<ChatMessage>(messageId);
-  return message?.metadata?.selectedModel ? (
+  const selectedModelId = getPrimarySelectedModelId(
+    message?.metadata?.selectedModel
+  );
+
+  return selectedModelId ? (
     <div className="ml-2 flex items-center">
-      <Tag>{message.metadata.selectedModel}</Tag>
+      <Tag>{selectedModelId}</Tag>
     </div>
   ) : null;
 }

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

@@ -2,7 +2,10 @@
 import { useChatStatus } from "@ai-sdk-tools/store";
 import { type Dispatch, type SetStateAction, useCallback } from "react";
 import type { ModelId } from "@/lib/ai/app-models";
-import type { ChatMessage } from "@/lib/ai/types";
+import {
+  getPrimarySelectedModelId,
+  type ChatMessage,
+} from "@/lib/ai/types";
 import {
   getAttachmentsFromMessage,
   getTextContentFromMessage,
@@ -52,7 +55,8 @@ export function MessageEditor(
   const initialAttachments = getAttachmentsFromMessage(props.message);
 
   // Use selectedModel from the message metadata, or fall back to current selected model
-  const messageSelectedModel = props.message.metadata?.selectedModel as ModelId;
+  const messageSelectedModel = props.message.metadata?.selectedModel;
+  const primaryModelId = getPrimarySelectedModelId(messageSelectedModel) as ModelId | null;
   const { parentMessageId: _parentMessageId, ...rest } = props;
   return (
     <ChatInputProvider
@@ -61,7 +65,8 @@ export function MessageEditor(
       initialTool={props.message.metadata?.selectedTool}
       key={`edit-${props.message.id}`}
       localStorageEnabled={false}
-      overrideModelId={messageSelectedModel || undefined}
+      overrideModelId={primaryModelId || undefined}
+      overrideModelSelection={messageSelectedModel || undefined}
     >
       <MessageEditorContent
         {...rest}

package/templates/chat-app/components/message-siblings.tsx

@@ -2,7 +2,11 @@ import { ChevronLeft, ChevronRight } from "lucide-react";
 import { memo } from "react";
 import { Action } from "@/components/ai-elements/actions";
 import { useNavigateToSibling } from "@/hooks/use-navigate-to-sibling";
-import { useMessageSiblingInfo } from "@/lib/stores/hooks-threads";
+import { useMessageRoleById } from "@/lib/stores/hooks-base";
+import {
+  useMessageSiblingInfo,
+  useParallelGroupInfo,
+} from "@/lib/stores/hooks-threads";
 import { useSession } from "@/providers/session-provider";
 
 function PureMessageSiblings({
@@ -15,10 +19,19 @@ function PureMessageSiblings({
   const { data: session } = useSession();
   const _isAuthenticated = !!session?.user;
 
+  const role = useMessageRoleById(messageId);
   const siblingInfo = useMessageSiblingInfo(messageId);
+  const parallelGroupInfo = useParallelGroupInfo(messageId);
   const navigateToSibling = useNavigateToSibling();
   const hasSiblings = siblingInfo && siblingInfo.siblings.length > 1;
 
+  // Hide sibling nav for assistant messages in a parallel group — those use
+  // the response cards for navigation. User messages should always show
+  // sibling nav even when they spawned parallel responses.
+  if (parallelGroupInfo && role === "assistant") {
+    return null;
+  }
+
   return (
     <div className="flex items-center justify-center gap-1">
       {hasSiblings && (