@chat-js/cli 0.3.0 → 0.4.0

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

@@ -8,142 +8,153 @@ import { AttachmentList } from "./attachment-list";
 import { ImageModal } from "./image-modal";
 import { MessageActions } from "./message-actions";
 import { MessageEditor } from "./message-editor";
+import { ParallelResponseCards } from "./parallel-response-cards";
 
 export interface BaseMessageProps {
-  isLoading: boolean;
-  isReadonly: boolean;
-  messageId: string;
-  parentMessageId: string | null;
+	isLoading: boolean;
+	isReadonly: boolean;
+	messageId: string;
+	parentMessageId: string | null;
 }
 
 const PureUserMessage = ({
-  messageId,
-  isLoading,
-  isReadonly,
-  parentMessageId,
+	messageId,
+	isLoading,
+	isReadonly,
+	parentMessageId,
 }: BaseMessageProps) => {
-  const chatId = useChatId();
-  const message = useMessageById<ChatMessage>(messageId);
-  const [mode, setMode] = useState<"view" | "edit">("view");
-  const [imageModal, setImageModal] = useState<{
-    isOpen: boolean;
-    imageUrl: string;
-    imageName?: string;
-  }>({ isOpen: false, imageUrl: "" });
+	const chatId = useChatId();
+	const message = useMessageById<ChatMessage>(messageId);
+	const [mode, setMode] = useState<"view" | "edit">("view");
+	const [imageModal, setImageModal] = useState<{
+		isOpen: boolean;
+		imageUrl: string;
+		imageName?: string;
+	}>({ isOpen: false, imageUrl: "" });
 
-  const handleImageClick = (imageUrl: string, imageName?: string) => {
-    setImageModal({ isOpen: true, imageUrl, imageName });
-  };
+	const handleImageClick = (imageUrl: string, imageName?: string) => {
+		setImageModal({ isOpen: true, imageUrl, imageName });
+	};
 
-  if (!message) {
-    return null;
-  }
-  const textPart = message.parts.find((part) => part.type === "text");
-  if (!(textPart && chatId)) {
-    return null;
-  }
+	if (!message) {
+		return null;
+	}
+	const textPart = message.parts.find((part) => part.type === "text");
+	if (!(textPart && chatId)) {
+		return null;
+	}
 
-  return (
-    <>
-      <Message
-        className={cn(
-          // TODO: Consider not using this max-w class override when editing is cohesive with displaying the message
-          mode === "edit" ? "max-w-full [&>div]:max-w-full" : undefined,
-          "py-1"
-        )}
-        from="user"
-      >
-        <div
-          className={cn(
-            "flex w-full flex-col gap-2",
-            message.role === "user" && mode !== "edit" && "items-end"
-          )}
-        >
-          {mode === "view" && isReadonly && (
-            <MessageContent
-              className="text-left group-[.is-user]:bg-card"
-              data-testid="message-content"
-            >
-              <AttachmentList
-                attachments={getAttachmentsFromMessage(message)}
-                onImageClick={handleImageClick}
-                testId="message-attachments"
-              />
-              <pre className="whitespace-pre-wrap font-sans">
-                {textPart.text}
-              </pre>
-            </MessageContent>
-          )}
-          {mode === "view" && !isReadonly && (
-            <button
-              className="block cursor-pointer text-left transition-opacity hover:opacity-80"
-              data-testid="message-content"
-              onClick={() => setMode("edit")}
-              type="button"
-            >
-              <MessageContent
-                className="text-left group-[.is-user]:max-w-none group-[.is-user]:bg-card"
-                data-testid="message-content"
-              >
-                <AttachmentList
-                  attachments={getAttachmentsFromMessage(message)}
-                  onImageClick={handleImageClick}
-                  testId="message-attachments"
-                />
-                <pre className="whitespace-pre-wrap font-sans">
-                  {textPart.text}
-                </pre>
-              </MessageContent>
-            </button>
-          )}
-          {mode !== "view" && (
-            <div className="flex flex-row items-start gap-2">
-              <MessageEditor
-                chatId={chatId}
-                key={message.id}
-                message={message}
-                parentMessageId={parentMessageId}
-                setMode={setMode}
-              />
-            </div>
-          )}
+	return (
+		<>
+			<Message
+				className={cn(
+					// TODO: Consider not using this max-w class override when editing is cohesive with displaying the message
+					mode === "edit" ? "max-w-full [&>div]:max-w-full" : undefined,
+					"py-1",
+				)}
+				from="user"
+			>
+				<div
+					className={cn(
+						"flex w-full flex-col gap-2",
+						message.role === "user" && mode !== "edit" && "items-end",
+					)}
+				>
+					{mode === "view" && <ParallelResponseCards messageId={message.id} />}
 
-          <div className="self-end">
-            <MessageActions
-              chatId={chatId}
-              isEditing={mode === "edit"}
-              isLoading={isLoading}
-              isReadOnly={isReadonly}
-              key={`action-${message.id}`}
-              messageId={message.id}
-              onCancelEdit={() => setMode("view")}
-              onStartEdit={() => setMode("edit")}
-            />
-          </div>
-        </div>
-      </Message>
-      <ImageModal
-        imageName={imageModal.imageName}
-        imageUrl={imageModal.imageUrl}
-        isOpen={imageModal.isOpen}
-        onClose={() => setImageModal({ isOpen: false, imageUrl: "" })}
-      />
-    </>
-  );
+					{mode === "view" && isReadonly && (
+						<MessageContent
+							className="text-left group-[.is-user]:bg-card"
+							data-testid="message-content"
+						>
+							<AttachmentList
+								attachments={getAttachmentsFromMessage(message)}
+								onImageClick={handleImageClick}
+								testId="message-attachments"
+							/>
+							<pre className="whitespace-pre-wrap font-sans">
+								{textPart.text}
+							</pre>
+						</MessageContent>
+					)}
+					{mode === "view" && !isReadonly && (
+						<button
+							className="block cursor-pointer select-text text-left transition-opacity hover:opacity-80"
+							data-testid="message-content"
+							onClick={(e) => {
+								const selection = window.getSelection();
+								if (
+									selection?.toString() &&
+									e.currentTarget.contains(selection.anchorNode)
+								)
+									return;
+								setMode("edit");
+							}}
+							type="button"
+						>
+							<MessageContent
+								className="text-left group-[.is-user]:max-w-none group-[.is-user]:bg-card"
+								data-testid="message-content"
+							>
+								<AttachmentList
+									attachments={getAttachmentsFromMessage(message)}
+									onImageClick={handleImageClick}
+									testId="message-attachments"
+								/>
+								<pre className="whitespace-pre-wrap font-sans">
+									{textPart.text}
+								</pre>
+							</MessageContent>
+						</button>
+					)}
+					{mode !== "view" && (
+						<div className="flex flex-row items-start gap-2">
+							<MessageEditor
+								chatId={chatId}
+								key={message.id}
+								message={message}
+								parentMessageId={parentMessageId}
+								setMode={setMode}
+							/>
+						</div>
+					)}
+
+					<div className="self-end">
+						<MessageActions
+							chatId={chatId}
+							isEditing={mode === "edit"}
+							isLoading={isLoading}
+							isReadOnly={isReadonly}
+							key={`action-${message.id}`}
+							messageId={message.id}
+							onCancelEdit={() => setMode("view")}
+							onStartEdit={() => setMode("edit")}
+						/>
+					</div>
+				</div>
+			</Message>
+			<ImageModal
+				imageName={imageModal.imageName}
+				imageUrl={imageModal.imageUrl}
+				isOpen={imageModal.isOpen}
+				onClose={() => setImageModal({ isOpen: false, imageUrl: "" })}
+			/>
+		</>
+	);
 };
 
 export const UserMessage = memo(PureUserMessage, (prevProps, nextProps) => {
-  if (prevProps.messageId !== nextProps.messageId) {
-    return false;
-  }
-  if (prevProps.isReadonly !== nextProps.isReadonly) {
-    return false;
-  }
-  if (prevProps.parentMessageId !== nextProps.parentMessageId) {
-    return false;
-  }
-  if (prevProps.isLoading !== nextProps.isLoading) {
-    return false;
-  }
-  return true;
+	if (prevProps.messageId !== nextProps.messageId) {
+		return false;
+	}
+	if (prevProps.isReadonly !== nextProps.isReadonly) {
+		return false;
+	}
+	if (prevProps.parentMessageId !== nextProps.parentMessageId) {
+		return false;
+	}
+	if (prevProps.isLoading !== nextProps.isLoading) {
+		return false;
+	}
+	return true;
 });

