Open In Chat
The Open In Chat component provides a dropdown menu that allows users to open queries in different AI chat platforms with a single click.
Click the button below to open the query in various AI chat platforms:
Query: "How can I implement authentication in SvelteKit?"
Installation
If you prefer using jsrepo, please install via the command below:
Usage
Props
OpenIn
| Prop | Type | Default | Description |
|---|---|---|---|
query | string | - | The query/prompt text to open in the selected chat provider |
children | Snippet | - | Child components (typically OpenInTrigger and OpenInContent) |
OpenInTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the trigger |
children | Snippet | - | Custom trigger content (defaults to 'Open in chat' button) |
OpenInContent
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the dropdown content |
align | 'start' | 'center' | 'end' | 'start' | Alignment of the dropdown content |
preventScroll | boolean | true | Whether to prevent scrolling when the dropdown is open |
children | Snippet | - | Dropdown content (typically OpenInItem, OpenInLabel, OpenInSeparator) |
OpenInItem
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the item |
onclick | () => void | - | Click handler for the item |
children | Snippet | - | Item content |
OpenInLabel
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the label |
children | Snippet | - | Label content |
OpenInSeparator
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the separator |
OpenInChatGPT
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the ChatGPT menu item |
OpenInClaude
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the Claude menu item |
OpenInV0
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the V0 menu item |
OpenInScira
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the Scira menu item |
OpenInT3
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the T3 menu item |