@chat-js/cli 0.4.0 → 0.6.0

package/templates/chat-app/components/signup-form.tsx

@@ -1,7 +1,9 @@
 "use client";
 
 import Link from "next/link";
-import { SocialAuthProviders } from "@/components/social-auth-providers";
+import { useSearchParams } from "next/navigation";
+import { Suspense, useEffect, useState } from "react";
+import { SocialAuthProviders } from "@/components/auth-providers";
 import {
   Card,
   CardContent,
@@ -9,27 +11,64 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import {
+  buildSocialAuthRequest,
+  isElectronRenderer,
+} from "@/lib/electron-auth";
 
 export function SignupForm({
   className,
   ...props
 }: React.ComponentProps<typeof Card>) {
+  const searchParams = useSearchParams();
+  const query = Object.fromEntries(searchParams.entries());
+  const [isElectron, setIsElectron] = useState(false);
+  const { callbackURL, onRedirectToUrl, signInOptions } =
+    buildSocialAuthRequest(query, globalThis.location?.origin);
+  const loginHref = { pathname: "/login" as const, query };
+
+  useEffect(() => {
+    setIsElectron(isElectronRenderer());
+  }, []);
+
   return (
     <div className="flex flex-col gap-6" {...props}>
       <Card {...props}>
         <CardHeader className="text-center">
-          <CardTitle className="text-xl">Create an account</CardTitle>
-          <CardDescription>Continue with a social provider</CardDescription>
+          <CardTitle className="text-xl">
+            {isElectron ? "Continue in browser" : "Create an account"}
+          </CardTitle>
+          <CardDescription>
+            {isElectron
+              ? "Use your browser to sign in or create an account."
+              : "Get started in seconds"}
+          </CardDescription>
         </CardHeader>
         <CardContent>
           <div className="grid gap-6">
-            <SocialAuthProviders />
-            <div className="text-center text-sm">
-              Already have an account?{" "}
-              <a className="underline underline-offset-4" href="/login">
-                Sign in
-              </a>
-            </div>
+            <Suspense>
+              <SocialAuthProviders
+                callbackURL={callbackURL}
+                electronBrowserLabel="Continue in browser"
+                isElectron={isElectron}
+                onRedirectToUrl={onRedirectToUrl}
+                query={query}
+                signInOptions={signInOptions}
+              />
+            </Suspense>
+            {isElectron ? (
+              <div className="text-center text-muted-foreground text-sm">
+                New and existing accounts both continue through the browser
+                flow.
+              </div>
+            ) : (
+              <div className="text-center text-sm">
+                Already have an account?{" "}
+                <Link className="underline underline-offset-4" href={loginHref}>
+                  Sign in
+                </Link>
+              </div>
+            )}
           </div>
         </CardContent>
       </Card>

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

@@ -28,7 +28,7 @@ const SourcesList = ({
   <div className="space-y-3">
     {sources?.map((source: SearchResultItem) => (
       <a
-        className="block rounded-lg bg-neutral-50 p-4 transition-colors hover:bg-neutral-100 dark:bg-neutral-800/50 dark:hover:bg-neutral-800"
+        className="block rounded-lg bg-secondary p-4 transition-colors hover:bg-accent"
         href={source.url}
         key={source.url}
         rel="noopener noreferrer"
@@ -113,7 +113,7 @@ function ShowSourcesButton({
 }) {
   return (
     <button
-      className="group flex items-center justify-center gap-2 rounded-lg border border-neutral-200 p-2.5 transition-colors hover:bg-neutral-50 dark:border-neutral-800 dark:hover:bg-neutral-800/50"
+      className="group flex items-center justify-center gap-2 rounded-lg border border-border p-2.5 transition-colors hover:bg-accent"
       onClick={() => document.getElementById(dialogId)?.click()}
       type="button"
     >
@@ -125,10 +125,10 @@ function ShowSourcesButton({
           title: s.title,
         }))}
       />
-      <span className="text-neutral-600 text-xs group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-300">
+      <span className="text-muted-foreground text-xs group-hover:text-foreground">
         {sources.length} Sources
       </span>
-      <ArrowRight className="h-3.5 w-3.5 text-neutral-400 transition-colors group-hover:text-neutral-500" />
+      <ArrowRight className="h-3.5 w-3.5 text-muted-foreground transition-colors group-hover:text-foreground" />
     </button>
   );
 }

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

@@ -14,6 +14,7 @@ import { ListPlugin } from "@lexical/react/LexicalListPlugin";
 import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
 import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
 import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import type { EditorState } from "lexical";
 import { $getRoot } from "lexical";
 import { memo, useEffect, useRef } from "react";
 
@@ -95,7 +96,7 @@ function ContentUpdatePlugin({
     }
   }, [content, status, editor]);
 
-  const handleChange = (editorState: any) => {
+  const handleChange = (editorState: EditorState) => {
     if (!(isReadonly || isProgrammaticUpdate.current)) {
       handleEditorChange({
         editorState,
@@ -129,7 +130,9 @@ function PureEditor({
             <ContentEditable className="lexical-editor text-left outline-hidden" />
           }
           ErrorBoundary={LexicalErrorBoundary}
-          placeholder={<div className="text-gray-400">Start typing...</div>}
+          placeholder={
+            <div className="text-muted-foreground">Start typing...</div>
+          }
         />
         <HistoryPlugin />
         <ListPlugin />

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

@@ -89,11 +89,11 @@ function Tool({
       return;
     }
 
-    if (selectedTool !== description) {
-      setSelectedTool(description);
-    } else {
+    if (selectedTool === description) {
       setSelectedTool(null);
       onClick({ sendMessage, storeApi });
+    } else {
+      setSelectedTool(description);
     }
   };
 

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

@@ -84,7 +84,6 @@ function SidebarProvider({
       // This sets the cookie to keep the sidebar state.
       // Prefer Cookie Store API when available
       if ("cookieStore" in window) {
-        // @ts-expect-error cookieStore is not yet in TS lib.dom
         void window.cookieStore.set({
           name: SIDEBAR_COOKIE_NAME,
           value: String(openState),

package/templates/chat-app/components/upgrade-cta/limit-display.tsx

@@ -40,7 +40,7 @@ const VARIANT_CONFIG: Record<
         <span>
           You only have{" "}
           <strong>
-            {remaining} credit{remaining !== 1 ? "s" : ""}
+            {remaining} credit{remaining === 1 ? "" : "s"}
           </strong>{" "}
           left.{" "}
           <Link

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

@@ -11,150 +11,151 @@ 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" && <ParallelResponseCards messageId={message.id} />}
+  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} />}
 
-					{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>
-					)}
+          {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: "" })}
-			/>
-		</>
-	);
+          <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/electron.d.ts

@@ -0,0 +1,41 @@
+declare global {
+  interface ElectronAuthErrorContext {
+    message?: string;
+    path?: string;
+    status?: number;
+    statusText?: string;
+  }
+
+  type ElectronRendererAuthState =
+    | {
+        status: "idle";
+        message: null;
+      }
+    | {
+        status: "awaiting-browser" | "finishing" | "timed-out" | "error";
+        message: string;
+        detail?: string | null;
+      };
+
+  interface Window {
+    electronAPI?: {
+      cancelAuthFlow?: () => Promise<void>;
+      getAuthState?: () => Promise<ElectronRendererAuthState>;
+      isElectron: boolean;
+      onAuthStateChanged?: (
+        callback: (state: ElectronRendererAuthState) => void
+      ) => () => void;
+      platform: string;
+      syncAuthSession?: () => Promise<void>;
+    };
+    onAuthError?: (
+      callback: (context: ElectronAuthErrorContext) => void
+    ) => () => void;
+    onAuthenticated?: (callback: (user: unknown) => void) => () => void;
+    onUserUpdated?: (callback: (user: unknown) => void) => () => void;
+    requestAuth?: (options?: { provider?: string }) => Promise<void> | void;
+    signOut?: () => Promise<void>;
+  }
+}
+
+export {};

package/templates/chat-app/evals/my-eval.eval.ts

@@ -16,7 +16,9 @@ evalite("Test Capitals", {
   ],
   task: async (input) => {
     const result = streamText({
-      model: wrapAISDKModel(openai("gpt-4o-mini") as any),
+      model: wrapAISDKModel(
+        openai("gpt-4o-mini") as unknown as Parameters<typeof wrapAISDKModel>[0]
+      ),
       system: "Answer the question concisely.",
       prompt: input,
     });

package/templates/chat-app/hooks/use-artifact.tsx

@@ -9,6 +9,7 @@ import {
   useState,
 } from "react";
 import type { UIArtifact } from "@/components/artifact-panel";
+import type { ArtifactMetadata } from "@/components/create-artifact";
 
 const initialArtifactData: UIArtifact = {
   documentId: "init",
@@ -23,18 +24,19 @@ const initialArtifactData: UIArtifact = {
 
 type Selector<T> = (state: UIArtifact) => T;
 
+type MetadataUpdater = (current: ArtifactMetadata) => ArtifactMetadata;
+
+type MetadataStore = Record<string, ArtifactMetadata>;
+
 interface ArtifactContextType {
   artifact: UIArtifact;
-  metadata: Record<string, any> | null;
+  metadata: MetadataStore;
   setArtifact: (
     updaterFn: UIArtifact | ((currentArtifact: UIArtifact) => UIArtifact)
   ) => void;
   setMetadata: (
     documentId: string,
-    metadata:
-      | Record<string, any>
-      | null
-      | ((current: Record<string, any> | null) => Record<string, any> | null)
+    metadata: ArtifactMetadata | MetadataUpdater
   ) => void;
 }
 
@@ -45,10 +47,7 @@ const ArtifactContext = createContext<ArtifactContextType | undefined>(
 export function ArtifactProvider({ children }: { children: ReactNode }) {
   const [artifact, setArtifactState] =
     useState<UIArtifact>(initialArtifactData);
-  const [metadataStore, setMetadataStore] = useState<Record<
-    string,
-    any
-  > | null>(initialArtifactData);
+  const [metadataStore, setMetadataStore] = useState<MetadataStore>({});
 
   const setArtifact = useCallback(
     (updaterFn: UIArtifact | ((currentArtifact: UIArtifact) => UIArtifact)) => {
@@ -63,12 +62,12 @@ export function ArtifactProvider({ children }: { children: ReactNode }) {
   );
 
   const setMetadata = useCallback(
-    (documentId: string, metadata: any | ((current: any) => any)) => {
+    (documentId: string, metadata: ArtifactMetadata | MetadataUpdater) => {
       setMetadataStore((current) => ({
         ...current,
         [documentId]:
           typeof metadata === "function"
-            ? metadata(current ? current[documentId] : null)
+            ? metadata(current[documentId] ?? null)
             : metadata,
       }));
     },
@@ -117,12 +116,13 @@ export function useArtifact() {
   } = useArtifactContext();
 
   const metadata = useMemo(
-    () => (artifact.documentId ? metadataStore?.[artifact.documentId] : null),
+    () =>
+      artifact.documentId ? (metadataStore[artifact.documentId] ?? null) : null,
     [metadataStore, artifact.documentId]
   );
 
   const setMetadata = useCallback(
-    (metadataArg: any | ((current: any) => any)) => {
+    (metadataArg: ArtifactMetadata | MetadataUpdater) => {
       if (artifact.documentId) {
         setMetadataStore(artifact.documentId, metadataArg);
       }

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

@@ -4,14 +4,23 @@ export type StrictLiterals<T> = T extends string
     : T
   : T;
 
-export type ExtractModelIdFromProvider<
-  ProviderFactory extends (...args: any) => {
-    languageModel: (modelId: any) => any;
-  },
-> = Parameters<ReturnType<ProviderFactory>["languageModel"]>[0];
+export type ExtractModelIdFromProvider<ProviderFactory> =
+  ProviderFactory extends (...args: infer _Args) => infer Provider
+    ? Provider extends {
+        languageModel: (
+          modelId: infer ModelId,
+          ...args: infer _Rest
+        ) => unknown;
+      }
+      ? ModelId
+      : never
+    : never;
 
-export type ExtractImageModelIdFromProvider<
-  ProviderFactory extends (...args: any) => {
-    image: (modelId: any) => any;
-  },
-> = Parameters<ReturnType<ProviderFactory>["image"]>[0];
+export type ExtractImageModelIdFromProvider<ProviderFactory> =
+  ProviderFactory extends (...args: infer _Args) => infer Provider
+    ? Provider extends {
+        image: (modelId: infer ModelId, ...args: infer _Rest) => unknown;
+      }
+      ? ModelId
+      : never
+    : never;