package/templates/chat-app/hooks/chat-sync-hooks.ts

@@ -331,6 +331,17 @@ export function useSaveMessageMutation() {
         }
       }
     },
+    onSettled: (_data, _error, { message, chatId }) => {
+      if (message.role === "assistant" && isAuthenticated) {
+        // Sync the full message tree after the mutation settles so parallel
+        // response siblings get their updated activeStreamId from the server.
+        // Placed in onSettled (not onSuccess) so this runs after the real
+        // backend write when the mutationFn is eventually made server-side.
+        qc.invalidateQueries({
+          queryKey: trpc.chat.getChatMessages.queryKey({ chatId }),
+        });
+      }
+    },
   });
 }
 

package/templates/chat-app/hooks/use-navigate-to-message.ts

@@ -0,0 +1,39 @@
+import { useChatActions } from "@ai-sdk-tools/store";
+import { useCallback } from "react";
+import { useDataStream } from "@/components/data-stream-provider";
+import { useArtifact } from "@/hooks/use-artifact";
+import type { ChatMessage } from "@/lib/ai/types";
+import { useSwitchToMessage } from "@/lib/stores/hooks-threads";
+
+export function useNavigateToMessage() {
+  const { stop } = useChatActions<ChatMessage>();
+  const { setDataStream } = useDataStream();
+  const { artifact, closeArtifact } = useArtifact();
+  const switchToMessage = useSwitchToMessage();
+
+  return useCallback(
+    (messageId: string) => {
+      stop?.();
+      setDataStream([]);
+
+      const newThread = switchToMessage(messageId);
+
+      if (
+        newThread &&
+        artifact.isVisible &&
+        artifact.messageId &&
+        !newThread.some((message) => message.id === artifact.messageId)
+      ) {
+        closeArtifact();
+      }
+    },
+    [
+      artifact.isVisible,
+      artifact.messageId,
+      closeArtifact,
+      setDataStream,
+      stop,
+      switchToMessage,
+    ]
+  );
+}

