diff --git a/apps/www/content/docs/components/chat.mdx b/apps/www/content/docs/components/chat.mdx index c04a7da..d6d1af9 100644 --- a/apps/www/content/docs/components/chat.mdx +++ b/apps/www/content/docs/components/chat.mdx @@ -194,17 +194,18 @@ A prebuilt Chat component that provides a complete chat interface with message h ### Props -| Prop | Type | Description | -| ------------------- | ----------------------------------------------------- | ----------------------------------------------------------- | -| `messages` | `Message[]` | Array of chat messages to display | -| `input` | `string` | Current input value | -| `handleInputChange` | `(e: React.ChangeEvent) => void` | Input change handler | -| `handleSubmit` | `(event?, options?) => void` | Form submission handler | -| `isGenerating` | `boolean` | Whether AI is currently generating a response | -| `stop` | `() => void` | Function to stop AI generation | -| `append?` | `(message: Message) => void` | Function to append a new message (required for suggestions) | -| `suggestions?` | `string[]` | Array of prompt suggestions to show when chat is empty | -| `className?` | `string` | Additional CSS classes for ChatContainer | +| Prop | Type | Description | +| ------------------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | +| `messages` | `Message[]` | Array of chat messages to display | +| `input` | `string` | Current input value | +| `handleInputChange` | `(e: React.ChangeEvent) => void` | Input change handler | +| `handleSubmit` | `(event?, options?) => void` | Form submission handler | +| `isGenerating` | `boolean` | Whether AI is currently generating a response | +| `stop` | `() => void` | Function to stop AI generation | +| `append?` | `(message: Message) => void` | Function to append a new message (required for suggestions) | +| `suggestions?` | `string[]` | Array of prompt suggestions to show when chat is empty | +| `onRateResponse?` | `(messageId: string, rating: "thumbs-up" \| "thumbs-down") => void` | Callback to handle user rating of AI responses, if not provided the rating buttons will not be displayed | +| `className?` | `string` | Additional CSS classes for ChatContainer | ## ChatContainer diff --git a/apps/www/content/docs/installation.mdx b/apps/www/content/docs/installation.mdx index c1adfdc03..547bd5f 100644 --- a/apps/www/content/docs/installation.mdx +++ b/apps/www/content/docs/installation.mdx @@ -3,138 +3,12 @@ title: Installation description: How to install dependencies and structure your app. --- -## Frameworks +The installation process is very simple. If you are already using shadcn/ui, you can skip this step and go straight to installing components. -
- - - Next.js - - -

Next.js

- - - - Vite - - -

Vite

- - - - Remix - - -

Remix

- - - - Astro - - -

Astro

- - - - - -

Laravel

- - - - Gatsby - - -

Gatsby

- - - - React - - -

Manual

- -
+If not using shadcn/ui yet, you can follow the steps below: -## TypeScript +1. First, follow the [installation instructions](https://ui.shadcn.com/docs/installation) for shadcn/ui in your project. -This project and the components are written in TypeScript. We recommend using TypeScript for your project as well. +2. Make sure you're using the modern `shadcn` CLI (not the legacy `shadcn-ui`). -However we provide a JavaScript version of the components as well. The JavaScript version is available via the [cli](/docs/cli). - -To opt-out of TypeScript, you can use the `tsx` flag in your `components.json` file. - -```json {10} title="components.json" -{ - "style": "default", - "tailwind": { - "config": "tailwind.config.js", - "css": "src/app/globals.css", - "baseColor": "zinc", - "cssVariables": true - }, - "rsc": false, - "tsx": false, - "aliases": { - "utils": "~/lib/utils", - "components": "~/components" - } -} -``` - -To configure import aliases, you can use the following `jsconfig.json`: - -```json {4} title="jsconfig.json" -{ - "compilerOptions": { - "paths": { - "@/*": ["./*"] - } - } -} -``` +3. Install components using the CLI. diff --git a/apps/www/registry/default/ui/chat.tsx b/apps/www/registry/default/ui/chat.tsx index 70ce1a5..6c9c2bb 100644 --- a/apps/www/registry/default/ui/chat.tsx +++ b/apps/www/registry/default/ui/chat.tsx @@ -23,6 +23,10 @@ interface ChatPropsBase { handleInputChange: React.ChangeEventHandler isGenerating: boolean stop?: () => void + onRateResponse?: ( + messageId: string, + rating: "thumbs-up" | "thumbs-down" + ) => void } interface ChatPropsWithoutSuggestions extends ChatPropsBase { @@ -47,6 +51,7 @@ export function Chat({ append, suggestions, className, + onRateResponse, }: ChatProps) { const lastMessage = messages.at(-1) const isEmpty = messages.length === 0 @@ -64,7 +69,7 @@ export function Chat({ messages={messages} isTyping={isTyping} messageOptions={(message) => ({ - actions: ( + actions: onRateResponse ? ( <>
- - + ) : ( + ), })} />