Skip to content

webui: Allow editing file attachments when editing messages. #13645

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

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

webui: Allow editing file attachments when editing messages. #13645

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bb5e9d1
Allow editing file attachments when editing messages.
nauful May 20, 2025
c32726e
Refactor ChatInput.
nauful May 21, 2025
6b7479f
Update build.
nauful May 21, 2025
fc53cba
Revert style change.
nauful May 21, 2025
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
Binary file modified tools/server/public/index.html.gz
View file
Open in desktop
Binary file not shown.
123 changes: 94 additions & 29 deletions tools/server/webui/src/components/ChatMessage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,19 @@
import { useMemo, useState } from 'react';
import { useMemo, useState, ClipboardEvent } from 'react';
import { useAppContext } from '../utils/app.context';
import { Message, PendingMessage } from '../utils/types';
import { Message, MessageExtra, PendingMessage } from '../utils/types';
import { classNames } from '../utils/misc';
import MarkdownDisplay, { CopyButton } from './MarkdownDisplay';
import {
ArrowPathIcon,
ChevronLeftIcon,
ChevronRightIcon,
PaperClipIcon,
PencilSquareIcon,
} from '@heroicons/react/24/outline';
import ChatInputExtraContextItem from './ChatInputExtraContextItem';
import { BtnWithTooltips } from '../utils/common';
import Dropzone from 'react-dropzone';
import { useChatExtraContext } from './useChatExtraContext';

