Skip to content

Commit ba6bc91

Browse files
TheodoreSpeaksTheodoreSpeaks
authored
fix(ui): fix attachment logic on queued mothership messages (#4191)
* fix(ui): fix attachment logic on queued mothership messages * Add focus after hitting pencil button for queued message * fix copilot layout
1 parent 377712c commit ba6bc91

File tree

9 files changed

+191
-88
lines changed

9 files changed

+191
-88
lines changed

‎apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx‎

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,10 @@ import {
1010
} from '@/app/workspace/[workspaceId]/home/components/message-content'
1111
import { PendingTagIndicator } from '@/app/workspace/[workspaceId]/home/components/message-content/components/special-tags'
1212
import { QueuedMessages } from '@/app/workspace/[workspaceId]/home/components/queued-messages'
13-
import { UserInput } from '@/app/workspace/[workspaceId]/home/components/user-input'
13+
import {
14+
UserInput,
15+
type UserInputHandle,
16+
} from '@/app/workspace/[workspaceId]/home/components/user-input'
1417
import { UserMessageContent } from '@/app/workspace/[workspaceId]/home/components/user-message-content'
1518
import type {
1619
ChatMessage,
@@ -36,14 +39,12 @@ interface MothershipChatProps {
3639
messageQueue: QueuedMessage[]
3740
onRemoveQueuedMessage: (id: string) => void
3841
onSendQueuedMessage: (id: string) => Promise<void>
39-
onEditQueuedMessage: (id: string) => void
42+
onEditQueuedMessage: (id: string) => QueuedMessage | undefined
4043
userId?: string
4144
chatId?: string
4245
onContextAdd?: (context: ChatContext) => void
4346
onContextRemove?: (context: ChatContext) => void
4447
onWorkspaceResourceSelect?: (resource: MothershipResource) => void
45-
editValue?: string
46-
onEditValueConsumed?: () => void
4748
layout?: 'mothership-view' | 'copilot-view'
4849
initialScrollBlocked?: boolean
4950
animateInput?: boolean
@@ -91,8 +92,6 @@ export function MothershipChat({
9192
onContextAdd,
9293
onContextRemove,
9394
onWorkspaceResourceSelect,
94-
editValue,
95-
onEditValueConsumed,
9695
layout = 'mothership-view',
9796
initialScrollBlocked = false,
9897
animateInput = false,
@@ -106,11 +105,24 @@ export function MothershipChat({
106105
})
107106
const hasMessages = messages.length > 0
108107
const initialScrollDoneRef = useRef(false)
108+
const userInputRef = useRef<UserInputHandle>(null)
109109
const handleSendQueuedHead = useCallback(() => {
110110
const topMessage = messageQueue[0]
111111
if (!topMessage) return
112112
void onSendQueuedMessage(topMessage.id)
113113
}, [messageQueue, onSendQueuedMessage])
114+
const handleEditQueued = useCallback(
115+
(id: string) => {
116+
const msg = onEditQueuedMessage(id)
117+
if (msg) userInputRef.current?.loadQueuedMessage(msg)
118+
},
119+
[onEditQueuedMessage]
120+
)
121+
const handleEditQueuedTail = useCallback(() => {
122+
const tail = messageQueue[messageQueue.length - 1]
123+
if (!tail) return
124+
handleEditQueued(tail.id)
125+
}, [messageQueue, handleEditQueued])
114126

115127
useLayoutEffect(() => {
116128
if (!hasMessages) {
@@ -205,19 +217,19 @@ export function MothershipChat({
205217
messageQueue={messageQueue}
206218
onRemove={onRemoveQueuedMessage}
207219
onSendNow={onSendQueuedMessage}
208-
onEdit={onEditQueuedMessage}
220+
onEdit={handleEditQueued}
209221
/>
210222
<UserInput
223+
ref={userInputRef}
211224
onSubmit={onSubmit}
212225
isSending={isStreamActive}
213226
onStopGeneration={onStopGeneration}
214227
isInitialView={false}
215228
userId={userId}
216229
onContextAdd={onContextAdd}
217230
onContextRemove={onContextRemove}
218-
editValue={editValue}
219-
onEditValueConsumed={onEditValueConsumed}
220231
onSendQueuedHead={handleSendQueuedHead}
232+
onEditQueuedTail={handleEditQueuedTail}
221233
/>
222234
</div>
223235
</div>

‎apps/sim/app/workspace/[workspaceId]/home/components/queued-messages/queued-messages.tsx‎

Lines changed: 52 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
'use client'
22

3-
import { useState } from 'react'
4-
import { ArrowUp, ChevronDown, ChevronRight, Pencil, Trash2 } from 'lucide-react'
3+
import { useEffect, useRef, useState } from 'react'
4+
import { ArrowUp, ChevronDown, ChevronRight, Paperclip, Pencil, Trash2 } from 'lucide-react'
55
import { Tooltip } from '@/components/emcn'
6+
import { UserMessageContent } from '@/app/workspace/[workspaceId]/home/components/user-message-content'
67
import type { QueuedMessage } from '@/app/workspace/[workspaceId]/home/types'
78

9+
const NARROW_WIDTH_PX = 320
10+
811
interface QueuedMessagesProps {
912
messageQueue: QueuedMessage[]
1013
onRemove: (id: string) => void
@@ -14,11 +17,28 @@ interface QueuedMessagesProps {
1417

1518
export function QueuedMessages({ messageQueue, onRemove, onSendNow, onEdit }: QueuedMessagesProps) {
1619
const [isExpanded, setIsExpanded] = useState(true)
20+
const containerRef = useRef<HTMLDivElement>(null)
21+
const [isNarrow, setIsNarrow] = useState(false)
22+
23+
const hasMessages = messageQueue.length > 0
1724

18-
if (messageQueue.length === 0) return null
25+
useEffect(() => {
26+
const el = containerRef.current
27+
if (!el) return
28+
const ro = new ResizeObserver((entries) => {
29+
setIsNarrow(entries[0].contentRect.width < NARROW_WIDTH_PX)
30+
})
31+
ro.observe(el)
32+
return () => ro.disconnect()
33+
}, [hasMessages])
34+
35+
if (!hasMessages) return null
1936

2037
return (
21-
<div className='-mb-3 mx-3.5 overflow-hidden rounded-t-[16px] border border-[var(--border-1)] border-b-0 bg-[var(--surface-3)] pb-3'>
38+
<div
39+
ref={containerRef}
40+
className='-mb-3 mx-3.5 overflow-hidden rounded-t-[16px] border border-[var(--border-1)] border-b-0 bg-[var(--surface-3)] pb-3'
41+
>
2242
<button
2343
type='button'
2444
onClick={() => setIsExpanded(!isExpanded)}
@@ -39,16 +59,41 @@ export function QueuedMessages({ messageQueue, onRemove, onSendNow, onEdit }: Qu
3959
{messageQueue.map((msg) => (
4060
<div
4161
key={msg.id}
42-
className='flex items-center gap-2 px-3.5 py-1.5 transition-colors hover-hover:bg-[var(--surface-active)]'
62+
className='flex items-center gap-2 py-1.5 pr-2 pl-3.5 transition-colors hover-hover:bg-[var(--surface-active)]'
4363
>
4464
<div className='flex h-[16px] w-[16px] shrink-0 items-center justify-center'>
4565
<div className='h-[10px] w-[10px] rounded-full border-[1.5px] border-[color-mix(in_srgb,var(--text-tertiary)_40%,transparent)]' />
4666
</div>
4767

48-
<div className='min-w-0 flex-1'>
49-
<p className='truncate text-[var(--text-primary)] text-small'>{msg.content}</p>
68+
<div className='min-w-0 flex-1 overflow-hidden'>
69+
<UserMessageContent
70+
content={msg.content}
71+
contexts={msg.contexts}
72+
plainMentions
73+
className='!truncate !whitespace-nowrap !text-small !leading-[20px]'
74+
/>
5075
</div>
5176

77+
{msg.fileAttachments && msg.fileAttachments.length > 0 && (
78+
<span className='inline-flex min-w-0 max-w-[40%] shrink items-center gap-1 rounded-[5px] bg-[var(--surface-5)] px-[5px] py-0.5 text-[var(--text-primary)] text-small'>
79+
<Paperclip className='h-[12px] w-[12px] shrink-0 text-[var(--text-icon)]' />
80+
{isNarrow ? (
81+
<span className='shrink-0 text-[var(--text-secondary)]'>
82+
{msg.fileAttachments.length}
83+
</span>
84+
) : (
85+
<>
86+
<span className='truncate'>{msg.fileAttachments[0].filename}</span>
87+
{msg.fileAttachments.length > 1 && (
88+
<span className='shrink-0 text-[var(--text-secondary)]'>
89+
+{msg.fileAttachments.length - 1}
90+
</span>
91+
)}
92+
</>
93+
)}
94+
</span>
95+
)}
96+
5297
<div className='flex shrink-0 items-center gap-0.5'>
5398
<Tooltip.Root>
5499
<Tooltip.Trigger asChild>

‎apps/sim/app/workspace/[workspaceId]/home/components/user-input/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export { UserInput } from './user-input'
1+
export { UserInput, type UserInputHandle } from './user-input'

‎apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx‎

Lines changed: 72 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,16 @@
11
'use client'
22

33
import type React from 'react'
4-
import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
4+
import {
5+
forwardRef,
6+
useCallback,
7+
useEffect,
8+
useImperativeHandle,
9+
useLayoutEffect,
10+
useMemo,
11+
useRef,
12+
useState,
13+
} from 'react'
514
import { useParams } from 'next/navigation'
615
import { useSession } from '@/lib/auth/auth-client'
716
import { SIM_RESOURCE_DRAG_TYPE, SIM_RESOURCES_DRAG_TYPE } from '@/lib/copilot/resource-types'
@@ -26,6 +35,7 @@ import {
2635
import type {
2736
FileAttachmentForApi,
2837
MothershipResource,
38+
QueuedMessage,
2939
} from '@/app/workspace/[workspaceId]/home/types'
3040
import {
3141
useContextManagement,
@@ -91,8 +101,6 @@ function getCaretAnchor(
91101

92102
interface UserInputProps {
93103
defaultValue?: string
94-
editValue?: string
95-
onEditValueConsumed?: () => void
96104
onSubmit: (
97105
text: string,
98106
fileAttachments?: FileAttachmentForApi[],
@@ -105,21 +113,28 @@ interface UserInputProps {
105113
onContextAdd?: (context: ChatContext) => void
106114
onContextRemove?: (context: ChatContext) => void
107115
onSendQueuedHead?: () => void
116+
onEditQueuedTail?: () => void
117+
}
118+
119+
export interface UserInputHandle {
120+
loadQueuedMessage: (msg: QueuedMessage) => void
108121
}
109122

110-
export function UserInput({
111-
defaultValue = '',
112-
editValue,
113-
onEditValueConsumed,
114-
onSubmit,
115-
isSending,
116-
onStopGeneration,
117-
isInitialView = true,
118-
userId,
119-
onContextAdd,
120-
onContextRemove,
121-
onSendQueuedHead,
122-
}: UserInputProps) {
123+
export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function UserInput(
124+
{
125+
defaultValue = '',
126+
onSubmit,
127+
isSending,
128+
onStopGeneration,
129+
isInitialView = true,
130+
userId,
131+
onContextAdd,
132+
onContextRemove,
133+
onSendQueuedHead,
134+
onEditQueuedTail,
135+
},
136+
ref
137+
) {
123138
const { workspaceId } = useParams<{ workspaceId: string }>()
124139
const { navigateToSettings } = useSettingsNavigation()
125140
const { data: workflowsById = {} } = useWorkflowMap(workspaceId)
@@ -136,18 +151,6 @@ export function UserInput({
136151
setPrevDefaultValue(defaultValue)
137152
}
138153

139-
const [prevEditValue, setPrevEditValue] = useState(editValue)
140-
if (editValue && editValue !== prevEditValue) {
141-
setPrevEditValue(editValue)
142-
setValue(editValue)
143-
} else if (!editValue && prevEditValue) {
144-
setPrevEditValue(editValue)
145-
}
146-
147-
useEffect(() => {
148-
if (editValue) onEditValueConsumed?.()
149-
}, [editValue, onEditValueConsumed])
150-
151154
const files = useFileAttachments({
152155
userId: userId || session?.user?.id,
153156
workspaceId,
@@ -269,6 +272,8 @@ export function UserInput({
269272
contextRef.current = contextManagement
270273
const onSendQueuedHeadRef = useRef(onSendQueuedHead)
271274
onSendQueuedHeadRef.current = onSendQueuedHead
275+
const onEditQueuedTailRef = useRef(onEditQueuedTail)
276+
onEditQueuedTailRef.current = onEditQueuedTail
272277
const isSendingRef = useRef(isSending)
273278
isSendingRef.current = isSending
274279

@@ -277,6 +282,34 @@ export function UserInput({
277282
const atInsertPosRef = useRef<number | null>(null)
278283
const pendingCursorRef = useRef<number | null>(null)
279284

285+
useImperativeHandle(
286+
ref,
287+
() => ({
288+
loadQueuedMessage: (msg: QueuedMessage) => {
289+
setValue(msg.content)
290+
const restored: AttachedFile[] = (msg.fileAttachments ?? []).map((a) => ({
291+
id: a.id,
292+
name: a.filename,
293+
size: a.size,
294+
type: a.media_type,
295+
path: a.path ?? '',
296+
key: a.key,
297+
uploading: false,
298+
}))
299+
files.restoreAttachedFiles(restored)
300+
contextManagement.setSelectedContexts(msg.contexts ?? [])
301+
requestAnimationFrame(() => {
302+
const textarea = textareaRef.current
303+
if (!textarea) return
304+
textarea.focus()
305+
const end = textarea.value.length
306+
textarea.setSelectionRange(end, end)
307+
})
308+
},
309+
}),
310+
[files.restoreAttachedFiles, contextManagement.setSelectedContexts, textareaRef]
311+
)
312+
280313
useLayoutEffect(() => {
281314
const textarea = textareaRef.current
282315
if (!textarea) return
@@ -430,6 +463,7 @@ export function UserInput({
430463
filename: f.name,
431464
media_type: f.type,
432465
size: f.size,
466+
...(f.path ? { path: f.path } : {}),
433467
}))
434468

435469
onSubmit(
@@ -452,6 +486,15 @@ export function UserInput({
452486

453487
const handleKeyDown = useCallback(
454488
(e: React.KeyboardEvent<HTMLTextAreaElement>) => {
489+
if (e.key === 'ArrowUp' && !e.shiftKey && !e.metaKey && !e.ctrlKey && !e.altKey) {
490+
const isEmpty = valueRef.current.length === 0 && filesRef.current.attachedFiles.length === 0
491+
if (isEmpty && onEditQueuedTailRef.current) {
492+
e.preventDefault()
493+
onEditQueuedTailRef.current()
494+
return
495+
}
496+
}
497+
455498
if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {
456499
e.preventDefault()
457500
const hasSubmitPayload =
@@ -763,4 +806,4 @@ export function UserInput({
763806
{files.isDragging && <DropOverlay />}
764807
</div>
765808
)
766-
}
809+
})

0 commit comments

Comments
 (0)