Skip to content

fix(copilot): fix sent message width #1904

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Sg312 merged 1 commit into from
Nov 11, 2025
Merged

fix(copilot): fix sent message width #1904

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 7 additions & 5 deletions ...d]/components/panel-new/components/copilot/components/copilot-message/copilot-message.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
return (
<div
key={`text-${index}-${block.timestamp || index}`}
className={`w-full max-w-full overflow-hidden pl-[2px] transition-opacity duration-200 ease-in-out ${
className={`w-full max-w-full overflow-hidden transition-opacity duration-200 ease-in-out ${
cleanBlockContent.length > 0 ? 'opacity-100' : 'opacity-70'
} ${shouldUseSmoothing ? 'translate-y-0 transition-transform duration-100 ease-out' : ''}`}
>
Expand Down Expand Up @@ -235,7 +235,8 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
if (isUser) {
return (
<div
className={`w-full max-w-full overflow-hidden transition-opacity duration-200 ${isDimmed ? 'opacity-40' : 'opacity-100'}`}
className={`w-full max-w-full overflow-hidden transition-opacity duration-200 [max-width:var(--panel-max-width)] ${isDimmed ? 'opacity-40' : 'opacity-100'}`}
style={{ '--panel-max-width': `${panelWidth - 16}px` } as React.CSSProperties}
>
{isEditMode ? (
<div
Expand Down Expand Up @@ -313,7 +314,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
onClick={handleMessageClick}
onMouseEnter={() => setIsHoveringMessage(true)}
onMouseLeave={() => setIsHoveringMessage(false)}
className='group relative cursor-pointer rounded-[4px] border border-[#3D3D3D] bg-[#282828] px-[6px] py-[6px] transition-all duration-200 hover:border-[#4A4A4A] hover:bg-[#363636] dark:border-[#3D3D3D] dark:bg-[#363636] dark:hover:border-[#454545] dark:hover:bg-[#3D3D3D]'
className='group relative w-full cursor-pointer rounded-[4px] border border-[#3D3D3D] bg-[#282828] px-[6px] py-[6px] transition-all duration-200 hover:border-[#4A4A4A] hover:bg-[#363636] dark:border-[#3D3D3D] dark:bg-[#363636] dark:hover:border-[#454545] dark:hover:bg-[#3D3D3D]'
>
<div
ref={messageContentRef}
Expand Down Expand Up @@ -439,9 +440,10 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
if (isAssistant) {
return (
<div
className={`w-full max-w-full overflow-hidden pl-[2px] transition-opacity duration-200 ${isDimmed ? 'opacity-40' : 'opacity-100'}`}
className={`w-full max-w-full overflow-hidden transition-opacity duration-200 [max-width:var(--panel-max-width)] ${isDimmed ? 'opacity-40' : 'opacity-100'}`}
style={{ '--panel-max-width': `${panelWidth - 16}px` } as React.CSSProperties}
>
<div className='max-w-full space-y-1.5 transition-all duration-200 ease-in-out'>
<div className='max-w-full space-y-1.5 px-[2px] transition-all duration-200 ease-in-out'>
{/* Content blocks in chronological order */}
{memoizedContentBlocks}

Expand Down
4 changes: 2 additions & 2 deletions ...[workflowId]/components/panel-new/components/copilot/components/user-input/user-input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -563,12 +563,12 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
ref={setContainerRef}
data-user-input
className={cn('relative w-full flex-none [max-width:var(--panel-max-width)]', className)}
style={{ '--panel-max-width': `${panelWidth - 17}px` } as React.CSSProperties}
style={{ '--panel-max-width': `${panelWidth - 16}px` } as React.CSSProperties}
>
<div
ref={setInputContainerRef}
className={cn(
'relative rounded-[4px] border border-[#3D3D3D] bg-[#282828] px-[6px] py-[6px] transition-colors dark:bg-[#363636]',
'relative w-full rounded-[4px] border border-[#3D3D3D] bg-[#282828] px-[6px] py-[6px] transition-colors dark:bg-[#363636]',
fileAttachments.isDragging && 'ring-[#33B4FF] ring-[1.75px]'
)}
onDragEnter={fileAttachments.handleDragEnter}
Expand Down
2 changes: 1 addition & 1 deletion ...orkspace/[workspaceId]/w/[workflowId]/components/panel-new/components/copilot/copilot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -441,7 +441,7 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
<div className='relative flex-1 overflow-hidden'>
<div
ref={scrollAreaRef}
className='copilot-scrollable h-full overflow-y-auto overflow-x-hidden px-[8px]'
className='h-full overflow-y-auto overflow-x-hidden px-[8px]'
>
<div
className={`w-full max-w-full space-y-4 overflow-hidden py-[8px] ${
Expand Down