interface SplitMessage {
content: PendingMessage['content'];
Expand All @@ -33,12 +36,18 @@ export default function ChatMessage({
siblingCurrIdx: number;
id?: string;
onRegenerateMessage(msg: Message): void;
onEditMessage(msg: Message, content: string): void;
onEditMessage(
msg: Message,
content: string,
extra: MessageExtra[] | undefined
): void;
onChangeSibling(sibling: Message['id']): void;
isPending?: boolean;
}) {
const { viewingChat, config } = useAppContext();
const extraContext = useChatExtraContext(msg.extra ?? []);
const [editingContent, setEditingContent] = useState<string | null>(null);
const [isDrag, setIsDrag] = useState(false);
const timings = useMemo(
() =>
msg.timings
Expand Down Expand Up @@ -107,36 +116,92 @@ export default function ChatMessage({
className={classNames({
'chat-bubble markdown': true,
'chat-bubble bg-transparent': !isUser,
'opacity-50': isDrag, // simply visual feedback to inform user that the file will be accepted
})}
>
{/* textarea for editing message */}
{editingContent !== null && (
<>
<textarea
dir="auto"
className="textarea textarea-bordered bg-base-100 text-base-content max-w-2xl w-[calc(90vw-8em)] h-24"
value={editingContent}
onChange={(e) => setEditingContent(e.target.value)}
></textarea>
<br />
<button
className="btn btn-ghost mt-2 mr-2"
onClick={() => setEditingContent(null)}
>
Cancel
</button>
<button
className="btn mt-2"
onClick={() => {
if (msg.content !== null) {
setEditingContent(null);
onEditMessage(msg as Message, editingContent);
}
}}
>
Submit
</button>
</>
<Dropzone
noClick
onDrop={(files: File[]) => {
setIsDrag(false);
extraContext.onFileAdded(files);
}}
onDragEnter={() => setIsDrag(true)}
onDragLeave={() => setIsDrag(false)}
multiple={true}
>
{({ getRootProps, getInputProps }) => (
<div
className="flex flex-col w-full"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think copy-paste this whole code is not a good approach. It will make the code base become highly difficult to maintain in the future.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated, I've removed the old textarea and buttons in ChatMessage and refactored ChatInput to handle editing. Now ChatScreen and ChatMessage editing both use ChatInput.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can't test this right now, could you upload a screen recording?

Btw thinking about the UI/UX, I think maybe we should redesign ChatInput component to make it more flexible, so that it can be shown in the middle when user creates a new conversion (same UI on chatgpt/claude), this will also make the ChatInput to looks better in the case we edit the message

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screen.Recording.2025-05-22.mp4

Copy link
Collaborator

@ngxson ngxson May 24, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From UI designer perspective, these 2 buttons looks very strange and the "upload" button doesn't even aligned with them

Also I bet this will looks terrible on mobile

image

I'll redesign it a bit later, sorry for the delay but I'm current blocked with other tasks in llama.cpp

onPasteCapture={(e: ClipboardEvent<HTMLInputElement>) => {
const files = Array.from(e.clipboardData.items)
.filter((item) => item.kind === 'file')
.map((item) => item.getAsFile())
.filter((file) => file !== null);

if (files.length > 0) {
e.preventDefault();
extraContext.onFileAdded(files);
}
}}
{...getRootProps()}
>
<ChatInputExtraContextItem
items={extraContext.items}
removeItem={extraContext.removeItem}
/>

<div className="flex flex-row gap-2 ml-2">
<textarea
dir="auto"
className="textarea textarea-bordered bg-base-100 text-base-content max-w-2xl w-[calc(90vw-8em)] h-24"
value={editingContent}
onChange={(e) => setEditingContent(e.target.value)}
/>
<label
htmlFor="file-upload"
className={classNames({
'btn w-8 h-8 p-0 rounded-full': true,
})}
>
<PaperClipIcon className="h-5 w-5" />
</label>
<input
id="file-upload"
type="file"
className="hidden"
{...getInputProps()}
hidden
/>
</div>

<div className="flex flex-row gap-2 ml-2">
<button
className="btn btn-ghost mt-2 mr-2"
onClick={() => setEditingContent(null)}
>
Cancel
</button>
<button
className="btn mt-2"
onClick={() => {
if (msg.content !== null) {
setEditingContent(null);
onEditMessage(
msg as Message,
editingContent,
extraContext.items
);
}
}}
>
Submit
</button>
</div>
</div>
)}
</Dropzone>
)}
{/* not editing content, render message */}
{editingContent === null && (
Expand Down
15 changes: 12 additions & 3 deletions tools/server/webui/src/components/ChatScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
import { ClipboardEvent, useEffect, useMemo, useRef, useState } from 'react';
import { CallbackGeneratedChunk, useAppContext } from '../utils/app.context';
import ChatMessage from './ChatMessage';
import { CanvasType, Message, PendingMessage } from '../utils/types';
import {
CanvasType,
Message,
MessageExtra,
PendingMessage,
} from '../utils/types';
import { classNames, cleanCurrentUrl } from '../utils/misc';
import CanvasPyInterpreter from './CanvasPyInterpreter';
import StorageUtils from '../utils/storage';
Expand Down Expand Up @@ -158,15 +163,19 @@ export default function ChatScreen() {
// for vscode context
textarea.refOnSubmit.current = sendNewMessage;

const handleEditMessage = async (msg: Message, content: string) => {
const handleEditMessage = async (
msg: Message,
content: string,
extra: MessageExtra[] | undefined
) => {
if (!viewingChat) return;
setCurrNodeId(msg.id);
scrollToBottom(false);
await replaceMessageAndGenerate(
viewingChat.conv.id,
msg.parent,
content,
msg.extra,
extra,
onChunk
);
setCurrNodeId(-1);
Expand Down
6 changes: 4 additions & 2 deletions tools/server/webui/src/components/useChatExtraContext.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,11 @@ export interface ChatExtraContextApi {
onFileAdded: (files: File[]) => void; // used by "upload" button
}

export function useChatExtraContext(): ChatExtraContextApi {
export function useChatExtraContext(
initialItems: MessageExtra[] = []
): ChatExtraContextApi {
const { serverProps, config } = useAppContext();
const [items, setItems] = useState<MessageExtra[]>([]);
const [items, setItems] = useState<MessageExtra[]>(initialItems);

const addItems = (newItems: MessageExtra[]) => {
setItems((prev) => [...prev, ...newItems]);
Expand Down