Add new ai-codespace/index.html and update next-openai dependencies

OPMorph · Oct 27, 2024 · 3172317 · 3172317
1 parent f0b354d
commit 3172317
Show file tree

Hide file tree

Showing 4 changed files with 19,914 additions and 14,443 deletions.
diff --git a/ai-codespace/index.html b/ai-codespace/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Codespace</title>
+</head>
+<body>
+    <h1>Welcome to AI Codespace</h1>
+
+    <!-- Voiceflow Chat Widget -->
+    <script type="text/javascript">
+        (function(d, t) {
+            var v = d.createElement(t), s = d.getElementsByTagName(t)[0];
+            v.onload = function() {
+                window.voiceflow.chat.load({
+                    verify: { projectID: '671e8b0eff5ef3f747ccb6cc' },
+                    url: 'https://general-runtime.voiceflow.com',
+                    versionID: 'production'
+                });
+            }
+            v.src = "https://cdn.voiceflow.com/widget/bundle.mjs"; 
+            v.type = "text/javascript"; 
+            s.parentNode.insertBefore(v, s);
+        })(document, 'script');
+    </script>
+</body>
+</html>
diff --git a/examples/next-openai/app/page.tsx b/examples/next-openai/app/page.tsx
@@ -1,6 +1,35 @@
 'use client';
 
-import { useChat } from 'ai/react';
+import { Message, useChat } from 'ai/react';
+import { ChangeEvent, FormEvent, useEffect } from 'react';
+
+interface VoiceflowMessage {
+  type: string;
+  payload: {
+    message: string;
+    role: string;
+    timestamp: string;
+  };
+}
+
+interface VoiceflowConfig {
+  verify: {
+    projectID: string;
+  };
+  url: string;
+  versionID: string;
+}
+
+declare global {
+  interface Window {
+    voiceflow?: {
+      chat: {
+        load: (config: VoiceflowConfig) => void;
+        interact: (data: any) => void;
+      };
+    };
+  }
+}
 
 export default function Chat() {
   const {
@@ -14,15 +43,63 @@ export default function Chat() {
     stop,
   } = useChat({
     keepLastMessageOnError: true,
-    onFinish(message, { usage, finishReason }) {
-      console.log('Usage', usage);
-      console.log('FinishReason', finishReason);
+    onFinish(message: Message, { usage, finishReason }) {
+      console.log('Usage:', usage);
+      console.log('FinishReason:', finishReason);
+
+      // Trigger dynamic binding event when chat message is finished
+      if (window.voiceflow?.chat) {
+        window.voiceflow.chat.interact({
+          type: 'message',
+          payload: {
+            message: message.content,
+            role: message.role,
+            timestamp: new Date().toISOString()
+          }
+        });
+      }
     },
   });
 
+  useEffect(() => {
+    // Create and inject the Voiceflow script
+    const script = document.createElement('script');
+    script.type = 'text/javascript';
+    script.src = 'https://cdn.voiceflow.com/widget/bundle.mjs';
+    script.onload = () => {
+      // Initialize Voiceflow chat widget with dynamic binding
+      if (window.voiceflow?.chat) {
+        window.voiceflow.chat.load({
+          verify: { projectID: '671e8b0eff5ef3f747ccb6cc' },
+          url: 'https://general-runtime.voiceflow.com',
+          versionID: 'production'
+        });
+      }
+    };
+
+    // Find the first script tag to insert before
+    const firstScript = document.getElementsByTagName('script')[0];
+    firstScript.parentNode?.insertBefore(script, firstScript);
+
+    return () => {
+      // Cleanup script when component unmounts
+      if (script.parentNode) {
+        script.parentNode.removeChild(script);
+      }
+    };
+  }, []);
+
+  const handleFormSubmit = (e: FormEvent<HTMLFormElement>) => {
+    handleSubmit(e);
+  };
+
+  const handleInputValueChange = (e: ChangeEvent<HTMLInputElement>) => {
+    handleInputChange(e);
+  };
+
   return (
     <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
-      {messages.map(m => (
+      {messages.map((m: Message) => (
         <div key={m.id} className="whitespace-pre-wrap">
           {m.role === 'user' ? 'User: ' : 'AI: '}
           {m.content}
@@ -55,12 +132,12 @@ export default function Chat() {
         </div>
       )}
 
-      <form onSubmit={handleSubmit}>
+      <form onSubmit={handleFormSubmit}>
         <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}
+          onChange={handleInputValueChange}
           disabled={isLoading || error != null}
         />
       </form>

diff --git a/examples/next-openai/package.json b/examples/next-openai/package.json
@@ -21,8 +21,8 @@
     "zod": "3.23.8"
   },
   "devDependencies": {
-    "@types/node": "^17.0.12",
-    "@types/react": "^18",
+    "@types/node": "^17.0.45",
+    "@types/react": "^18.3.3",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.4.14",
     "eslint": "^7.32.0",