chore (ui/solid): update solidjs useChat and useCompletion to feature…

… parity with React (#2095)

Co-authored-by: Ian Pascoe <[email protected]>
Co-authored-by: Ian Pascoe <[email protected]>

.changeset/healthy-actors-learn.md

@@ -0,0 +1,6 @@
+---
+'@ai-sdk/solid': patch
+'ai': patch
+---
+
+chore (ui/solid): update solidjs useChat and useCompletion to feature parity with React

content/docs/05-ai-sdk-ui/01-overview.mdx

@@ -24,7 +24,7 @@ Here is a comparison of the supported functions across these frameworks:
 | Function                                                   | React               | Svelte              | Vue.js              | SolidJS             |
 | ---------------------------------------------------------- | ------------------- | ------------------- | ------------------- | ------------------- |
 | [useChat](/docs/reference/ai-sdk-ui/use-chat)              | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
-| [useChat](/docs/reference/ai-sdk-ui/use-chat) tool calling | <Check size={18} /> | <Cross size={18} /> | <Cross size={18} /> | <Cross size={18} /> |
+| [useChat](/docs/reference/ai-sdk-ui/use-chat) tool calling | <Check size={18} /> | <Cross size={18} /> | <Cross size={18} /> | <Check size={18} /> |
 | [useCompletion](/docs/reference/ai-sdk-ui/use-completion)  | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
 | [useObject](/docs/reference/ai-sdk-ui/use-object)          | <Check size={18} /> | <Cross size={18} /> | <Cross size={18} /> | <Cross size={18} /> |
 | [useAssistant](/docs/reference/ai-sdk-ui/use-assistant)    | <Check size={18} /> | <Check size={18} /> | <Cross size={18} /> | <Cross size={18} /> |

content/docs/05-ai-sdk-ui/03-chatbot-with-tool-calling.mdx

@@ -7,7 +7,7 @@ description: Learn how to use tools with the useChat hook.
 
 <Note type="warning">
   The tool calling functionality described here is currently only available for
-  **React**.
+  **React** and **SolidJS**.
 </Note>
 
 With `useChat` and `streamText`, you can use tools in your chatbot application.

content/docs/07-reference/ai-sdk-ui/01-use-chat.mdx

@@ -118,7 +118,7 @@ Allows you to easily create a conversational user interface for your chatbot app
       name: 'maxToolRoundtrips',
       type: 'number',
       description:
-        'React only. Maximal number of automatic roundtrips for tool calls. An automatic tool call roundtrip is a call to the server with the  tool call results when all tool calls in the last assistant  message have results. A maximum number is required to prevent infinite loops in the case of misconfigured tools. By default, it is set to 0, which will disable the feature.',
+        'React and SolidJS only. Maximal number of automatic roundtrips for tool calls. An automatic tool call roundtrip is a call to the server with the  tool call results when all tool calls in the last assistant  message have results. A maximum number is required to prevent infinite loops in the case of misconfigured tools. By default, it is set to 0, which will disable the feature.',
     },
     {
       name: 'streamMode',
@@ -247,7 +247,7 @@ Allows you to easily create a conversational user interface for your chatbot app
       name: 'addToolResult',
       type: '({toolCallId: string; result: any;}) => void',
       description:
-        'React only. Function to add a tool result to the chat. This will update the chat messages with the tool result and call the API route if all tool results for the last message are available.',
+        'React and SolidJS only. Function to add a tool result to the chat. This will update the chat messages with the tool result and call the API route if all tool results for the last message are available.',
     },
   ]}
 />

content/docs/07-reference/ai-sdk-ui/index.mdx

@@ -57,7 +57,7 @@ Here is a comparison of the supported functions across these frameworks:
 | Function                                                   | React               | Svelte              | Vue.js              | SolidJS             |
 | ---------------------------------------------------------- | ------------------- | ------------------- | ------------------- | ------------------- |
 | [useChat](/docs/reference/ai-sdk-ui/use-chat)              | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
-| [useChat](/docs/reference/ai-sdk-ui/use-chat) tool calling | <Check size={18} /> | <Cross size={18} /> | <Cross size={18} /> | <Cross size={18} /> |
+| [useChat](/docs/reference/ai-sdk-ui/use-chat) tool calling | <Check size={18} /> | <Cross size={18} /> | <Cross size={18} /> | <Check size={18} /> |
 | [useCompletion](/docs/reference/ai-sdk-ui/use-completion)  | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
 | [useObject](/docs/reference/ai-sdk-ui/use-object)          | <Check size={18} /> | <Cross size={18} /> | <Cross size={18} /> | <Cross size={18} /> |
 | [useAssistant](/docs/reference/ai-sdk-ui/use-assistant)    | <Check size={18} /> | <Check size={18} /> | <Cross size={18} /> | <Cross size={18} /> |

