Merge pull request #4822 from OmarSalouss/fix/ai-chat-input-width

Author: zbeyens

apps/www/public/r/editor.json

@@ -9,12 +9,12 @@
   "files": [
     {
       "path": "src/registry/ui/editor.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\n\nimport type { VariantProps } from 'class-variance-authority';\nimport type { PlateContentProps, PlateViewProps } from 'platejs/react';\n\nimport { cva } from 'class-variance-authority';\nimport { PlateContainer, PlateContent, PlateView } from 'platejs/react';\n\nimport { cn } from '@/lib/utils';\n\nconst editorContainerVariants = cva(\n  'relative w-full cursor-text select-text overflow-y-auto caret-primary selection:bg-brand/25 focus-visible:outline-none [&_.slate-selection-area]:z-50 [&_.slate-selection-area]:border [&_.slate-selection-area]:border-brand/25 [&_.slate-selection-area]:bg-brand/15',\n  {\n    defaultVariants: {\n      variant: 'default',\n    },\n    variants: {\n      variant: {\n        comment: cn(\n          'flex flex-wrap justify-between gap-1 px-1 py-0.5 text-sm',\n          'rounded-md border-[1.5px] border-transparent bg-transparent',\n          'has-[[data-slate-editor]:focus]:border-brand/50 has-[[data-slate-editor]:focus]:ring-2 has-[[data-slate-editor]:focus]:ring-brand/30',\n          'has-aria-disabled:border-input has-aria-disabled:bg-muted'\n        ),\n        default: 'h-full',\n        demo: 'h-[650px]',\n        select: cn(\n          'group rounded-md border border-input ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2',\n          'has-data-readonly:w-fit has-data-readonly:cursor-default has-data-readonly:border-transparent has-data-readonly:focus-within:[box-shadow:none]'\n        ),\n      },\n    },\n  }\n);\n\nexport function EditorContainer({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof editorContainerVariants>) {\n  return (\n    <PlateContainer\n      className={cn(\n        'ignore-click-outside/toolbar',\n        editorContainerVariants({ variant }),\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nconst editorVariants = cva(\n  cn(\n    'group/editor',\n    'relative w-full cursor-text select-text overflow-x-hidden whitespace-pre-wrap break-words',\n    'rounded-md ring-offset-background focus-visible:outline-none',\n    '**:data-slate-placeholder:!top-1/2 **:data-slate-placeholder:-translate-y-1/2 placeholder:text-muted-foreground/80 **:data-slate-placeholder:text-muted-foreground/80 **:data-slate-placeholder:opacity-100!',\n    '[&_strong]:font-bold'\n  ),\n  {\n    defaultVariants: {\n      variant: 'default',\n    },\n    variants: {\n      disabled: {\n        true: 'cursor-not-allowed opacity-50',\n      },\n      focused: {\n        true: 'ring-2 ring-ring ring-offset-2',\n      },\n      variant: {\n        ai: 'w-full px-0 text-base md:text-sm',\n        aiChat:\n          'max-h-[min(70vh,320px)] w-full max-w-[700px] overflow-y-auto px-3 py-2 text-base md:text-sm',\n        comment: cn('rounded-none border-none bg-transparent text-sm'),\n        default:\n          'size-full px-16 pt-4 pb-72 text-base sm:px-[max(64px,calc(50%-350px))]',\n        demo: 'size-full px-16 pt-4 pb-72 text-base sm:px-[max(64px,calc(50%-350px))]',\n        fullWidth: 'size-full px-16 pt-4 pb-72 text-base sm:px-24',\n        none: '',\n        select: 'px-3 py-2 text-base data-readonly:w-fit',\n      },\n    },\n  }\n);\n\nexport type EditorProps = PlateContentProps &\n  VariantProps<typeof editorVariants>;\n\nexport const Editor = ({\n  className,\n  disabled,\n  focused,\n  variant,\n  ref,\n  ...props\n}: EditorProps & { ref?: React.RefObject<HTMLDivElement | null> }) => (\n  <PlateContent\n    ref={ref}\n    className={cn(\n      editorVariants({\n        disabled,\n        focused,\n        variant,\n      }),\n      className\n    )}\n    disabled={disabled}\n    disableDefaultStyles\n    {...props}\n  />\n);\n\nEditor.displayName = 'Editor';\n\nexport function EditorView({\n  className,\n  variant,\n  ...props\n}: PlateViewProps & VariantProps<typeof editorVariants>) {\n  return (\n    <PlateView\n      {...props}\n      className={cn(editorVariants({ variant }), className)}\n    />\n  );\n}\n\nEditorView.displayName = 'EditorView';\n",
+      "content": "'use client';\n\nimport * as React from 'react';\n\nimport type { VariantProps } from 'class-variance-authority';\nimport type { PlateContentProps, PlateViewProps } from 'platejs/react';\n\nimport { cva } from 'class-variance-authority';\nimport { PlateContainer, PlateContent, PlateView } from 'platejs/react';\n\nimport { cn } from '@/lib/utils';\n\nconst editorContainerVariants = cva(\n  'relative w-full cursor-text select-text overflow-y-auto caret-primary selection:bg-brand/25 focus-visible:outline-none [&_.slate-selection-area]:z-50 [&_.slate-selection-area]:border [&_.slate-selection-area]:border-brand/25 [&_.slate-selection-area]:bg-brand/15',\n  {\n    defaultVariants: {\n      variant: 'default',\n    },\n    variants: {\n      variant: {\n        comment: cn(\n          'flex flex-wrap justify-between gap-1 px-1 py-0.5 text-sm',\n          'rounded-md border-[1.5px] border-transparent bg-transparent',\n          'has-[[data-slate-editor]:focus]:border-brand/50 has-[[data-slate-editor]:focus]:ring-2 has-[[data-slate-editor]:focus]:ring-brand/30',\n          'has-aria-disabled:border-input has-aria-disabled:bg-muted'\n        ),\n        default: 'h-full',\n        demo: 'h-[650px]',\n        select: cn(\n          'group rounded-md border border-input ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2',\n          'has-data-readonly:w-fit has-data-readonly:cursor-default has-data-readonly:border-transparent has-data-readonly:focus-within:[box-shadow:none]'\n        ),\n      },\n    },\n  }\n);\n\nexport function EditorContainer({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof editorContainerVariants>) {\n  return (\n    <PlateContainer\n      className={cn(\n        'ignore-click-outside/toolbar',\n        editorContainerVariants({ variant }),\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nconst editorVariants = cva(\n  cn(\n    'group/editor',\n    'relative w-full cursor-text select-text overflow-x-hidden whitespace-pre-wrap break-words',\n    'rounded-md ring-offset-background focus-visible:outline-none',\n    '**:data-slate-placeholder:!top-1/2 **:data-slate-placeholder:-translate-y-1/2 placeholder:text-muted-foreground/80 **:data-slate-placeholder:text-muted-foreground/80 **:data-slate-placeholder:opacity-100!',\n    '[&_strong]:font-bold'\n  ),\n  {\n    defaultVariants: {\n      variant: 'default',\n    },\n    variants: {\n      disabled: {\n        true: 'cursor-not-allowed opacity-50',\n      },\n      focused: {\n        true: 'ring-2 ring-ring ring-offset-2',\n      },\n      variant: {\n        ai: 'w-full px-0 text-base md:text-sm',\n        aiChat:\n          'max-h-[min(70vh,320px)] w-full overflow-y-auto px-3 py-2 text-base md:text-sm',\n        comment: cn('rounded-none border-none bg-transparent text-sm'),\n        default:\n          'size-full px-16 pt-4 pb-72 text-base sm:px-[max(64px,calc(50%-350px))]',\n        demo: 'size-full px-16 pt-4 pb-72 text-base sm:px-[max(64px,calc(50%-350px))]',\n        fullWidth: 'size-full px-16 pt-4 pb-72 text-base sm:px-24',\n        none: '',\n        select: 'px-3 py-2 text-base data-readonly:w-fit',\n      },\n    },\n  }\n);\n\nexport type EditorProps = PlateContentProps &\n  VariantProps<typeof editorVariants>;\n\nexport const Editor = ({\n  className,\n  disabled,\n  focused,\n  variant,\n  ref,\n  ...props\n}: EditorProps & { ref?: React.RefObject<HTMLDivElement | null> }) => (\n  <PlateContent\n    ref={ref}\n    className={cn(\n      editorVariants({\n        disabled,\n        focused,\n        variant,\n      }),\n      className\n    )}\n    disabled={disabled}\n    disableDefaultStyles\n    {...props}\n  />\n);\n\nEditor.displayName = 'Editor';\n\nexport function EditorView({\n  className,\n  variant,\n  ...props\n}: PlateViewProps & VariantProps<typeof editorVariants>) {\n  return (\n    <PlateView\n      {...props}\n      className={cn(editorVariants({ variant }), className)}\n    />\n  );\n}\n\nEditorView.displayName = 'EditorView';\n",
       "type": "registry:ui"
     },
     {
       "path": "src/registry/ui/editor-static.tsx",
-      "content": "import * as React from 'react';\n\nimport type { VariantProps } from 'class-variance-authority';\n\nimport { cva } from 'class-variance-authority';\nimport { type PlateStaticProps, PlateStatic } from 'platejs/static';\n\nimport { cn } from '@/lib/utils';\n\nexport const editorVariants = cva(\n  cn(\n    'group/editor',\n    'relative w-full cursor-text select-text overflow-x-hidden whitespace-pre-wrap break-words',\n    'rounded-md ring-offset-background focus-visible:outline-none',\n    'placeholder:text-muted-foreground/80 **:data-slate-placeholder:top-[auto_!important] **:data-slate-placeholder:text-muted-foreground/80 **:data-slate-placeholder:opacity-100!',\n    '[&_strong]:font-bold'\n  ),\n  {\n    defaultVariants: {\n      variant: 'none',\n    },\n    variants: {\n      disabled: {\n        true: 'cursor-not-allowed opacity-50',\n      },\n      focused: {\n        true: 'ring-2 ring-ring ring-offset-2',\n      },\n      variant: {\n        ai: 'w-full px-0 text-base md:text-sm',\n        aiChat:\n          'max-h-[min(70vh,320px)] w-full max-w-[700px] overflow-y-auto px-5 py-3 text-base md:text-sm',\n        default:\n          'size-full px-16 pt-4 pb-72 text-base sm:px-[max(64px,calc(50%-350px))]',\n        demo: 'size-full px-16 pt-4 pb-72 text-base sm:px-[max(64px,calc(50%-350px))]',\n        fullWidth: 'size-full px-16 pt-4 pb-72 text-base sm:px-24',\n        none: '',\n        select: 'px-3 py-2 text-base data-readonly:w-fit',\n      },\n    },\n  }\n);\n\nexport function EditorStatic({\n  className,\n  variant,\n  ...props\n}: PlateStaticProps & VariantProps<typeof editorVariants>) {\n  return (\n    <PlateStatic\n      className={cn(editorVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n",
+      "content": "import * as React from 'react';\n\nimport type { VariantProps } from 'class-variance-authority';\n\nimport { cva } from 'class-variance-authority';\nimport { type PlateStaticProps, PlateStatic } from 'platejs/static';\n\nimport { cn } from '@/lib/utils';\n\nexport const editorVariants = cva(\n  cn(\n    'group/editor',\n    'relative w-full cursor-text select-text overflow-x-hidden whitespace-pre-wrap break-words',\n    'rounded-md ring-offset-background focus-visible:outline-none',\n    'placeholder:text-muted-foreground/80 **:data-slate-placeholder:top-[auto_!important] **:data-slate-placeholder:text-muted-foreground/80 **:data-slate-placeholder:opacity-100!',\n    '[&_strong]:font-bold'\n  ),\n  {\n    defaultVariants: {\n      variant: 'none',\n    },\n    variants: {\n      disabled: {\n        true: 'cursor-not-allowed opacity-50',\n      },\n      focused: {\n        true: 'ring-2 ring-ring ring-offset-2',\n      },\n      variant: {\n        ai: 'w-full px-0 text-base md:text-sm',\n        aiChat:\n          'max-h-[min(70vh,320px)] w-full overflow-y-auto px-5 py-3 text-base md:text-sm',\n        default:\n          'size-full px-16 pt-4 pb-72 text-base sm:px-[max(64px,calc(50%-350px))]',\n        demo: 'size-full px-16 pt-4 pb-72 text-base sm:px-[max(64px,calc(50%-350px))]',\n        fullWidth: 'size-full px-16 pt-4 pb-72 text-base sm:px-24',\n        none: '',\n        select: 'px-3 py-2 text-base data-readonly:w-fit',\n      },\n    },\n  }\n);\n\nexport function EditorStatic({\n  className,\n  variant,\n  ...props\n}: PlateStaticProps & VariantProps<typeof editorVariants>) {\n  return (\n    <PlateStatic\n      className={cn(editorVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n",
       "type": "registry:ui"
     }
   ],

