Initial commit

2025-11-30 08:41:51 +08:00
commit 43ed648a28
43 changed files with 8444 additions and 0 deletions
--- a/docs/components/response.md
+++ b/docs/components/response.md
@@ -0,0 +1,153 @@
+# Response
+
+URL: /components/response
+
+---
+
+title: Response
+description: A component that renders a Markdown response from a large language model.
+path: elements/components/response
+
+---
+
+The `Response` component renders a Markdown response from a large language model. It uses [Streamdown](https://streamdown.ai/) under the hood to render the markdown.
+
+<Preview path="response" />
+
+## Installation
+
+<ElementsInstaller path="response" />
+
+<Callout label={false} type="warning">
+  **Important:** After adding the component, you'll need to add the following to your `globals.css` file:
+
+```css
+@source "../node_modules/streamdown/dist/index.js";
+```
+
+This is **required** for the Response component to work properly. Without this import, the Streamdown styles will not be applied to your project. See [Streamdown's documentation](https://streamdown.ai/) for more details.
+</Callout>
+
+## Usage
+
+```tsx
+import { Response } from "@/components/ai-elements/response";
+```
+
+```tsx
+<Response>**Hi there.** I am an AI model designed to help you.</Response>
+```
+
+## Usage with AI SDK
+
+Populate a markdown response with messages from [`useChat`](/docs/reference/ai-sdk-ui/use-chat).
+
+Add the following component to your frontend:
+
+```tsx title="app/page.tsx"
+"use client";
+
+import { Conversation, ConversationContent, ConversationScrollButton } from "@/components/ai-elements/conversation";
+import { Message, MessageContent } from "@/components/ai-elements/message";
+import { useChat } from "@ai-sdk/react";
+import { Response } from "@/components/ai-elements/response";
+
+const ResponseDemo = () => {
+    const { messages } = useChat();
+
+    return (
+        <div className="max-w-4xl mx-auto p-6 relative size-full rounded-lg border h-[600px]">
+            <div className="flex flex-col h-full">
+                <Conversation>
+                    <ConversationContent>
+                        {messages.map((message) => (
+                            <Message from={message.role} key={message.id}>
+                                <MessageContent>
+                                    {message.parts.map((part, i) => {
+                                        switch (part.type) {
+                                            case "text": // we don't use any reasoning or tool calls in this example
+                                                return <Response key={`${message.id}-${i}`}>{part.text}</Response>;
+                                            default:
+                                                return null;
+                                        }
+                                    })}
+                                </MessageContent>
+                            </Message>
+                        ))}
+                    </ConversationContent>
+                    <ConversationScrollButton />
+                </Conversation>
+            </div>
+        </div>
+    );
+};
+
+export default ResponseDemo;
+```
+
+## Features
+
+-   Renders markdown content with support for paragraphs, links, and code blocks
+-   Supports GFM features like tables, task lists, and strikethrough text via remark-gfm
+-   Supports rendering Math Equations via rehype-katex
+-   **Smart streaming support** - automatically completes incomplete formatting during real-time text streaming
+-   Code blocks are rendered with syntax highlighting for various programming languages
+-   Code blocks include a button to easily copy code to clipboard
+-   Adapts to different screen sizes while maintaining readability
+-   Seamlessly integrates with both light and dark themes
+-   Customizable appearance through className props and Tailwind CSS utilities
+-   Built with accessibility in mind for all users
+
+## Props
+
+### `<Response />`
+
+<TypeTable
+type={{
+  children: {
+    description: 'The markdown content to render.',
+    type: 'string',
+  },
+  parseIncompleteMarkdown: {
+    description: 'Whether to parse and fix incomplete markdown syntax (e.g., unclosed code blocks or lists).',
+    type: 'boolean',
+    default: 'true',
+  },
+  className: {
+    description: 'CSS class names to apply to the wrapper div element.',
+    type: 'string',
+  },
+  components: {
+    description: 'Custom React components to use for rendering markdown elements (e.g., custom heading, paragraph, code block components).',
+    type: 'object',
+  },
+  allowedImagePrefixes: {
+    description: 'Array of allowed URL prefixes for images. Use ["*"] to allow all images.',
+    type: 'string[]',
+    default: '["*"]',
+  },
+  allowedLinkPrefixes: {
+    description: 'Array of allowed URL prefixes for links. Use ["*"] to allow all links.',
+    type: 'string[]',
+    default: '["*"]',
+  },
+  defaultOrigin: {
+    description: 'Default origin to use for relative URLs in links and images.',
+    type: 'string',
+  },
+  rehypePlugins: {
+    description: 'Array of rehype plugins to use for processing HTML. Includes KaTeX for math rendering by default.',
+    type: 'array',
+    default: '[rehypeKatex]',
+  },
+  remarkPlugins: {
+    description: 'Array of remark plugins to use for processing markdown. Includes GitHub Flavored Markdown and math support by default.',
+    type: 'array',
+    default: '[remarkGfm, remarkMath]',
+  },
+  '...props': {
+    description: 'Any other props are spread to the root div.',
+    type: 'React.HTMLAttributes<HTMLDivElement>',
+  },
+}}
+/>