fix: chat composer queue button and focus mode sizing (#616)
This commit is contained in:
@@ -2195,7 +2195,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
|
||||
}}
|
||||
className={cn(
|
||||
footerIconButtonClass,
|
||||
'absolute bottom-full left-1/2 -translate-x-1/2 mb-1',
|
||||
'absolute z-20 bottom-full left-1/2 -translate-x-1/2 mb-1',
|
||||
hasContent && currentSessionId
|
||||
? 'text-primary hover:text-primary'
|
||||
: 'opacity-30'
|
||||
@@ -2625,7 +2625,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
|
||||
: undefined}
|
||||
/>
|
||||
)}
|
||||
<div className={cn("relative overflow-hidden", isDesktopExpanded && 'flex-1 min-h-0')}>
|
||||
<div className={cn("relative overflow-hidden", isDesktopExpanded && 'flex flex-1 min-h-0 flex-col')}>
|
||||
{highlightedComposerContent && (
|
||||
<div
|
||||
aria-hidden
|
||||
@@ -2683,6 +2683,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
|
||||
autoCorrect={isMobile ? "on" : "off"}
|
||||
autoCapitalize={isMobile ? "sentences" : "off"}
|
||||
spellCheck={isMobile}
|
||||
fillContainer={isDesktopExpanded}
|
||||
outerClassName={cn('focus-within:ring-0', isDesktopExpanded && 'flex-1 min-h-0')}
|
||||
className={cn(
|
||||
'min-h-[52px] resize-none border-0 px-3 rounded-b-none appearance-none hover:border-transparent bg-transparent relative z-10',
|
||||
|
||||
@@ -6,20 +6,22 @@ import { ScrollableOverlay } from "./ScrollableOverlay"
|
||||
type TextareaProps = React.ComponentProps<"textarea"> & {
|
||||
outerClassName?: string;
|
||||
scrollbarClassName?: string;
|
||||
fillContainer?: boolean;
|
||||
};
|
||||
|
||||
const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
|
||||
({ className, outerClassName, scrollbarClassName, ...props }, ref) => {
|
||||
({ className, outerClassName, scrollbarClassName, fillContainer = false, ...props }, ref) => {
|
||||
return (
|
||||
<ScrollableOverlay
|
||||
as="textarea"
|
||||
ref={ref as React.Ref<HTMLTextAreaElement>}
|
||||
disableHorizontal
|
||||
fillContainer={false}
|
||||
fillContainer={fillContainer}
|
||||
outerClassName={cn("w-full rounded-lg focus-within:ring-1 focus-within:ring-primary/50", outerClassName)}
|
||||
scrollbarClassName={scrollbarClassName}
|
||||
className={cn(
|
||||
"text-foreground border border-border/80 placeholder:text-muted-foreground appearance-none dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-lg bg-transparent px-3 py-2 typography-markdown outline-none focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:typography-ui-label",
|
||||
"text-foreground border border-border/80 placeholder:text-muted-foreground appearance-none dark:bg-input/30 flex min-h-16 w-full rounded-lg bg-transparent px-3 py-2 typography-markdown outline-none focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:typography-ui-label",
|
||||
fillContainer ? "[field-sizing:fixed]" : "field-sizing-content",
|
||||
"hover:border-input aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||
"focus:border-primary/70",
|
||||
className
|
||||
|
||||
Reference in New Issue
Block a user