feat (ai/ui): useChat refactor

examples/next-openai/app/api/use-chat-tools/route.ts

@@ -1,5 +1,5 @@
 import { openai } from '@ai-sdk/openai';
-import { streamText, tool } from 'ai';
+import { convertToModelMessages, streamText, tool } from 'ai';
 import { z } from 'zod';
 
 // Allow streaming responses up to 30 seconds
@@ -11,7 +11,7 @@ export async function POST(req: Request) {
   const result = streamText({
     model: openai('gpt-4o'),
     // model: anthropic('claude-3-5-sonnet-latest'),
-    messages,
+    messages: convertToModelMessages(messages),
     toolCallStreaming: true,
     maxSteps: 5, // multi-steps for server-side tools
     tools: {

examples/next-openai/app/use-chat-v2/[id]/page.tsx

@@ -0,0 +1,10 @@
+import { Chat } from '../chat';
+
+export default async function ChatPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+  return <Chat key={id} id={id} />;
+}

examples/next-openai/app/use-chat-v2/chat.tsx

@@ -0,0 +1,159 @@
+'use client';
+
+import { useChat } from '@ai-sdk/react';
+import { store } from './store';
+
+export function Chat({ id }: { id?: string }) {
+  const { messages, input, handleInputChange, handleSubmit, addToolResult } =
+    useChat({
+      api: '/api/use-chat-tools',
+      maxSteps: 5,
+      store,
+      id,
+      // run client-side tools that are automatically executed:
+      async onToolCall({ toolCall }) {
+        // artificial 2 second delay
+        await new Promise(resolve => setTimeout(resolve, 2000));
+
+        if (toolCall.toolName === 'getLocation') {
+          const cities = [
+            'New York',
+            'Los Angeles',
+            'Chicago',
+            'San Francisco',
+          ];
+          return cities[Math.floor(Math.random() * cities.length)];
+        }
+      },
+
+      onError(error) {
+        console.error('error', error);
+      },
+      onFinish(message) {
+        console.log('onFinish', message);
+      },
+    });
+
+  return (
+    <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
+      {messages?.map(message => (
+        <div key={message.id} className="whitespace-pre-wrap">
+          <strong>{`${message.role}: `}</strong>
+          {message.parts.map((part, index) => {
+            switch (part.type) {
+              case 'text':
+                return <div key={index}>{part.text}</div>;
+              case 'step-start':
+                return index > 0 ? (
+                  <div key={index} className="text-gray-500">
+                    <hr className="my-2 border-gray-300" />
+                  </div>
+                ) : null;
+              case 'tool-invocation': {
+                switch (part.toolInvocation.toolName) {
+                  case 'askForConfirmation': {
+                    switch (part.toolInvocation.state) {
+                      case 'call':
+                        return (
+                          <div key={index} className="text-gray-500">
+                            {part.toolInvocation.args.message}
+                            <div className="flex gap-2">
+                              <button
+                                className="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700"
+                                onClick={() =>
+                                  addToolResult({
+                                    toolCallId: part.toolInvocation.toolCallId,
+                                    result: 'Yes, confirmed.',
+                                  })
+                                }
+                              >
+                                Yes
+                              </button>
+                              <button
+                                className="px-4 py-2 font-bold text-white bg-red-500 rounded hover:bg-red-700"
+                                onClick={() =>
+                                  addToolResult({
+                                    toolCallId: part.toolInvocation.toolCallId,
+                                    result: 'No, denied',
+                                  })
+                                }
+                              >
+                                No
+                              </button>
+                            </div>
+                          </div>
+                        );
+                      case 'result':
+                        return (
+                          <div key={index} className="text-gray-500">
+                            Location access allowed:{' '}
+                            {part.toolInvocation.result}
+                          </div>
+                        );
+                    }
+                    break;
+                  }
+
+                  case 'getLocation': {
+                    switch (part.toolInvocation.state) {
+                      case 'call':
+                        return (
+                          <div key={index} className="text-gray-500">
+                            Getting location...
+                          </div>
+                        );
+                      case 'result':
+                        return (
+                          <div key={index} className="text-gray-500">
+                            Location: {part.toolInvocation.result}
+                          </div>
+                        );
+                    }
+                    break;
+                  }
+
+                  case 'getWeatherInformation': {
+                    switch (part.toolInvocation.state) {
+                      // example of pre-rendering streaming tool calls:
+                      case 'partial-call':
+                        return (
+                          <pre key={index}>
+                            {JSON.stringify(part.toolInvocation, null, 2)}
+                          </pre>
+                        );
+                      case 'call':
+                        return (
+                          <div key={index} className="text-gray-500">
+                            Getting weather information for{' '}
+                            {part.toolInvocation.args.city}...
+                          </div>
+                        );
+                      case 'result':
+                        return (
+                          <div key={index} className="text-gray-500">
+                            Weather in {part.toolInvocation.args.city}:{' '}
+                            {part.toolInvocation.result}
+                          </div>
+                        );
+                    }
+                    break;
+                  }
+                }
+              }
+            }
+          })}
+          <br />
+        </div>
+      ))}
+
+      <form onSubmit={handleSubmit}>
+        <input
+          className="fixed bottom-0 w-full max-w-md p-2 mb-8 border border-gray-300 rounded shadow-xl"
+          value={input}
+          placeholder="Say something..."
+          onChange={handleInputChange}
+        />
+      </form>
+    </div>
+  );
+}

examples/next-openai/app/use-chat-v2/layout.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { ChatState } from 'ai';
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import { store } from './store';
+
+const ChatList = () => {
+  const [chats, setChats] = useState<[string, ChatState][]>(store.getChats());
+
+  useEffect(() => {
+    const unsubscribe = store.subscribe({
+      onChatChanged: () => {
+        setChats(store.getChats());
+      },
+    });
+
+    return unsubscribe;
+  }, []);
+
+  return (
+    <div>
+      <Link href={`/use-chat-v2`}>New Chat</Link>
+      {chats.map(([id, chat]) => (
+        <Link key={id} href={`/use-chat-v2/${id}`}>
+          {id} ({chat.status})
+        </Link>
+      ))}
+    </div>
+  );
+};
+
+export default function ChatLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div>
+      <ChatList />
+      {children}
+    </div>
+  );
+}

examples/next-openai/app/use-chat-v2/page.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import { generateId } from 'ai';
+import { Chat } from './chat';
+
+export default function ChatPage() {
+  const id = generateId();
+  return <Chat key={id} id={id} />;
+}

examples/next-openai/app/use-chat-v2/store.ts

@@ -0,0 +1,48 @@
+import { ChatStore } from 'ai';
+
+export const store = new ChatStore({
+  chats: {
+    '1': {
+      messages: [
+        {
+          id: '1',
+          role: 'user',
+          parts: [{ type: 'text', text: 'Hello, world!' }],
+        },
+        {
+          id: '2',
+          role: 'assistant',
+          parts: [{ type: 'text', text: 'Hello, world!' }],
+        },
+      ],
+    },
+    '2': {
+      messages: [
+        {
+          id: '1',
+          role: 'user',
+          parts: [{ type: 'text', text: 'Lucky' }],
+        },
+        {
+          id: '2',
+          role: 'assistant',
+          parts: [{ type: 'text', text: 'Vicky' }],
+        },
+      ],
+    },
+    '3': {
+      messages: [
+        {
+          id: '1',
+          role: 'user',
+          parts: [{ type: 'text', text: 'Cooper' }],
+        },
+        {
+          id: '2',
+          role: 'assistant',
+          parts: [{ type: 'text', text: 'Louie' }],
+        },
+      ],
+    },
+  },
+});