@chat-js/cli 0.4.0 → 0.6.0

package/templates/chat-app/components/interactive-charts.tsx

@@ -4,7 +4,7 @@ import { Card } from "@/components/ui/card";
 export type { BaseChart } from "./interactive-chart-impl";
 
 const ChartSkeleton = () => (
-  <Card className="overflow-hidden border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-900">
+  <Card className="overflow-hidden border-border bg-card">
     <div className="flex h-[400px] items-center justify-center p-6">
       <div className="size-8 animate-pulse rounded-md bg-muted" />
     </div>

package/templates/chat-app/components/login-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,28 +11,68 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import {
+  buildSocialAuthRequest,
+  isElectronRenderer,
+} from "@/lib/electron-auth";
 import { cn } from "@/lib/utils";
 
 export function LoginForm({
   className,
   ...props
 }: React.ComponentPropsWithoutRef<"div">) {
+  const searchParams = useSearchParams();
+  const query = Object.fromEntries(searchParams.entries());
+  const [isElectron, setIsElectron] = useState(false);
+  const { callbackURL, onRedirectToUrl, signInOptions } =
+    buildSocialAuthRequest(query, globalThis.location?.origin);
+  const registerHref = { pathname: "/register" as const, query };
+
+  useEffect(() => {
+    setIsElectron(isElectronRenderer());
+  }, []);
+
   return (
     <div className={cn("flex flex-col gap-6", className)} {...props}>
       <Card>
         <CardHeader className="text-center">
-          <CardTitle className="text-xl">Welcome back</CardTitle>
-          <CardDescription>Continue with a social provider</CardDescription>
+          <CardTitle className="text-xl">
+            {isElectron ? "Continue in browser" : "Welcome back"}
+          </CardTitle>
+          <CardDescription>
+            {isElectron
+              ? "Use your browser to sign in or create an account."
+              : "Sign in to your account"}
+          </CardDescription>
         </CardHeader>
         <CardContent>
           <div className="grid gap-6">
-            <SocialAuthProviders />
-            <div className="text-center text-sm">
-              Don&apos;t have an account?{" "}
-              <a className="underline underline-offset-4" href="/register">
-                Sign up
-              </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">
+                Don&apos;t have an account?{" "}
+                <Link
+                  className="underline underline-offset-4"
+                  href={registerHref}
+                >
+                  Sign up
+                </Link>
+              </div>
+            )}
           </div>
         </CardContent>
       </Card>

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

@@ -2,10 +2,7 @@
 import { useChatStatus } from "@ai-sdk-tools/store";
 import { type Dispatch, type SetStateAction, useCallback } from "react";
 import type { ModelId } from "@/lib/ai/app-models";
-import {
-  getPrimarySelectedModelId,
-  type ChatMessage,
-} from "@/lib/ai/types";
+import { type ChatMessage, getPrimarySelectedModelId } from "@/lib/ai/types";
 import {
   getAttachmentsFromMessage,
   getTextContentFromMessage,
@@ -56,7 +53,9 @@ export function MessageEditor(
 
   // Use selectedModel from the message metadata, or fall back to current selected model
   const messageSelectedModel = props.message.metadata?.selectedModel;
-  const primaryModelId = getPrimarySelectedModelId(messageSelectedModel) as ModelId | null;
+  const primaryModelId = getPrimarySelectedModelId(
+    messageSelectedModel
+  ) as ModelId | null;
   const { parentMessageId: _parentMessageId, ...rest } = props;
   return (
     <ChatInputProvider