Backport: feat(provider/openai): Add Code Interpreter input streaming support (#9004)

This is an automated backport of #8973 to the release-v5.0 branch.

Co-authored-by: Matt Hodgson <matthodgson@mac.com>
Co-authored-by: Lars Grammel <lars.grammel@gmail.com>

Author: 3 people

.changeset/proud-rockets-count.md

@@ -0,0 +1,5 @@
+---
+'@ai-sdk/openai': patch
+---
+
+The built in Code Interpreter tool input code is streamed in `tool-input-<start/delta/end>` chunks.

examples/next-openai/component/openai-code-interpreter-view.tsx

@@ -6,47 +6,42 @@ export default function CodeInterpreterView({
 }: {
   invocation: UIToolInvocation<ReturnType<typeof openai.tools.codeInterpreter>>;
 }) {
-  switch (invocation.state) {
-    case 'output-available':
-      return (
-        <div className="mb-2 bg-gray-900 rounded-xl border border-gray-600 shadow-lg">
-          <div className="px-6 py-3 bg-gray-800 rounded-t-xl border-b border-gray-700">
-            <div className="overflow-hidden tracking-wide text-gray-500 whitespace-nowrap text-xxs font-small text-ellipsis">
-              {invocation.input.containerId}
-            </div>
-          </div>
+  return (
+    <div className="mb-2 bg-gray-900 rounded-xl border border-gray-600 shadow-lg">
+      <div className="px-6 py-3 bg-gray-800 rounded-t-xl border-b border-gray-700">
+        <div className="overflow-hidden tracking-wide text-gray-500 whitespace-nowrap text-xxs font-small text-ellipsis">
+          {invocation.input?.containerId}
+        </div>
+      </div>
 
-          <div className="p-6">
-            <div className="mb-3">
-              <div className="mb-2 text-sm font-medium text-blue-400">
-                Code:
-              </div>
-              <pre className="overflow-x-auto p-4 text-sm text-gray-100 whitespace-pre-wrap bg-black rounded-lg">
-                {invocation.input.code}
-              </pre>
-            </div>
+      <div className="p-6">
+        <div className="mb-3">
+          <div className="mb-2 text-sm font-medium text-blue-400">Code:</div>
+          <pre className="overflow-x-auto p-4 text-sm text-gray-100 whitespace-pre-wrap bg-black rounded-lg">
+            {invocation.input?.code}
+          </pre>
+        </div>
 
-            <div className="mb-3">
-              <div className="mb-2 text-sm font-medium text-yellow-400">
-                Output:
-              </div>
-              <div className="space-y-2">
-                {invocation.output.outputs?.map((output, index) => (
-                  <div key={index} className="p-3 bg-black rounded-lg">
-                    {output.type === 'logs' && (
-                      <div className="font-mono text-sm text-green-300">
-                        <span className="whitespace-pre-wrap">
-                          {output.logs}
-                        </span>
-                      </div>
-                    )}
-                    {output.type === 'image' && <img src={output.url} />}
-                  </div>
-                ))}
-              </div>
+        {invocation.state === 'output-available' && (
+          <div className="mb-3">
+            <div className="mb-2 text-sm font-medium text-yellow-400">
+              Output:
+            </div>
+            <div className="space-y-2">
+              {invocation.output.outputs?.map((output, index) => (
+                <div key={index} className="p-3 bg-black rounded-lg">
+                  {output.type === 'logs' && (
+                    <div className="font-mono text-sm text-green-300">
+                      <span className="whitespace-pre-wrap">{output.logs}</span>
+                    </div>
+                  )}
+                  {output.type === 'image' && <img src={output.url} />}
+                </div>
+              ))}
             </div>
           </div>
-        </div>
-      );
-  }
+        )}
+      </div>
+    </div>
+  );
 }