feat: [AIDEVOPS-1976]: Replaced button with toggle in prompt input (#11066)

* 727890 fix: format

* ab7bf8 feat: [AIDEVOPS-1976]: Replaced button with toggle in prompt input

Author: avinashmadhwani02

apps/portal/src/content/docs/components/chat/prompt-input.mdx

@@ -33,9 +33,7 @@ The `PromptInput` component is a compound component for AI chat interfaces. It i
   <PromptInput.Textarea placeholder="Ask me anything..." />
   <PromptInput.Toolbar>
     <PromptInput.Tools>
-      <PromptInput.Button>
-        <IconV2 name="plus" size="sm" />
-      </PromptInput.Button>
+      <PromptInput.Button prefixIcon="plus" prefixIconProps={{ size: 'sm' }} tooltipProps={{ title: 'Add' }} />
     </PromptInput.Tools>
     <PromptInput.Submit />
   </PromptInput.Toolbar>
@@ -53,9 +51,7 @@ The `PromptInput` component is a compound component for AI chat interfaces. It i
   <PromptInput.Textarea placeholder="Ask me anything..." value="Tell me about React hooks" />
   <PromptInput.Toolbar>
     <PromptInput.Tools>
-      <PromptInput.Button>
-        <IconV2 name="plus" size="sm" />
-      </PromptInput.Button>
+      <PromptInput.Button prefixIcon="plus" prefixIconProps={{ size: 'sm' }} tooltipProps={{ title: 'Add' }} />
     </PromptInput.Tools>
     <PromptInput.Submit status="streaming" />
   </PromptInput.Toolbar>
@@ -76,9 +72,7 @@ return (
     />
     <PromptInput.Toolbar>
       <PromptInput.Tools>
-        <PromptInput.Button>
-          <IconV2 name="plus" />
-        </PromptInput.Button>
+        <PromptInput.Button prefixIcon="plus" tooltipProps={{ title: 'Add' }} />
       </PromptInput.Tools>
       <PromptInput.Submit />
     </PromptInput.Toolbar>
@@ -93,7 +87,7 @@ return (
 - **PromptInput.Toolbar** - Container for actions and submit button
 - **PromptInput.Tools** - Container for tool buttons
 - **PromptInput.Submit** - Submit button with streaming state support
-- **PromptInput.Button** - Action button for toolbar (attach, emoji, etc.)
+- **PromptInput.Button** - Icon-only `Toggle` for toolbar actions (attach, emoji, etc.)
 
 ## Keyboard Shortcuts
 

packages/ui/src/components/chat/prompt-input.tsx

@@ -4,6 +4,7 @@ import { Button } from '@components/button'
 import { Textarea } from '@components/form-primitives'
 import { IconV2, IconV2NamesType } from '@components/icon-v2'
 import { Tag } from '@components/tag'
+import { Toggle, type ToggleProps } from '@components/toggle'
 import { cn } from '@utils/cn'
 
 export type PromptInputRootProps = HTMLAttributes<HTMLFormElement>
@@ -106,9 +107,9 @@ export const PromptInputSubmit = ({ status, children, ...props }: PromptInputSub
   )
 }
 
-export type PromptInputButtonProps = ComponentProps<typeof Button>
-export const PromptInputButton = ({ variant = 'outline', ...props }: PromptInputButtonProps) => {
-  return <Button iconOnly size="xs" type="button" variant={variant} {...props} />
+export type PromptInputButtonProps = ToggleProps
+export const PromptInputButton = ({ variant = 'outline', size = 'xs', ...props }: PromptInputButtonProps) => {
+  return <Toggle {...props} variant={variant} size={size} iconOnly />
 }
 
 export const PromptInput = {