AI Thread Suggestion (#415)

examples/ai_button_generate_buttons_based_on_chat_conversation/.env.example

@@ -0,0 +1 @@
+OPENAI_API_KEY=sk-proj-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

examples/ai_button_generate_buttons_based_on_chat_conversation/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

examples/ai_button_generate_buttons_based_on_chat_conversation/.gitignore

@@ -0,0 +1,39 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Secret file
+.env        
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/ai_button_generate_buttons_based_on_chat_conversation/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Matthew Diakonov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

examples/ai_button_generate_buttons_based_on_chat_conversation/README.md

@@ -0,0 +1,31 @@
+# AI_button
+
+This project is something I've been missing quite a lot. How do I engage user with AI chat with less friction?
+
+So, I integrated LLM calls to auto-generate follow-up questions based on the latest conversation, displayed as clickable buttons.
+
+![Demo](./app/demo.gif)
+
+## Getting Started
+
+First, add your OpenAI API key to `.env` file:
+
+```
+OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+```
+
+Then, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.

examples/ai_button_generate_buttons_based_on_chat_conversation/app/MyRuntimeProvider.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { useChat } from "@ai-sdk/react";
+import { AssistantRuntimeProvider } from "@assistant-ui/react";
+import { useVercelUseChatRuntime } from "@assistant-ui/react-ai-sdk";
+
+export function MyRuntimeProvider({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  const chat = useChat({
+    api: "/api/chat",
+  });
+
+  const runtime = useVercelUseChatRuntime(chat);
+
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      {children}
+    </AssistantRuntimeProvider>
+  );
+}

examples/ai_button_generate_buttons_based_on_chat_conversation/app/api/chat/route.ts

@@ -0,0 +1,15 @@
+import { openai } from "@ai-sdk/openai";
+import { streamText } from "ai";
+
+export const maxDuration = 30;
+
+export async function POST(req: Request) {
+  const { messages } = await req.json();
+
+  const result = await streamText({
+    model: openai("gpt-4o"),
+    messages,
+  });
+
+  return result.toAIStreamResponse();
+}

examples/ai_button_generate_buttons_based_on_chat_conversation/app/globals.css

@@ -0,0 +1,76 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 10% 3.9%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

examples/ai_button_generate_buttons_based_on_chat_conversation/app/layout.tsx

@@ -0,0 +1,27 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import { MyRuntimeProvider } from "@/app/MyRuntimeProvider";
+import { cn } from "@/lib/utils";
+
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <MyRuntimeProvider>
+      <html lang="en" className="h-full">
+        <body className={cn(inter.className, "h-full")}>{children}</body>
+      </html>
+    </MyRuntimeProvider>
+  );
+}

examples/ai_button_generate_buttons_based_on_chat_conversation/app/page.tsx

@@ -0,0 +1,9 @@
+import { Thread } from "@/components/ui/assistant-ui/thread";
+
+export default function Home() {
+  return (
+    <main className="h-full">
+      <Thread />
+    </main>
+  );
+}

examples/ai_button_generate_buttons_based_on_chat_conversation/components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

examples/ai_button_generate_buttons_based_on_chat_conversation/components/ui/assistant-ui/AI_ThreadSuggestion.tsx

@@ -0,0 +1,70 @@
+import React, { FC, PropsWithChildren, useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { ThreadPrimitive } from "@assistant-ui/react";
+import { useLastAssistantMessage } from "./LastMessageHook";
+import { generate } from './actions';
+import { readStreamableValue } from 'ai/rsc';
+
+const AI_ThreadSuggestion: FC<PropsWithChildren<{}>> = ({ children }) => {
+  const lastAssistantMessage = useLastAssistantMessage();
+  const [output, setOutput] = useState<string | null>(null);
+  const [output2, setOutput2] = useState<string | null>(null);
+
+  const handleClick = useCallback(async () => {
+    const lastMessageContent = lastAssistantMessage?.content;
+    const lastMessageString = JSON.stringify(lastMessageContent);
+    console.log('LM:', lastMessageString);
+
+    const [response1, response2] = await Promise.all([
+      generate(`Generate a optimistic very very short one sentence follow up question based on this response: ${lastMessageString}`),
+      generate(`Generate a very skeptical very very short one sentence follow up question based on this response: ${lastMessageString}`)
+    ]);
+
+    let generatedOutput = '';
+    for await (const delta of readStreamableValue(response1.output)) {
+      generatedOutput += delta;
+    }
+    console.log(generatedOutput);
+    setOutput(generatedOutput);
+
+    let generatedOutput2 = '';
+    for await (const delta of readStreamableValue(response2.output)) {
+      generatedOutput2 += delta;
+    }
+    console.log(generatedOutput2);
+    setOutput2(generatedOutput2);
+  }, [lastAssistantMessage]);
+
+  useEffect(() => {
+    if (lastAssistantMessage) {
+      handleClick();
+    }
+  }, [lastAssistantMessage, handleClick]);
+
+  return (
+    <div className="flex w-full space-x-2">
+      <ThreadPrimitive.Suggestion prompt={output || ''} method="replace" autoSend asChild>
+        <Button
+          variant="outline"
+          className="flex-1 h-auto p-2"
+          onClick={handleClick}
+          style={{ whiteSpace: 'normal', wordWrap: 'break-word' }}
+        >
+          {output || children}
+        </Button>
+      </ThreadPrimitive.Suggestion>
+      <ThreadPrimitive.Suggestion prompt={output2 || ''} method="replace" autoSend asChild>
+        <Button
+          variant="outline"
+          className="flex-1 h-auto p-2"
+          onClick={handleClick}
+          style={{ whiteSpace: 'normal', wordWrap: 'break-word' }}
+        >
+          {output2 || children}
+        </Button>
+      </ThreadPrimitive.Suggestion>
+    </div>
+  );
+};
+
+export default AI_ThreadSuggestion;

examples/ai_button_generate_buttons_based_on_chat_conversation/components/ui/assistant-ui/LastMessageHook.tsx

@@ -0,0 +1,16 @@
+import { useThreadContext } from "@assistant-ui/react";
+import { useMemo } from "react";
+
+export const useLastAssistantMessage = () => {
+  const { useThreadMessages } = useThreadContext();
+  const messages = useThreadMessages();
+
+  return useMemo(() => {
+    for (let i = messages.length - 1; i >= 0; i--) {
+      if (messages[i].role === "assistant") {
+        return messages[i];
+      }
+    }
+    return null;
+  }, [messages]);
+};

examples/ai_button_generate_buttons_based_on_chat_conversation/components/ui/assistant-ui/ThreadNotEmptyHook.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import type { FC, ReactNode } from "react";
+import { useThreadEmpty } from "@assistant-ui/react"; 
+
+export type ThreadPrimitiveNotEmptyProps = {
+  children: ReactNode;
+};
+
+export const ThreadPrimitiveNotEmpty: FC<ThreadPrimitiveNotEmptyProps> = ({
+  children,
+}) => {
+  const empty = useThreadEmpty(); // Use the same hook to check if the thread is empty
+  return !empty ? children : null; // Render children if not empty, otherwise render null
+};
+
+ThreadPrimitiveNotEmpty.displayName = "ThreadPrimitive.NotEmpty";