Initial commit

2025-11-30 08:41:51 +08:00
commit 43ed648a28
43 changed files with 8444 additions and 0 deletions
--- a/docs/components/open-in-chat.md
+++ b/docs/components/open-in-chat.md
@@ -0,0 +1,133 @@
+# Open In Chat
+
+URL: /components/open-in-chat
+
+---
+
+title: Open In Chat
+description: A dropdown menu for opening queries in various AI chat platforms including ChatGPT, Claude, T3, Scira, and v0.
+path: elements/components/open-in-chat
+
+---
+
+The `OpenIn` component provides a dropdown menu that allows users to open queries in different AI chat platforms with a single click.
+
+<Preview path="open-in-chat" />
+
+## Installation
+
+<ElementsInstaller path="open-in-chat" />
+
+## Usage
+
+```tsx
+import {
+    OpenIn,
+    OpenInChatGPT,
+    OpenInClaude,
+    OpenInContent,
+    OpenInCursor,
+    OpenInScira,
+    OpenInT3,
+    OpenInTrigger,
+    OpenInv0,
+} from "@/components/ai-elements/open-in-chat";
+```
+
+```tsx
+<OpenIn query="How can I implement authentication in Next.js?">
+    <OpenInTrigger />
+    <OpenInContent>
+        <OpenInChatGPT />
+        <OpenInClaude />
+        <OpenInT3 />
+        <OpenInScira />
+        <OpenInv0 />
+        <OpenInCursor />
+    </OpenInContent>
+</OpenIn>
+```
+
+## Features
+
+-   Pre-configured links to popular AI chat platforms
+-   Context-based query passing for cleaner API
+-   Customizable dropdown trigger button
+-   Automatic URL parameter encoding for queries
+-   Support for ChatGPT, Claude, T3 Chat, Scira AI, v0, and Cursor
+-   Branded icons for each platform
+-   TypeScript support with proper type definitions
+-   Accessible dropdown menu with keyboard navigation
+-   External link indicators for clarity
+
+## Supported Platforms
+
+-   **ChatGPT** - Opens query in OpenAI's ChatGPT with search hints
+-   **Claude** - Opens query in Anthropic's Claude AI
+-   **T3 Chat** - Opens query in T3 Chat platform
+-   **Scira AI** - Opens query in Scira's AI assistant
+-   **v0** - Opens query in Vercel's v0 platform
+-   **Cursor** - Opens query in Cursor AI editor
+
+## Props
+
+### `<OpenIn />`
+
+<TypeTable
+type={{
+  query: {
+    description: 'The query text to be sent to all AI platforms.',
+    type: 'string',
+  },
+  '...props': {
+    description: 'Props to spread to the underlying radix-ui DropdownMenu component.',
+    type: 'React.ComponentProps<typeof DropdownMenu>',
+  },
+}}
+/>
+
+### `<OpenInTrigger />`
+
+<TypeTable
+type={{
+  children: {
+    description: 'Custom trigger button.',
+    type: 'React.ReactNode',
+    default: '"Open in chat" button with chevron icon',
+  },
+  '...props': {
+    description: 'Props to spread to the underlying DropdownMenuTrigger component.',
+    type: 'React.ComponentProps<typeof DropdownMenuTrigger>',
+  },
+}}
+/>
+
+### `<OpenInContent />`
+
+<TypeTable
+type={{
+  className: {
+    description: 'Additional CSS classes to apply to the dropdown content.',
+    type: 'string',
+  },
+  '...props': {
+    description: 'Props to spread to the underlying DropdownMenuContent component.',
+    type: 'React.ComponentProps<typeof DropdownMenuContent>',
+  },
+}}
+/>
+
+### `<OpenInChatGPT />`, `<OpenInClaude />`, `<OpenInT3 />`, `<OpenInScira />`, `<OpenInv0 />`, `<OpenInCursor />`
+
+<TypeTable
+type={{
+  '...props': {
+    description: 'Props to spread to the underlying DropdownMenuItem component. The query is automatically provided via context from the parent OpenIn component.',
+    type: 'React.ComponentProps<typeof DropdownMenuItem>',
+  },
+}}
+/>
+
+### `<OpenInItem />`, `<OpenInLabel />`, `<OpenInSeparator />`
+
+Additional composable components for custom dropdown menu items, labels, and separators that follow the same props pattern as their underlying radix-ui counterparts.