From 7021c25e4a27ad66c6e615a94c8509e4ff13eb7f Mon Sep 17 00:00:00 2001 From: Simon Farshid Date: Sun, 7 Jul 2024 00:15:49 -0700 Subject: [PATCH] example: rename to with-inline-suggestions, add to docs (#419) --- .changeset/config.json | 3 +- apps/www/pages/examples.mdx | 6 ++ .../ui/assistant-ui/ThreadNotEmptyHook.tsx | 17 ---- .../.env.example | 0 .../.eslintrc.json | 0 .../.gitignore | 0 .../LICENSE | 0 .../README.md | 0 .../app/MyRuntimeProvider.tsx | 0 .../app/api/chat/route.ts | 0 .../app/demo.gif | Bin .../app/favicon.ico | Bin .../app/globals.css | 0 .../app/layout.tsx | 0 .../app/page.tsx | 0 .../components.json | 0 .../ui/assistant-ui/AI_ThreadSuggestion.tsx | 0 .../ui/assistant-ui/LastMessageHook.tsx | 0 .../ui/assistant-ui/ThreadSuggestion.tsx | 0 .../components/ui/assistant-ui/actions.ts | 0 .../components/ui/assistant-ui/thread.tsx | 47 ++++++----- .../components/ui/avatar.tsx | 0 .../components/ui/button.tsx | 0 .../components/ui/tooltip.tsx | 0 .../lib/utils.ts | 0 .../next.config.mjs | 0 .../package.json | 6 +- .../postcss.config.mjs | 0 .../tailwind.config.ts | 0 .../tsconfig.json | 0 pnpm-lock.yaml | 76 ++++++++++++++++++ 31 files changed, 114 insertions(+), 41 deletions(-) delete mode 100644 examples/ai_button_generate_buttons_based_on_chat_conversation/components/ui/assistant-ui/ThreadNotEmptyHook.tsx rename examples/{ai_button_generate_buttons_based_on_chat_conversation => with-inline-suggestions}/.env.example (100%) rename examples/{ai_button_generate_buttons_based_on_chat_conversation => with-inline-suggestions}/.eslintrc.json (100%) rename examples/{ai_button_generate_buttons_based_on_chat_conversation => with-inline-suggestions}/.gitignore (100%) rename examples/{ai_button_generate_buttons_based_on_chat_conversation => with-inline-suggestions}/LICENSE (100%) rename examples/{ai_button_generate_buttons_based_on_chat_conversation => with-inline-suggestions}/README.md (100%) rename examples/{ai_button_generate_buttons_based_on_chat_conversation => with-inline-suggestions}/app/MyRuntimeProvider.tsx (100%) rename examples/{ai_button_generate_buttons_based_on_chat_conversation => with-inline-suggestions}/app/api/chat/route.ts (100%) rename examples/{ai_button_generate_buttons_based_on_chat_conversation => with-inline-suggestions}/app/demo.gif (100%) rename examples/{ai_button_generate_buttons_based_on_chat_conversation => with-inline-suggestions}/app/favicon.ico (100%) rename examples/{ai_button_generate_buttons_based_on_chat_conversation => with-inline-suggestions}/app/globals.css (100%) rename examples/{ai_button_generate_buttons_based_on_chat_conversation => with-inline-suggestions}/app/layout.tsx (100%) rename examples/{ai_button_generate_buttons_based_on_chat_conversation => with-inline-suggestions}/app/page.tsx (100%) rename examples/{ai_button_generate_buttons_based_on_chat_conversation => with-inline-suggestions}/components.json (100%) rename examples/{ai_button_generate_buttons_based_on_chat_conversation => with-inline-suggestions}/components/ui/assistant-ui/AI_ThreadSuggestion.tsx (100%) rename examples/{ai_button_generate_buttons_based_on_chat_conversation => with-inline-suggestions}/components/ui/assistant-ui/LastMessageHook.tsx (100%) rename examples/{ai_button_generate_buttons_based_on_chat_conversation => with-inline-suggestions}/components/ui/assistant-ui/ThreadSuggestion.tsx (100%) rename examples/{ai_button_generate_buttons_based_on_chat_conversation => with-inline-suggestions}/components/ui/assistant-ui/actions.ts (100%) rename examples/{ai_button_generate_buttons_based_on_chat_conversation => with-inline-suggestions}/components/ui/assistant-ui/thread.tsx (73%) rename examples/{ai_button_generate_buttons_based_on_chat_conversation => with-inline-suggestions}/components/ui/avatar.tsx (100%) rename examples/{ai_button_generate_buttons_based_on_chat_conversation => with-inline-suggestions}/components/ui/button.tsx (100%) rename examples/{ai_button_generate_buttons_based_on_chat_conversation => with-inline-suggestions}/components/ui/tooltip.tsx (100%) rename examples/{ai_button_generate_buttons_based_on_chat_conversation => with-inline-suggestions}/lib/utils.ts (100%) rename examples/{ai_button_generate_buttons_based_on_chat_conversation => with-inline-suggestions}/next.config.mjs (100%) rename examples/{ai_button_generate_buttons_based_on_chat_conversation => with-inline-suggestions}/package.json (87%) rename examples/{ai_button_generate_buttons_based_on_chat_conversation => with-inline-suggestions}/postcss.config.mjs (100%) rename examples/{ai_button_generate_buttons_based_on_chat_conversation => with-inline-suggestions}/tailwind.config.ts (100%) rename examples/{ai_button_generate_buttons_based_on_chat_conversation => with-inline-suggestions}/tsconfig.json (100%) diff --git a/.changeset/config.json b/.changeset/config.json index c5ec26638..90a024c7b 100644 --- a/.changeset/config.json +++ b/.changeset/config.json @@ -10,8 +10,9 @@ "ignore": [ "@assistant-ui/www", "search-agent-for-e-commerce", + "with-inline-suggestions", "with-react-hook-form", "with-vercel-ai-rsc", "with-openai-assistants" ] -} \ No newline at end of file +} diff --git a/apps/www/pages/examples.mdx b/apps/www/pages/examples.mdx index 8e9e77462..08ed650db 100644 --- a/apps/www/pages/examples.mdx +++ b/apps/www/pages/examples.mdx @@ -16,6 +16,12 @@ This is an example of an eCommerce chatbot that can help users find products. Bu - [Demo](https://x.com/MatthewHeartful/status/1803317502933606698) - [Code](https://github.com/Yonom/assistant-ui/tree/main/examples/search-agent-for-e-commerce) +### Inline Suggestions Example + +This is an example of how to use inline suggestions. + +- [Code](https://github.com/Yonom/assistant-ui/tree/main/examples/with-inline-suggestions) + ### React Hook Form Example This is an example of how to use `@assistant-ui/react-hook-form`. diff --git a/examples/ai_button_generate_buttons_based_on_chat_conversation/components/ui/assistant-ui/ThreadNotEmptyHook.tsx b/examples/ai_button_generate_buttons_based_on_chat_conversation/components/ui/assistant-ui/ThreadNotEmptyHook.tsx deleted file mode 100644 index d708b625b..000000000 --- a/examples/ai_button_generate_buttons_based_on_chat_conversation/components/ui/assistant-ui/ThreadNotEmptyHook.tsx +++ /dev/null @@ -1,17 +0,0 @@ -"use client"; - -import type { FC, ReactNode } from "react"; -import { useThreadEmpty } from "@assistant-ui/react"; - -export type ThreadPrimitiveNotEmptyProps = { - children: ReactNode; -}; - -export const ThreadPrimitiveNotEmpty: FC = ({ - 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"; \ No newline at end of file diff --git a/examples/ai_button_generate_buttons_based_on_chat_conversation/.env.example b/examples/with-inline-suggestions/.env.example similarity index 100% rename from examples/ai_button_generate_buttons_based_on_chat_conversation/.env.example rename to examples/with-inline-suggestions/.env.example diff --git a/examples/ai_button_generate_buttons_based_on_chat_conversation/.eslintrc.json b/examples/with-inline-suggestions/.eslintrc.json similarity index 100% rename from examples/ai_button_generate_buttons_based_on_chat_conversation/.eslintrc.json rename to examples/with-inline-suggestions/.eslintrc.json diff --git a/examples/ai_button_generate_buttons_based_on_chat_conversation/.gitignore b/examples/with-inline-suggestions/.gitignore similarity index 100% rename from examples/ai_button_generate_buttons_based_on_chat_conversation/.gitignore rename to examples/with-inline-suggestions/.gitignore diff --git a/examples/ai_button_generate_buttons_based_on_chat_conversation/LICENSE b/examples/with-inline-suggestions/LICENSE similarity index 100% rename from examples/ai_button_generate_buttons_based_on_chat_conversation/LICENSE rename to examples/with-inline-suggestions/LICENSE diff --git a/examples/ai_button_generate_buttons_based_on_chat_conversation/README.md b/examples/with-inline-suggestions/README.md similarity index 100% rename from examples/ai_button_generate_buttons_based_on_chat_conversation/README.md rename to examples/with-inline-suggestions/README.md diff --git a/examples/ai_button_generate_buttons_based_on_chat_conversation/app/MyRuntimeProvider.tsx b/examples/with-inline-suggestions/app/MyRuntimeProvider.tsx similarity index 100% rename from examples/ai_button_generate_buttons_based_on_chat_conversation/app/MyRuntimeProvider.tsx rename to examples/with-inline-suggestions/app/MyRuntimeProvider.tsx diff --git a/examples/ai_button_generate_buttons_based_on_chat_conversation/app/api/chat/route.ts b/examples/with-inline-suggestions/app/api/chat/route.ts similarity index 100% rename from examples/ai_button_generate_buttons_based_on_chat_conversation/app/api/chat/route.ts rename to examples/with-inline-suggestions/app/api/chat/route.ts diff --git a/examples/ai_button_generate_buttons_based_on_chat_conversation/app/demo.gif b/examples/with-inline-suggestions/app/demo.gif similarity index 100% rename from examples/ai_button_generate_buttons_based_on_chat_conversation/app/demo.gif rename to examples/with-inline-suggestions/app/demo.gif diff --git a/examples/ai_button_generate_buttons_based_on_chat_conversation/app/favicon.ico b/examples/with-inline-suggestions/app/favicon.ico similarity index 100% rename from examples/ai_button_generate_buttons_based_on_chat_conversation/app/favicon.ico rename to examples/with-inline-suggestions/app/favicon.ico diff --git a/examples/ai_button_generate_buttons_based_on_chat_conversation/app/globals.css b/examples/with-inline-suggestions/app/globals.css similarity index 100% rename from examples/ai_button_generate_buttons_based_on_chat_conversation/app/globals.css rename to examples/with-inline-suggestions/app/globals.css diff --git a/examples/ai_button_generate_buttons_based_on_chat_conversation/app/layout.tsx b/examples/with-inline-suggestions/app/layout.tsx similarity index 100% rename from examples/ai_button_generate_buttons_based_on_chat_conversation/app/layout.tsx rename to examples/with-inline-suggestions/app/layout.tsx diff --git a/examples/ai_button_generate_buttons_based_on_chat_conversation/app/page.tsx b/examples/with-inline-suggestions/app/page.tsx similarity index 100% rename from examples/ai_button_generate_buttons_based_on_chat_conversation/app/page.tsx rename to examples/with-inline-suggestions/app/page.tsx diff --git a/examples/ai_button_generate_buttons_based_on_chat_conversation/components.json b/examples/with-inline-suggestions/components.json similarity index 100% rename from examples/ai_button_generate_buttons_based_on_chat_conversation/components.json rename to examples/with-inline-suggestions/components.json diff --git a/examples/ai_button_generate_buttons_based_on_chat_conversation/components/ui/assistant-ui/AI_ThreadSuggestion.tsx b/examples/with-inline-suggestions/components/ui/assistant-ui/AI_ThreadSuggestion.tsx similarity index 100% rename from examples/ai_button_generate_buttons_based_on_chat_conversation/components/ui/assistant-ui/AI_ThreadSuggestion.tsx rename to examples/with-inline-suggestions/components/ui/assistant-ui/AI_ThreadSuggestion.tsx diff --git a/examples/ai_button_generate_buttons_based_on_chat_conversation/components/ui/assistant-ui/LastMessageHook.tsx b/examples/with-inline-suggestions/components/ui/assistant-ui/LastMessageHook.tsx similarity index 100% rename from examples/ai_button_generate_buttons_based_on_chat_conversation/components/ui/assistant-ui/LastMessageHook.tsx rename to examples/with-inline-suggestions/components/ui/assistant-ui/LastMessageHook.tsx diff --git a/examples/ai_button_generate_buttons_based_on_chat_conversation/components/ui/assistant-ui/ThreadSuggestion.tsx b/examples/with-inline-suggestions/components/ui/assistant-ui/ThreadSuggestion.tsx similarity index 100% rename from examples/ai_button_generate_buttons_based_on_chat_conversation/components/ui/assistant-ui/ThreadSuggestion.tsx rename to examples/with-inline-suggestions/components/ui/assistant-ui/ThreadSuggestion.tsx diff --git a/examples/ai_button_generate_buttons_based_on_chat_conversation/components/ui/assistant-ui/actions.ts b/examples/with-inline-suggestions/components/ui/assistant-ui/actions.ts similarity index 100% rename from examples/ai_button_generate_buttons_based_on_chat_conversation/components/ui/assistant-ui/actions.ts rename to examples/with-inline-suggestions/components/ui/assistant-ui/actions.ts diff --git a/examples/ai_button_generate_buttons_based_on_chat_conversation/components/ui/assistant-ui/thread.tsx b/examples/with-inline-suggestions/components/ui/assistant-ui/thread.tsx similarity index 73% rename from examples/ai_button_generate_buttons_based_on_chat_conversation/components/ui/assistant-ui/thread.tsx rename to examples/with-inline-suggestions/components/ui/assistant-ui/thread.tsx index 8edd5c77c..88452885e 100644 --- a/examples/ai_button_generate_buttons_based_on_chat_conversation/components/ui/assistant-ui/thread.tsx +++ b/examples/with-inline-suggestions/components/ui/assistant-ui/thread.tsx @@ -16,12 +16,13 @@ import { } from "@/components/ui/tooltip"; import { cn } from "@/lib/utils"; import { SendHorizonalIcon } from "lucide-react"; -import { ThreadPrimitiveNotEmpty } from "./ThreadNotEmptyHook"; -import AI_ThreadSuggestion from './AI_ThreadSuggestion'; -import ThreadSuggestion from './ThreadSuggestion'; +import AI_ThreadSuggestion from "./AI_ThreadSuggestion"; +import ThreadSuggestion from "./ThreadSuggestion"; - -export const Thread: FC = () => { {/* This is UI for ongoing chat */} +export const Thread: FC = () => { + { + /* This is UI for ongoing chat */ + } return ( @@ -34,16 +35,17 @@ export const Thread: FC = () => { {/* This is UI for ongoing chat */} }} />
- -
-
- {/*Important to wrap Thread suggestion into if statement since the original message is streamed and we don't want to generate buttons ahead of time*/} - - + +
+
+ + {" "} + {/*Important to wrap Thread suggestion into if statement since the original message is streamed and we don't want to generate buttons ahead of time*/} +
- +
@@ -52,17 +54,22 @@ export const Thread: FC = () => { {/* This is UI for ongoing chat */} ); }; -const ThreadWelcome: FC = () => { {/* This is WELCOME UI */} +const ThreadWelcome: FC = () => { + { + /* This is WELCOME UI */ + } return ( -
+
-

- AI_button. Try me +

+ + AI_button. Try me +

-
-
+
+

Press here

 @@ -88,7 +95,7 @@ const Composer: FC = () => {
); -}; \ No newline at end of file +}; diff --git a/examples/ai_button_generate_buttons_based_on_chat_conversation/components/ui/avatar.tsx b/examples/with-inline-suggestions/components/ui/avatar.tsx similarity index 100% rename from examples/ai_button_generate_buttons_based_on_chat_conversation/components/ui/avatar.tsx rename to examples/with-inline-suggestions/components/ui/avatar.tsx diff --git a/examples/ai_button_generate_buttons_based_on_chat_conversation/components/ui/button.tsx b/examples/with-inline-suggestions/components/ui/button.tsx similarity index 100% rename from examples/ai_button_generate_buttons_based_on_chat_conversation/components/ui/button.tsx rename to examples/with-inline-suggestions/components/ui/button.tsx diff --git a/examples/ai_button_generate_buttons_based_on_chat_conversation/components/ui/tooltip.tsx b/examples/with-inline-suggestions/components/ui/tooltip.tsx similarity index 100% rename from examples/ai_button_generate_buttons_based_on_chat_conversation/components/ui/tooltip.tsx rename to examples/with-inline-suggestions/components/ui/tooltip.tsx diff --git a/examples/ai_button_generate_buttons_based_on_chat_conversation/lib/utils.ts b/examples/with-inline-suggestions/lib/utils.ts similarity index 100% rename from examples/ai_button_generate_buttons_based_on_chat_conversation/lib/utils.ts rename to examples/with-inline-suggestions/lib/utils.ts diff --git a/examples/ai_button_generate_buttons_based_on_chat_conversation/next.config.mjs b/examples/with-inline-suggestions/next.config.mjs similarity index 100% rename from examples/ai_button_generate_buttons_based_on_chat_conversation/next.config.mjs rename to examples/with-inline-suggestions/next.config.mjs diff --git a/examples/ai_button_generate_buttons_based_on_chat_conversation/package.json b/examples/with-inline-suggestions/package.json similarity index 87% rename from examples/ai_button_generate_buttons_based_on_chat_conversation/package.json rename to examples/with-inline-suggestions/package.json index 6747a56e7..9a9c0159b 100644 --- a/examples/ai_button_generate_buttons_based_on_chat_conversation/package.json +++ b/examples/with-inline-suggestions/package.json @@ -1,5 +1,5 @@ { - "name": "assistant-ui-starter", + "name": "with-inline-suggestions", "version": "0.1.0", "private": true, "scripts": { @@ -11,8 +11,8 @@ "dependencies": { "@ai-sdk/openai": "^0.0.34", "@ai-sdk/react": "^0.0.16", - "@assistant-ui/react": "^0.3", - "@assistant-ui/react-ai-sdk": "^0.3", + "@assistant-ui/react": "workspace:*", + "@assistant-ui/react-ai-sdk": "workspace:*", "@radix-ui/react-avatar": "^1.1.0", "@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-tooltip": "^1.1.2", diff --git a/examples/ai_button_generate_buttons_based_on_chat_conversation/postcss.config.mjs b/examples/with-inline-suggestions/postcss.config.mjs similarity index 100% rename from examples/ai_button_generate_buttons_based_on_chat_conversation/postcss.config.mjs rename to examples/with-inline-suggestions/postcss.config.mjs diff --git a/examples/ai_button_generate_buttons_based_on_chat_conversation/tailwind.config.ts b/examples/with-inline-suggestions/tailwind.config.ts similarity index 100% rename from examples/ai_button_generate_buttons_based_on_chat_conversation/tailwind.config.ts rename to examples/with-inline-suggestions/tailwind.config.ts diff --git a/examples/ai_button_generate_buttons_based_on_chat_conversation/tsconfig.json b/examples/with-inline-suggestions/tsconfig.json similarity index 100% rename from examples/ai_button_generate_buttons_based_on_chat_conversation/tsconfig.json rename to examples/with-inline-suggestions/tsconfig.json diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fd7437863..8e60525d0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -166,6 +166,82 @@ importers: specifier: ^5.5.3 version: 5.5.3 + examples/ai_button_generate_buttons_based_on_chat_conversation: + dependencies: + '@ai-sdk/openai': + specifier: ^0.0.34 + version: 0.0.34(zod@3.23.8) + '@ai-sdk/react': + specifier: ^0.0.16 + version: 0.0.16(react@18.3.1)(zod@3.23.8) + '@assistant-ui/react': + specifier: ^0.3 + version: link:../../packages/react + '@assistant-ui/react-ai-sdk': + specifier: ^0.3 + version: link:../../packages/react-ai-sdk + '@radix-ui/react-avatar': + specifier: ^1.1.0 + version: 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-slot': + specifier: ^1.1.0 + version: 1.1.0(@types/react@18.3.3)(react@18.3.1) + '@radix-ui/react-tooltip': + specifier: ^1.1.2 + version: 1.1.2(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + ai: + specifier: ^3.2.16 + version: 3.2.16(openai@4.52.3)(react@18.3.1)(svelte@4.2.18)(vue@3.4.31(typescript@5.5.3))(zod@3.23.8) + class-variance-authority: + specifier: ^0.7.0 + version: 0.7.0 + clsx: + specifier: ^2.1.1 + version: 2.1.1 + lucide-react: + specifier: ^0.400.0 + version: 0.400.0(react@18.3.1) + next: + specifier: 14.2.4 + version: 14.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + react: + specifier: ^18 + version: 18.3.1 + react-dom: + specifier: ^18 + version: 18.3.1(react@18.3.1) + tailwind-merge: + specifier: ^2.3.0 + version: 2.3.0 + tailwindcss-animate: + specifier: ^1.0.7 + version: 1.0.7(tailwindcss@3.4.4) + devDependencies: + '@types/node': + specifier: ^20 + version: 20.14.9 + '@types/react': + specifier: ^18 + version: 18.3.3 + '@types/react-dom': + specifier: ^18 + version: 18.3.0 + eslint: + specifier: ^8 + version: 8.57.0 + eslint-config-next: + specifier: 14.2.4 + version: 14.2.4(eslint@8.57.0)(typescript@5.5.3) + postcss: + specifier: ^8 + version: 8.4.39 + tailwindcss: + specifier: ^3.4.4 + version: 3.4.4 + typescript: + specifier: ^5 + version: 5.5.3 + examples/search-agent-for-e-commerce: dependencies: '@ai-sdk/openai':