package/templates/chat-app/lib/ai/types.ts

@@ -59,10 +59,83 @@ const frontendToolsSchema = z.enum([
 const __ = frontendToolsSchema.options satisfies ToolNameInternal[];
 
 export type UiToolName = z.infer<typeof frontendToolsSchema>;
+
+export type SelectedModelCounts = Partial<Record<AppModelId, number>>;
+export type SelectedModelValue = AppModelId | SelectedModelCounts;
+
+export function isSelectedModelCounts(
+  value: unknown
+): value is SelectedModelCounts {
+  if (!value || typeof value !== "object" || Array.isArray(value)) {
+    return false;
+  }
+
+  if (Object.keys(value).length === 0) {
+    return false;
+  }
+
+  return Object.entries(value).every(
+    ([modelId, count]) =>
+      typeof modelId === "string" &&
+      typeof count === "number" &&
+      Number.isInteger(count) &&
+      count > 0
+  );
+}
+
+export function isSelectedModelValue(
+  value: unknown
+): value is SelectedModelValue {
+  return typeof value === "string" || isSelectedModelCounts(value);
+}
+
+export function getPrimarySelectedModelId(
+  selectedModel: SelectedModelValue | null | undefined
+): AppModelId | null {
+  if (!selectedModel) {
+    return null;
+  }
+
+  if (typeof selectedModel === "string") {
+    return selectedModel;
+  }
+
+  const [firstSelectedModelId] = Object.entries(selectedModel).find(
+    ([, count]) => typeof count === "number" && count > 0
+  ) ?? [null];
+
+  return firstSelectedModelId as AppModelId | null;
+}
+
+export function expandSelectedModelValue(
+  selectedModel: SelectedModelValue
+): AppModelId[] {
+  if (typeof selectedModel === "string") {
+    return [selectedModel];
+  }
+
+  const expanded: AppModelId[] = [];
+
+  for (const [modelId, count] of Object.entries(selectedModel)) {
+    if (!(typeof count === "number" && Number.isInteger(count) && count > 0)) {
+      continue;
+    }
+
+    for (let index = 0; index < count; index += 1) {
+      expanded.push(modelId as AppModelId);
+    }
+  }
+
+  return expanded;
+}
+
 const messageMetadataSchema = z.object({
   createdAt: z.date(),
   parentMessageId: z.string().nullable(),
-  selectedModel: z.custom<AppModelId>((val) => typeof val === "string"),
+  parallelGroupId: z.string().nullable().optional(),
+  parallelIndex: z.number().int().nullable().optional(),
+  isPrimaryParallel: z.boolean().nullable().optional(),
+  selectedModel: z.custom<SelectedModelValue>(isSelectedModelValue),
   activeStreamId: z.string().nullable(),
   selectedTool: frontendToolsSchema.optional(),
   usage: z.custom<LanguageModelUsage | undefined>((_val) => true).optional(),
@@ -101,7 +174,6 @@ type webSearchTool = InferUITool<ReturnType<typeof tavilyWebSearch>>;
 type codeExecutionTool = InferUITool<ReturnType<typeof codeExecution>>;
 type retrieveUrlTool = InferUITool<typeof retrieveUrl>;
 
-// biome-ignore lint/style/useConsistentTypeDefinitions: using type for mapped type compatibility
 export type ChatTools = {
   codeExecution: codeExecutionTool;
   createCodeDocument: createCodeDocumentToolType;
@@ -123,7 +195,6 @@ interface FollowupSuggestions {
   suggestions: string[];
 }
 
-// biome-ignore lint/style/useConsistentTypeDefinitions: using type for mapped type compatibility
 export type CustomUIDataTypes = {
   appendMessage: string;
   chatConfirmed: {

package/templates/chat-app/lib/config-schema.ts

@@ -224,9 +224,14 @@ export const featuresConfigSchema = z
     attachments: z
       .boolean()
       .describe("File attachments (requires BLOB_READ_WRITE_TOKEN)"),
+    parallelResponses: z
+      .boolean()
+      .default(true)
+      .describe("Send one message to multiple models simultaneously"),
   })
   .default({
     attachments: false,
+    parallelResponses: true,
   });
 
 export const authenticationConfigSchema = z

package/templates/chat-app/lib/db/migrations/0044_gray_red_shift.sql

@@ -0,0 +1,5 @@
+ALTER TABLE "Message" ALTER COLUMN "selectedModel" DROP DEFAULT;--> statement-breakpoint
+ALTER TABLE "Message" ALTER COLUMN "selectedModel" SET DATA TYPE json USING to_json("selectedModel");--> statement-breakpoint
+ALTER TABLE "Message" ADD COLUMN "parallelGroupId" uuid;--> statement-breakpoint
+ALTER TABLE "Message" ADD COLUMN "parallelIndex" integer;--> statement-breakpoint
+ALTER TABLE "Message" ADD COLUMN "isPrimaryParallel" boolean;--> statement-breakpoint