Fixes

Blazity · Oct 26, 2024 · c6a2b33 · c6a2b33
1 parent 551eafa
commit c6a2b33
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 12 deletions.
diff --git a/apps/www/content/docs/components/chat.mdx b/apps/www/content/docs/components/chat.mdx
@@ -34,7 +34,7 @@ The Chat component provides a complete chat interface with message history, typi
 <TabsContent value="cli">
 
 ```bash
-npx shadcn@latest add chat
+npx shadcn@latest add https://shadcn-chatbot-kit.vercel.app/r/chat.json
 ```
 
 </TabsContent>

diff --git a/apps/www/content/docs/components/message-input.mdx b/apps/www/content/docs/components/message-input.mdx
@@ -33,7 +33,7 @@ The MessageInput component provides a rich textarea experience with support for
 <TabsContent value="cli">
 
 ```bash
-npx shadcn@latest add message-input
+npx shadcn@latest add https://shadcn-chatbot-kit.vercel.app/r/message-input.json
 ```
 
 </TabsContent>
@@ -211,14 +211,6 @@ Show stop button during generation:
 </ChatForm>
 ```
 
-## Design
-
-1. The component uses Framer Motion for smooth animations
-2. File attachments are displayed as removable chips
-3. The textarea auto-resizes for better user experience
-4. The submit button is disabled when input is empty
-5. The submit button changes to a cancel button while generating, if `stop` prop is provided, if not it is disabled during generation
-
 ## Theming
 
 The Chat component is using theme colors and fully themable with CSS variables.
diff --git a/apps/www/public/r/markdown-renderer.json b/apps/www/public/r/markdown-renderer.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "ui/markdown-renderer.tsx",
-      "content": "import Markdown from \"react-markdown\"\nimport remarkGfm from \"remark-gfm\"\n\ninterface MarkdownRendererProps {\n  children: string\n}\n\nexport function MarkdownRenderer({ children }: MarkdownRendererProps) {\n  return (\n    <Markdown remarkPlugins={[remarkGfm]} components={COMPONENTS}>\n      {children}\n    </Markdown>\n  )\n}\n\nconst COMPONENTS = {\n  h1: withClass(\"h1\", \"text-2xl font-semibold\"),\n  h2: withClass(\"h2\", \"font-semibold text-xl\"),\n  h3: withClass(\"h3\", \"font-semibold text-lg\"),\n  h4: withClass(\"h4\", \"font-semibold text-base\"),\n  h5: withClass(\"h5\", \"font-medium\"),\n  strong: withClass(\"strong\", \"font-semibold\"),\n  a: withClass(\"a\", \"text-primary underline underline-offset-2\"),\n  blockquote: withClass(\"blockquote\", \"border-l-2 border-primary pl-4\"),\n  // TODO fix anys\n  code: ({ children, className, node, ...rest }: any) => {\n    console.log(\"code renderer\", children)\n    const match = /language-(\\w+)/.exec(className || \"\")\n    return match ? (\n      // TODO: syntax highlighting\n      <>\n        <p>{match[1]}</p>\n        <code\n          className=\"font-mono [:not(pre)>&]:rounded-md [:not(pre)>&]:bg-background/50 [:not(pre)>&]:px-1 [:not(pre)>&]:py-0.5\"\n          {...rest}\n        >\n          {children}\n        </code>\n      </>\n    ) : (\n      <code\n        className=\"font-mono [:not(pre)>&]:rounded-md [:not(pre)>&]:bg-background/50 [:not(pre)>&]:px-1 [:not(pre)>&]:py-0.5\"\n        {...rest}\n      >\n        {children}\n      </code>\n    )\n  },\n  ol: withClass(\"ol\", \"list-decimal space-y-2 pl-6\"),\n  ul: withClass(\"ul\", \"list-disc space-y-2 pl-6\"),\n  li: withClass(\"li\", \"my-1.5\"),\n  table: withClass(\n    \"table\",\n    \"w-full border-collapse overflow-y-auto rounded-md border border-foreground/20\"\n  ),\n  th: withClass(\n    \"th\",\n    \"border border-foreground/20 px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n  ),\n  td: withClass(\n    \"td\",\n    \"border border-foreground/20 px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n  ),\n  tr: withClass(\"tr\", \"m-0 border-t p-0 even:bg-muted\"),\n  p: withClass(\"p\", \"whitespace-pre-wrap\"),\n  hr: withClass(\"hr\", \"border-foreground/20\"),\n  pre: withClass(\"pre\", \"rounded-md bg-background/50 p-4 font-mono text-sm\"),\n}\n\nfunction withClass(Tag: keyof JSX.IntrinsicElements, classes: string) {\n  const Component = ({ node, ...props }: any) => (\n    <Tag className={classes} {...props} />\n  )\n  Component.displayName = Tag\n  return Component\n}\n",
+      "content": "import Markdown from \"react-markdown\"\nimport remarkGfm from \"remark-gfm\"\n\ninterface MarkdownRendererProps {\n  children: string\n}\n\nexport function MarkdownRenderer({ children }: MarkdownRendererProps) {\n  return (\n    <Markdown remarkPlugins={[remarkGfm]} components={COMPONENTS}>\n      {children}\n    </Markdown>\n  )\n}\n\nconst COMPONENTS = {\n  h1: withClass(\"h1\", \"text-2xl font-semibold\"),\n  h2: withClass(\"h2\", \"font-semibold text-xl\"),\n  h3: withClass(\"h3\", \"font-semibold text-lg\"),\n  h4: withClass(\"h4\", \"font-semibold text-base\"),\n  h5: withClass(\"h5\", \"font-medium\"),\n  strong: withClass(\"strong\", \"font-semibold\"),\n  a: withClass(\"a\", \"text-primary underline underline-offset-2\"),\n  blockquote: withClass(\"blockquote\", \"border-l-2 border-primary pl-4\"),\n  code: ({ children, className, node, ...rest }: any) => {\n    return (\n      <code\n        className=\"font-mono [:not(pre)>&]:rounded-md [:not(pre)>&]:bg-background/50 [:not(pre)>&]:px-1 [:not(pre)>&]:py-0.5\"\n        {...rest}\n      >\n        {children}\n      </code>\n    )\n  },\n  ol: withClass(\"ol\", \"list-decimal space-y-2 pl-6\"),\n  ul: withClass(\"ul\", \"list-disc space-y-2 pl-6\"),\n  li: withClass(\"li\", \"my-1.5\"),\n  table: withClass(\n    \"table\",\n    \"w-full border-collapse overflow-y-auto rounded-md border border-foreground/20\"\n  ),\n  th: withClass(\n    \"th\",\n    \"border border-foreground/20 px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n  ),\n  td: withClass(\n    \"td\",\n    \"border border-foreground/20 px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n  ),\n  tr: withClass(\"tr\", \"m-0 border-t p-0 even:bg-muted\"),\n  p: withClass(\"p\", \"whitespace-pre-wrap\"),\n  hr: withClass(\"hr\", \"border-foreground/20\"),\n  pre: withClass(\"pre\", \"rounded-md bg-background/50 p-4 font-mono text-sm\"),\n}\n\nfunction withClass(Tag: keyof JSX.IntrinsicElements, classes: string) {\n  const Component = ({ node, ...props }: any) => (\n    <Tag className={classes} {...props} />\n  )\n  Component.displayName = Tag\n  return Component\n}\n",
       "type": "registry:ui",
       "target": ""
     }