Skip to content

Webui: New Features for Conversations, Settings, and Chat Messages #618

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
merged 5 commits into from
Jul 20, 2025
Merged

Webui: New Features for Conversations, Settings, and Chat Messages #618

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5c5eb43
Webui: add Rename/Upload conversation in header and sidebar
Jun 14, 2025
1900ef1
webui: add a preset feature to the settings #14649
Jul 16, 2025
eae9e19
webui: Add editing assistant messages #13522
Jul 16, 2025
55b17cb
webui: DB import and export #14347
Jul 16, 2025
ce3e08f
webui: Wrap long numbers instead of infinite horizontal scroll (#14062)
Jul 16, 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 examples/server/public/index.html.gz
View file
Open in desktop
Binary file not shown.
347 changes: 277 additions & 70 deletions examples/server/webui/dist/index.html
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion examples/server/webui/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<meta name="color-scheme" content="light dark" />
<title>🦙 llama.cpp - chat</title>
<title>🦙 ik_llama.cpp - chat</title>
</head>
<body>
<div id="root"></div>
Expand Down
37 changes: 37 additions & 0 deletions examples/server/webui/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions examples/server/webui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,13 @@
"autoprefixer": "^10.4.20",
"daisyui": "^5.0.12",
"dexie": "^4.0.11",
"dexie-export-import": "^4.0.11",
"highlight.js": "^11.10.0",
"katex": "^0.16.15",
"postcss": "^8.4.49",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-hot-toast": "^2.5.2",
"react-markdown": "^9.0.3",
"react-router": "^7.1.5",
"rehype-highlight": "^7.0.2",
Expand Down
29 changes: 16 additions & 13 deletions examples/server/webui/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,24 @@ import Sidebar from './components/Sidebar';
import { AppContextProvider, useAppContext } from './utils/app.context';
import ChatScreen from './components/ChatScreen';
import SettingDialog from './components/SettingDialog';
import { ModalProvider } from './components/ModalProvider';

function App() {
return (
<HashRouter>
<div className="flex flex-row drawer lg:drawer-open">
<AppContextProvider>
<Routes>
<Route element={<AppLayout />}>
<Route path="/chat/:convId" element={<ChatScreen />} />
<Route path="*" element={<ChatScreen />} />
</Route>
</Routes>
</AppContextProvider>
</div>
</HashRouter>
<ModalProvider>
<HashRouter>
<div className="flex flex-row drawer lg:drawer-open">
<AppContextProvider>
<Routes>
<Route element={<AppLayout />}>
<Route path="/chat/:convId" element={<ChatScreen />} />
<Route path="*" element={<ChatScreen />} />
</Route>
</Routes>
</AppContextProvider>
</div>
</HashRouter>
</ModalProvider>
);
}

Expand All @@ -28,7 +31,7 @@ function AppLayout() {
<>
<Sidebar />
<div
className="drawer-content grow flex flex-col h-screen w-screen mx-auto px-4 overflow-auto bg-base-100"
className="drawer-content grow flex flex-col h-screen mx-auto px-4 overflow-auto bg-base-100"
id="main-scroll"
>
<Header />
Expand Down
17 changes: 16 additions & 1 deletion examples/server/webui/src/components/ChatMessage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,15 @@ export default function ChatMessage({
onEditMessage,
onChangeSibling,
isPending,
onContinueMessage,
}: {
msg: Message | PendingMessage;
siblingLeafNodeIds: Message['id'][];
siblingCurrIdx: number;
id?: string;
onRegenerateMessage(msg: Message): void;
onEditMessage(msg: Message, content: string): void;
onContinueMessage(msg: Message, content: string): void;
onChangeSibling(sibling: Message['id']): void;
isPending?: boolean;
}) {
Expand Down Expand Up @@ -112,7 +114,11 @@ export default function ChatMessage({
onClick={() => {
if (msg.content !== null) {
setEditingContent(null);
onEditMessage(msg as Message, editingContent);
if (msg.role === 'user') {
onEditMessage(msg as Message, editingContent);
} else {
onContinueMessage(msg as Message, editingContent);
}
}
}}
>
Expand Down Expand Up @@ -283,6 +289,15 @@ export default function ChatMessage({
🔄 Regenerate
</button>
)}
{!isPending && (
<button
className="badge btn-mini show-on-hover"
onClick={() => setEditingContent(msg.content)}
disabled={msg.content === null}
>
✍️ Edit
</button>
)}
</>
)}
<CopyButton
Expand Down
57 changes: 45 additions & 12 deletions examples/server/webui/src/components/ChatScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@ export default function ChatScreen() {
pendingMessages,
canvasData,
replaceMessageAndGenerate,
continueMessageAndGenerate,
} = useAppContext();

const textarea: ChatTextareaApi = useChatTextarea(prefilledMsg.content());
Expand Down Expand Up @@ -187,6 +188,20 @@ export default function ChatScreen() {
scrollToBottom(false);
};

const handleContinueMessage = async (msg: Message, content: string) => {
if (!viewingChat || !continueMessageAndGenerate) return;
setCurrNodeId(msg.id);
scrollToBottom(false);
await continueMessageAndGenerate(
viewingChat.conv.id,
msg.id,
content,
onChunk
);
setCurrNodeId(-1);
scrollToBottom(false);
};

const hasCanvas = !!canvasData;

useEffect(() => {
Expand All @@ -204,7 +219,7 @@ export default function ChatScreen() {

// due to some timing issues of StorageUtils.appendMsg(), we need to make sure the pendingMsg is not duplicated upon rendering (i.e. appears once in the saved conversation and once in the pendingMsg)
const pendingMsgDisplay: MessageDisplay[] =
pendingMsg && messages.at(-1)?.msg.id !== pendingMsg.id
pendingMsg && !messages.some((m) => m.msg.id === pendingMsg.id) // Only show if pendingMsg is not an existing message being continued
? [
{
msg: pendingMsg,
Expand Down Expand Up @@ -236,17 +251,35 @@ export default function ChatScreen() {
{/* placeholder to shift the message to the bottom */}
{viewingChat ? '' : 'Send a message to start'}
</div>
{[...messages, ...pendingMsgDisplay].map((msg) => (
<ChatMessage
key={msg.msg.id}
msg={msg.msg}
siblingLeafNodeIds={msg.siblingLeafNodeIds}
siblingCurrIdx={msg.siblingCurrIdx}
onRegenerateMessage={handleRegenerateMessage}
onEditMessage={handleEditMessage}
onChangeSibling={setCurrNodeId}
/>
))}
{[...messages, ...pendingMsgDisplay].map((msgDisplay) => {
const actualMsgObject = msgDisplay.msg;
// Check if the current message from the list is the one actively being generated/continued
const isThisMessageTheActivePendingOne =
pendingMsg?.id === actualMsgObject.id;

return (
<ChatMessage
key={actualMsgObject.id}
// If this message is the active pending one, use the live object from pendingMsg state (which has streamed content).
// Otherwise, use the version from the messages array (from storage).
msg={
isThisMessageTheActivePendingOne
? pendingMsg
: actualMsgObject
}
siblingLeafNodeIds={msgDisplay.siblingLeafNodeIds}
siblingCurrIdx={msgDisplay.siblingCurrIdx}
onRegenerateMessage={handleRegenerateMessage}
onEditMessage={handleEditMessage}
onChangeSibling={setCurrNodeId}
// A message is pending if it's the actively streaming one OR if it came from pendingMsgDisplay (for new messages)
isPending={
isThisMessageTheActivePendingOne || msgDisplay.isPending
}
onContinueMessage={handleContinueMessage}
/>
);
})}
</div>

{/* chat input */}
Expand Down
86 changes: 80 additions & 6 deletions examples/server/webui/src/components/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,14 @@ import { classNames } from '../utils/misc';
import daisyuiThemes from 'daisyui/theme/object';
import { THEMES } from '../Config';
import { useNavigate } from 'react-router';
import toast from 'react-hot-toast';
import { useModals } from './ModalProvider';
import {
ArrowUpTrayIcon,
ArrowDownTrayIcon,
PencilIcon,
TrashIcon,
} from '@heroicons/react/24/outline';

export default function Header() {
const navigate = useNavigate();
Expand All @@ -24,9 +32,11 @@ export default function Header() {
);
}, [selectedTheme]);

const {showPrompt } = useModals();
const { isGenerating, viewingChat } = useAppContext();
const isCurrConvGenerating = isGenerating(viewingChat?.conv.id ?? '');

// remove conversation
const removeConversation = () => {
if (isCurrConvGenerating || !viewingChat) return;
const convId = viewingChat?.conv.id;
Expand All @@ -35,6 +45,37 @@ export default function Header() {
navigate('/');
}
};

// rename conversation
async function renameConversation() {
if (isGenerating(viewingChat?.conv.id ?? '')) {
toast.error(
'Cannot rename conversation while generating'
);
return;
}
const newName = await showPrompt(
'Enter new name for the conversation',
viewingChat?.conv.name
);
if (newName && newName.trim().length > 0) {
StorageUtils.updateConversationName(viewingChat?.conv.id ?? '', newName);
}
//const importedConv = await StorageUtils.updateConversationName();
//if (importedConv) {
//console.log('Successfully imported:', importedConv.name);
// Refresh UI or navigate to conversation
//}
};

// at the top of your file, alongside ConversationExport:
async function importConversation() {
const importedConv = await StorageUtils.importConversationFromFile();
if (importedConv) {
console.log('Successfully imported:', importedConv.name);
// Refresh UI or navigate to conversation
}
};

const downloadConversation = () => {
if (isCurrConvGenerating || !viewingChat) return;
Expand Down Expand Up @@ -99,12 +140,45 @@ export default function Header() {
tabIndex={0}
className="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow"
>
<li onClick={downloadConversation}>
<a>Download</a>
</li>
<li className="text-error" onClick={removeConversation}>
<a>Delete</a>
</li>
{/* Always show Upload when viewingChat is false */}
{!viewingChat && (
<li onClick={importConversation}>
<a>
<ArrowUpTrayIcon className="w-4 h-4" />
Upload
</a>
</li>
)}

{/* Show all three when viewingChat is true */}
{viewingChat && (
<>
<li onClick={importConversation}>
<a>
<ArrowUpTrayIcon className="w-4 h-4" />
Upload
</a>
</li>
<li onClick={renameConversation} tabIndex={0}>
<a>
<PencilIcon className="w-4 h-4" />
Rename
</a>
</li>
<li onClick={downloadConversation}>
<a>
<ArrowDownTrayIcon className="w-4 h-4" />
Download
</a>
</li>
<li className="text-error" onClick={removeConversation}>
<a>
<TrashIcon className="w-4 h-4" />
Delete
</a>
</li>
</>
)}
</ul>
</div>
)}
Expand Down
Loading