apps/www/src/registry/ui/editor-static.tsx

@@ -29,7 +29,7 @@ export const editorVariants = cva(
       variant: {
         ai: 'w-full px-0 text-base md:text-sm',
         aiChat:
-          'max-h-[min(70vh,320px)] w-full max-w-[700px] overflow-y-auto px-5 py-3 text-base md:text-sm',
+          'max-h-[min(70vh,320px)] w-full overflow-y-auto px-5 py-3 text-base md:text-sm',
         default:
           'size-full px-16 pt-4 pb-72 text-base sm:px-[max(64px,calc(50%-350px))]',
         demo: 'size-full px-16 pt-4 pb-72 text-base sm:px-[max(64px,calc(50%-350px))]',

apps/www/src/registry/ui/editor.tsx

@@ -74,7 +74,7 @@ const editorVariants = cva(
       variant: {
         ai: 'w-full px-0 text-base md:text-sm',
         aiChat:
-          'max-h-[min(70vh,320px)] w-full max-w-[700px] overflow-y-auto px-3 py-2 text-base md:text-sm',
+          'max-h-[min(70vh,320px)] w-full overflow-y-auto px-3 py-2 text-base md:text-sm',
         comment: cn('rounded-none border-none bg-transparent text-sm'),
         default:
           'size-full px-16 pt-4 pb-72 text-base sm:px-[max(64px,calc(50%-350px))]',

docs/components/changelog.mdx

@@ -10,6 +10,9 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
 
 ## January 2026 #28
 
+### January 20 #28.3
+- **AIChat**: Fixed assistant input width not expanding when panel is expanded
+
 ### January 19 #28.2
 - **`inline-combobox`**: Added keyboard navigation cycling at list boundaries
   - ArrowUp at first item cycles to last item

templates/plate-playground-template/src/components/ui/editor-static.tsx

@@ -26,7 +26,7 @@ export const editorVariants = cva(
       variant: {
         ai: 'w-full px-0 text-base md:text-sm',
         aiChat:
-          'max-h-[min(70vh,320px)] w-full max-w-[700px] overflow-y-auto px-5 py-3 text-base md:text-sm',
+          'max-h-[min(70vh,320px)] w-full overflow-y-auto px-5 py-3 text-base md:text-sm',
         default:
           'size-full px-16 pt-4 pb-72 text-base sm:px-[max(64px,calc(50%-350px))]',
         demo: 'size-full px-16 pt-4 pb-72 text-base sm:px-[max(64px,calc(50%-350px))]',

templates/plate-playground-template/src/components/ui/editor.tsx

@@ -72,7 +72,7 @@ const editorVariants = cva(
       variant: {
         ai: 'w-full px-0 text-base md:text-sm',
         aiChat:
-          'max-h-[min(70vh,320px)] w-full max-w-[700px] overflow-y-auto px-3 py-2 text-base md:text-sm',
+          'max-h-[min(70vh,320px)] w-full overflow-y-auto px-3 py-2 text-base md:text-sm',
         comment: cn('rounded-none border-none bg-transparent text-sm'),
         default:
           'size-full px-16 pt-4 pb-72 text-base sm:px-[max(64px,calc(50%-350px))]',

templates/plate-template/src/components/ui/editor-static.tsx

@@ -26,7 +26,7 @@ export const editorVariants = cva(
       variant: {
         ai: 'w-full px-0 text-base md:text-sm',
         aiChat:
-          'max-h-[min(70vh,320px)] w-full max-w-[700px] overflow-y-auto px-5 py-3 text-base md:text-sm',
+          'max-h-[min(70vh,320px)] w-full overflow-y-auto px-5 py-3 text-base md:text-sm',
         default:
           'size-full px-16 pt-4 pb-72 text-base sm:px-[max(64px,calc(50%-350px))]',
         demo: 'size-full px-16 pt-4 pb-72 text-base sm:px-[max(64px,calc(50%-350px))]',

templates/plate-template/src/components/ui/editor.tsx

@@ -72,7 +72,7 @@ const editorVariants = cva(
       variant: {
         ai: 'w-full px-0 text-base md:text-sm',
         aiChat:
-          'max-h-[min(70vh,320px)] w-full max-w-[700px] overflow-y-auto px-3 py-2 text-base md:text-sm',
+          'max-h-[min(70vh,320px)] w-full overflow-y-auto px-3 py-2 text-base md:text-sm',
         comment: cn('rounded-none border-none bg-transparent text-sm'),
         default:
           'size-full px-16 pt-4 pb-72 text-base sm:px-[max(64px,calc(50%-350px))]',