mirror of
https://github.com/simstudioai/sim.git
synced 2026-09-24 15:45:35 +08:00
fix(copilot): fix sent message width (#1904)
This commit is contained in:
+7
-5
@@ -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' : ''}`}
|
||||
>
|
||||
@@ -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
|
||||
@@ -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}
|
||||
@@ -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}
|
||||
|
||||
|
||||
+2
-2
@@ -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}
|
||||
|
||||
+1
-1
@@ -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] ${
|
||||
|
||||
Reference in New Issue
Block a user