Assistant-cloud integration

Author: kevin-lann

course-matrix/frontend/package-lock.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@ai-sdk/openai": "^1.1.13",
-    "@assistant-ui/react": "^0.7.86",
+    "@assistant-ui/react": "^0.7.91",
     "@assistant-ui/react-ai-sdk": "^0.7.16",
     "@assistant-ui/react-markdown": "^0.7.20",
     "@assistant-ui/react-ui": "^0.1.7",

course-matrix/frontend/package.json

@@ -48,7 +48,7 @@ const ThreadListItem: FC = () => {
 
 const ThreadListItemTitle: FC = () => {
   return (
-    <p className="text-sm">
+    <p className="text-sm overflow-hidden text-ellipsis whitespace-nowrap">
       <ThreadListItemPrimitive.Title fallback="New Chat" />
     </p>
   );

course-matrix/frontend/src/components/assistant-ui/thread-list.tsx

@@ -3,18 +3,16 @@ import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
 import { Thread } from "@/components/assistant-ui/thread";
 import { ThreadList } from "@/components/assistant-ui/thread-list";
 import { SERVER_URL } from "@/api/config";
+import { RuntimeProvider } from "./runtime-provider";
 
 export const Assistant = () => {
-  const runtime = useChatRuntime({
-    api: `${SERVER_URL}/api/ai/chat`,
-  });
 
   return (
-    <AssistantRuntimeProvider runtime={runtime}>
+    <RuntimeProvider>
       <div className="grid h-dvh grid-cols-[200px_1fr] gap-x-2 px-4 py-4">
         <ThreadList />
         <Thread />
       </div>
-    </AssistantRuntimeProvider>
+    </RuntimeProvider>
   );
 };

course-matrix/frontend/src/pages/Assistant/assistant.tsx

@@ -0,0 +1,45 @@
+import { SERVER_URL } from "@/api/config";
+import { AssistantCloud, AssistantRuntimeProvider } from "@assistant-ui/react";
+import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
+
+const PUBLIC_ASSISTANT_BASE_URL = import.meta.env.VITE_PUBLIC_ASSISTANT_BASE_URL;
+const ASSISTANT_UI_KEY = import.meta.env.VITE_ASSISTANT_UI_KEY;
+
+const user = JSON.parse(localStorage.getItem("userInfo") ?? "{}")
+const userId = (user?.user?.id);
+
+const getAuthToken = async () => {
+  const client = new AssistantCloud({
+    apiKey: ASSISTANT_UI_KEY!,
+    userId,
+    workspaceId: userId,
+  });
+  const { token } = await client.auth.tokens.create();
+  return token
+}
+
+const cloud = new AssistantCloud({
+  baseUrl: PUBLIC_ASSISTANT_BASE_URL!,
+  // authToken: () =>
+  //   fetch("/api/assistant-ui-token", { method: "POST" })
+  //     .then((r) => r.json())
+  //     .then((r) => r.token),
+  authToken: () => getAuthToken()
+});
+
+export function RuntimeProvider({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  const runtime = useChatRuntime({
+    cloud,
+    api: `${SERVER_URL}/api/ai/chat`,
+  });
+
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      {children}
+    </AssistantRuntimeProvider>
+  );
+}