Merge pull request #7 from jeasonstudio/chore-update-playground-page

chore: update playground page

README.md

@@ -115,7 +115,7 @@ console.log(result);
 //  I am a large language model, trained by Google.
 ```
 
-Chrome built-in language models can also be used in the generateObject function:
+Chrome built-in language models can also be used in the `generateObject/streamObject` function:
 
 ```javascript
 import { generateObject } from 'ai';
@@ -143,7 +143,35 @@ console.log(object);
 // { recipe: {...} }
 ```
 
-> Due to model reasons, `toolCall` and `streamObject` are not supported. We are making an effort to implement these functions by prompt engineering.
+```javascript
+import { streamObject } from 'ai';
+import { chromeai } from 'chrome-ai';
+import { z } from 'zod';
+
+const { partialObjectStream } = await streamObject({
+  model: chromeai(),
+  schema: z.object({
+    recipe: z.object({
+      name: z.string(),
+      ingredients: z.array(
+        z.object({
+          name: z.string(),
+          amount: z.string(),
+        })
+      ),
+      steps: z.array(z.string()),
+    }),
+  }),
+  prompt: 'Generate a lasagna recipe.',
+});
+
+for await (const partialObject of result.partialObjectStream) {
+  console.log(JSON.stringify(partialObject, null, 2));
+  // { recipe: {...} }
+}
+```
+
+> Due to model reasons, `toolCall/functionCall` are not supported. We are making an effort to implement these functions by prompt engineering.
 
 ## Enable AI in Chrome
 

app/components/footer.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 
 export const Footer: React.FC<unknown> = () => {
   return (
-    <div className="fixed bottom-4 w-full">
+    <footer className="w-full text-center">
       <p className="text-muted-foreground px-2 text-center text-xs leading-normal hidden sm:block">
-        Open source AI demo built with{' '}
+        Built with{' '}
         <a
           href="https://github.com/jeasonstudio/chrome-ai"
           target="_blank"
@@ -46,6 +46,6 @@ export const Footer: React.FC<unknown> = () => {
         </a>
         .
       </p>
-    </div>
+    </footer>
   );
 };

app/components/layout.tsx

@@ -0,0 +1,121 @@
+'use client';
+
+import React from 'react';
+import {
+  SquareTerminal,
+  Chrome,
+  Github,
+  Twitter,
+  SquareKanban,
+} from 'lucide-react';
+import { Button } from '../components/ui/button';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  TooltipProvider,
+} from '../components/ui/tooltip';
+import { ThemeSwitcher } from '../components/theme-switcher';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { cn } from '../utils';
+
+export interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export const Layout: React.FC<React.PropsWithChildren<LayoutProps>> = ({
+  children,
+}) => {
+  const pathname = usePathname();
+
+  return (
+    <div className="grid h-screen w-full pl-[56px]">
+      <aside className="inset-y fixed  left-0 z-20 flex h-full flex-col border-r">
+        <div className="border-b p-2">
+          <Button variant="ghost" size="icon" aria-label="Home" asChild>
+            <Link href="/">
+              <Chrome className="size-6" />
+            </Link>
+          </Button>
+        </div>
+        <nav className="grid gap-1 p-2">
+          <TooltipProvider delayDuration={0}>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className={cn('rounded-lg', pathname === '/' && 'bg-muted')}
+                  aria-label="Message Playground"
+                  asChild
+                >
+                  <Link href="/">
+                    <SquareTerminal className="size-5" />
+                  </Link>
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent side="right" sideOffset={5}>
+                Chat Playground
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+          <TooltipProvider delayDuration={0}>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className={cn(
+                    'rounded-lg',
+                    pathname === '/orders' && 'bg-muted'
+                  )}
+                  aria-label="Orders Playground"
+                  asChild
+                >
+                  <Link href="/orders">
+                    <SquareKanban className="size-5" />
+                  </Link>
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent side="right" sideOffset={5}>
+                Orders Playground
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </nav>
+        {/* <nav className="mt-auto grid gap-1 p-2">
+          <ThemeSwitcher />
+        </nav> */}
+      </aside>
+      <div className="flex flex-col h-screen">
+        <header className="sticky top-0 z-10 flex h-[57px] items-center gap-1 border-b bg-background px-4">
+          <h2 className="text-xl font-semibold">Chrome AI</h2>
+
+          {/* <Button
+            variant="outline"
+            size="sm"
+            className="ml-auto gap-1.5 text-sm"
+          >
+            <Share className="size-3.5" />
+            Share
+          </Button> */}
+
+          <Button variant="ghost" className="ml-auto" size="icon" asChild>
+            <Link
+              href="https://github.com/jeasonstudio/chrome-ai"
+              target="_blank"
+            >
+              <Github className="h-[1.2rem] w-[1.2rem]" />
+            </Link>
+          </Button>
+          <Button variant="ghost" size="icon" asChild>
+            <Link href="https://twitter.com/jeasonstudio" target="_blank">
+              <Twitter className="h-[1.2rem] w-[1.2rem]" />
+            </Link>
+          </Button>
+          <ThemeSwitcher align="end" className="gap-1.5 text-sm" />
+        </header>
+        {children}
+      </div>
+    </div>
+  );
+};