examples/solidstart-openai/.gitignore

@@ -4,7 +4,11 @@ dist
 .output
 .vercel
 .netlify
-netlify
+.vinxi
+
+# Environment
+.env
+.env*.local
 
 # dependencies
 /node_modules
@@ -22,6 +26,3 @@ gitignore
 # System Files
 .DS_Store
 Thumbs.db
-
-# Local env files
-.env

examples/solidstart-openai/app.config.ts

@@ -0,0 +1,3 @@
+import { defineConfig } from '@solidjs/start/config';
+
+export default defineConfig({});

examples/solidstart-openai/package.json

@@ -1,33 +1,29 @@
 {
   "name": "solidstart-openai",
   "private": true,
+  "type": "module",
   "scripts": {
-    "dev": "solid-start dev",
-    "build": "solid-start build",
-    "start": "solid-start start"
+    "dev": "vinxi dev",
+    "build": "vinxi build",
+    "start": "vinxi start"
   },
-  "type": "module",
   "devDependencies": {
-    "autoprefixer": "^10.4.13",
-    "postcss": "^8.4.21",
-    "solid-start-node": "0.3.10",
-    "tailwindcss": "^3.2.4",
-    "typescript": "^4.9.4",
-    "vite": "^4.1.4"
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.3",
+    "vinxi": "^0.3.12"
   },
   "dependencies": {
     "@ai-sdk/openai": "latest",
     "@ai-sdk/solid": "latest",
-    "@solidjs/meta": "0.29.3",
-    "@solidjs/router": "0.8.2",
+    "@solidjs/meta": "0.29.4",
+    "@solidjs/router": "^0.13.6",
+    "@solidjs/start": "^1.0.2",
     "ai": "latest",
-    "openai": "4.47.1",
-    "solid-js": "1.8.7",
-    "solid-start": "0.3.10",
-    "undici": "^5.15.1"
+    "solid-js": "^1.8.17",
+    "zod": "^3.23.8"
   },
   "engines": {
-    "node": ">=16"
-  },
-  "version": "0.0.0"
+    "node": ">=18"
+  }
 }

examples/solidstart-openai/postcss.config.cjs

@@ -1,6 +1,6 @@
 module.exports = {
   plugins: {
     tailwindcss: {},
-    autoprefixer: {}
-  }
+    autoprefixer: {},
+  },
 }

examples/solidstart-openai/src/root.css → examples/solidstart-openai/src/app.css

@@ -1,3 +1,3 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;

examples/solidstart-openai/src/app.tsx

@@ -0,0 +1,19 @@
+import { Router } from '@solidjs/router';
+import { FileRoutes } from '@solidjs/start/router';
+import { Suspense } from 'solid-js';
+
+import './app.css';
+
+export default function App() {
+  return (
+    <Router
+      root={props => (
+        <>
+          <Suspense>{props.children}</Suspense>
+        </>
+      )}
+    >
+      <FileRoutes />
+    </Router>
+  );
+}

examples/solidstart-openai/src/entry-client.tsx

@@ -1,3 +1,4 @@
-import { mount, StartClient } from 'solid-start/entry-client';
+// @refresh reload
+import { mount, StartClient } from '@solidjs/start/client';
 
-mount(() => <StartClient />, document);
+mount(() => <StartClient />, document.getElementById('app')!);

examples/solidstart-openai/src/entry-server.tsx

@@ -1,9 +1,21 @@
-import {
-  StartServer,
-  createHandler,
-  renderAsync,
-} from 'solid-start/entry-server';
+// @refresh reload
+import { createHandler, StartServer } from '@solidjs/start/server';
 
-export default createHandler(
-  renderAsync(event => <StartServer event={event} />),
-);
+export default createHandler(() => (
+  <StartServer
+    document={({ assets, children, scripts }) => (
+      <html lang="en">
+        <head>
+          <meta charset="utf-8" />
+          <meta name="viewport" content="width=device-width, initial-scale=1" />
+          <link rel="icon" href="/favicon.ico" />
+          {assets}
+        </head>
+        <body>
+          <div id="app">{children}</div>
+          {scripts}
+        </body>
+      </html>
+    )}
+  />
+));

examples/solidstart-openai/src/global.d.ts

@@ -0,0 +1 @@
+/// <reference types="@solidjs/start/env" />