{"id":26749370,"url":"https://github.com/miskibin/chat-components","last_synced_at":"2025-04-14T23:14:34.164Z","repository":{"id":283259928,"uuid":"951179596","full_name":"miskibin/chat-components","owner":"miskibin","description":"A customizable, accessible chatGPT like UI components built for React applications using the shadcn/ui design system.","archived":false,"fork":false,"pushed_at":"2025-04-07T12:33:32.000Z","size":220,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-14T23:14:30.228Z","etag":null,"topics":["chat-app","inputform","nextjs","shadcn","shadcn-components","typescript","ui"],"latest_commit_sha":null,"homepage":"https://chat-input-azure.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/miskibin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-03-19T09:31:01.000Z","updated_at":"2025-04-07T12:33:36.000Z","dependencies_parsed_at":"2025-03-19T13:02:51.828Z","dependency_job_id":null,"html_url":"https://github.com/miskibin/chat-components","commit_stats":null,"previous_names":["miskibin/chat-input","miskibin/chat-components"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miskibin%2Fchat-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miskibin%2Fchat-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miskibin%2Fchat-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miskibin%2Fchat-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/miskibin","download_url":"https://codeload.github.com/miskibin/chat-components/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248975330,"owners_count":21192210,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chat-app","inputform","nextjs","shadcn","shadcn-components","typescript","ui"],"created_at":"2025-03-28T11:18:53.053Z","updated_at":"2025-04-14T23:14:34.145Z","avatar_url":"https://github.com/miskibin.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Shadcn Chat Components\n\n## [demo](https://chat-input-azure.vercel.app/)\n\nA collection of customizable, accessible chat UI components built for React applications using the shadcn/ui design system.\n\n![image](https://github.com/user-attachments/assets/9fc27797-d32a-4166-a0fc-c5f5e93d1b3e)\n\n## Components\n\nThis package includes several components for building modern chat interfaces:\n\n- **ChatInput**: A textarea component with tools and loading states\n- **Message**: A versatile message component with actions and pattern handling\n- **GenerationStatus**: A component for displaying AI generation progress\n\n## Features\n\n- 💬 Modern chat interface with rich components\n- 🛠️ Support for customizable action buttons and tools\n- 🔍 Pattern handling for citations and other special content\n- ⌨️ Keyboard shortcuts support\n- 🔄 Generation status indicators with stop capability\n- 📱 Responsive design with mobile-friendly UI\n- ♿ Accessibility-focused with proper ARIA attributes\n- 🎨 Fully customizable with Tailwind CSS\n\n## Installation\n\nCopy the component files into your project:\n\n- [ChatInput](components/chat-input.tsx) → `/components/ui/chat-input.tsx`\n- [Message](components/message.tsx) → `/components/ui/message.tsx`\n- [GenerationStatus](components/generation-status.tsx) → `/components/ui/generation-status.tsx`\n\n## Usage Examples\n\n### Chat Input\n\n```jsx\nimport { ChatInput } from \"@/components/ui/chat-input\";\nimport { FileText, Code, ImageIcon } from \"lucide-react\";\n\nexport default function ChatPage() {\n  const handleSendMessage = (message) =\u003e {\n    console.log(\"Message sent:\", message);\n    // Process message here\n  };\n  \n  const handleStopGeneration = () =\u003e {\n    console.log(\"Generation stopped\");\n    // Handle stopping generation\n  };\n  \n  const tools = [\n    {\n      id: \"files\",\n      label: \"Files\",\n      icon: \u003cFileText size={14} /\u003e,\n    },\n    {\n      id: \"code\",\n      label: \"Code\",\n      icon: \u003cCode size={14} /\u003e,\n    },\n    {\n      id: \"images\",\n      label: \"Images\",\n      icon: \u003cImageIcon size={14} /\u003e,\n    },\n  ];\n\n  return (\n    \u003cdiv className=\"max-w-2xl mx-auto\"\u003e\n      \u003cChatInput\n        onSend={handleSendMessage}\n        onStopGeneration={handleStopGeneration}\n        isLoading={false}\n        placeholder=\"Type your message...\"\n        tools={tools}\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### Message Component\n\n```jsx\nimport { Message } from \"@/components/ui/message\";\nimport { Copy, ThumbsUp, ThumbsDown, Info } from \"lucide-react\";\n\nexport default function ChatMessages() {\n  const actionButtons = [\n    {\n      id: \"copy\",\n      icon: \u003cCopy size={14} /\u003e,\n      onClick: () =\u003e console.log(\"Copy clicked\"),\n      title: \"Copy message\",\n      position: \"inside\",\n    },\n    {\n      id: \"like\",\n      icon: \u003cThumbsUp size={14} /\u003e,\n      onClick: () =\u003e console.log(\"Like clicked\"),\n      title: \"Like response\",\n      position: \"inside\",\n    },\n    {\n      id: \"info\",\n      icon: \u003cInfo size={14} /\u003e,\n      onClick: () =\u003e console.log(\"Info clicked\"),\n      title: \"View message info\",\n      position: \"inside\",\n    },\n  ];\n\n  return (\n    \u003cdiv className=\"space-y-4\"\u003e\n      \u003cMessage\n        content=\"How can I help you today?\"\n        sender=\"assistant\"\n        actionButtons={actionButtons}\n      /\u003e\n      \n      \u003cMessage\n        content=\"I need help with React components\"\n        sender=\"user\"\n        editable={true}\n        onEdit={(newContent) =\u003e console.log(\"Edited:\", newContent)}\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### Generation Status\n\n```jsx\nimport { GenerationStatus } from \"@/components/ui/generation-status\";\n\nexport default function ChatInterface() {\n  const [generationStage, setGenerationStage] = useState(\"thinking\");\n  \n  // Change stage after some time (simulation)\n  useEffect(() =\u003e {\n    if (generationStage === \"thinking\") {\n      const timer = setTimeout(() =\u003e setGenerationStage(\"searching\"), 3000);\n      return () =\u003e clearTimeout(timer);\n    }\n  }, [generationStage]);\n  \n  return (\n    \u003cdiv className=\"p-4\"\u003e\n      \u003cGenerationStatus stage={generationStage} /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## Component Props\n\n### ChatInput Props\n\n| Prop               | Type                        | Description                                |\n| ------------------ | --------------------------- | ------------------------------------------ |\n| `onSend`           | `(message: string) =\u003e void` | Function called when a message is sent     |\n| `onStopGeneration` | `() =\u003e void`                | Function called when generation is stopped |\n| `isLoading`        | `boolean`                   | Whether the component is in loading state  |\n| `placeholder`      | `string`                    | Placeholder text for the textarea          |\n| `tools`            | `Array\u003cToolItem\u003e`           | Array of tools to display in the toolbar   |\n\n### Message Props\n\n| Prop               | Type                        | Description                                  |\n| ------------------ | --------------------------- | -------------------------------------------- |\n| `content`          | `string`                    | The message content                          |\n| `sender`           | `\"user\" \\| \"assistant\"`     | Who sent the message                         |\n| `actionButtons`    | `ActionButton[]`            | Custom action buttons for the message        |\n| `editable`         | `boolean`                   | Whether the message can be edited            |\n| `onEdit`           | `(content: string) =\u003e void` | Called when a message is edited              |\n| `patternHandlers`  | `PatternHandler[]`          | Handlers for special content patterns        |\n| `className`        | `string`                    | Additional CSS class for the component       |\n| `contentClassName` | `string`                    | Additional CSS class for the content wrapper |\n\n### GenerationStatus Props\n\n| Prop        | Type                                                  | Description                            |\n| ----------- | ----------------------------------------------------- | -------------------------------------- |\n| `stage`     | `\"thinking\" \\| \"searching\" \\| \"responding\" \\| \"idle\"` | Current generation stage               |\n| `className` | `string`                                              | Additional CSS class for the component |\n\n## Customization\n\nThe components use Tailwind CSS and can be customized using the `className` props or by modifying the component styling. They integrate with the shadcn/ui theme system, picking up your application's color scheme automatically.\n\n## Accessibility\n\nThese components follow accessibility best practices:\n- Proper keyboard navigation\n- Screen reader-friendly elements with appropriate ARIA labels\n- Focus management\n- High contrast visual indicators\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmiskibin%2Fchat-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmiskibin%2Fchat-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmiskibin%2Fchat-components/lists"}