make some overall QoL improvements

public/js/script.js

@@ -107,6 +107,7 @@ import {
 const conversation = createConversationState();
 
 const headerModelButton = document.getElementById("headerModelButton");
+const stopBtn = document.getElementById("stopGeneration");
 const webSearchButton = document.getElementById("webSearch");
 const webSearchToggle = createWebSearchToggle(webSearchButton);
 const reasoningToggle = createReasoningToggle(document.getElementById("reasoning"));
@@ -124,7 +125,7 @@ let availableModelsById = new Map();
 const personalitySelect = document.getElementById("personalitySelect");
 let personalities = [];
 
-const {setMessageContent, scrollMessagesToBottom, updateJumpToLatest, addMessage, renderMessages} = createMessageRenderer({
+const {setMessageContent, scrollMessagesToBottom, updateJumpToLatest, addMessage, renderMessages, announceResponding, announceReply, announceResponseStatus} = createMessageRenderer({
     getChatById: (...args) => getChatById(...args),
     state: conversation,
     setNotice: (...args) => setNotice(...args),
@@ -138,7 +139,8 @@ const {setMessageContent, scrollMessagesToBottom, updateJumpToLatest, addMessage
     renderDrawerSummary: (...args) => renderDrawerSummary(...args),
     updateChatActionState: (...args) => updateChatActionState(...args),
     updateComposerPlaceholder: (...args) => updateComposerPlaceholder(...args),
-    createNewChat: (...args) => createNewChat(...args)
+    createNewChat: (...args) => createNewChat(...args),
+    openMessage: messageId => setActiveChat(conversation.activeChatId, {matchMessageId: messageId})
 });
 
 const {
@@ -195,7 +197,7 @@ const {
 
 const {updateSendState, resizeComposerInput, setLoadingState, stopGeneration, sendMessage} = createComposerController({
     state: conversation,
-    elements: {msgInput, sendBtn, messagesDiv, modelSelect},
+    elements: {msgInput, sendBtn, stopBtn, messagesDiv, modelSelect},
     attachmentComposer,
     webSearchButton,
     reasoningToggle,
@@ -211,6 +213,9 @@ const {updateSendState, resizeComposerInput, setLoadingState, stopGeneration, se
     updateChatActionState: (...args) => updateChatActionState(...args),
     scrollMessagesToBottom: (...args) => scrollMessagesToBottom(...args),
     setMessageContent: (...args) => setMessageContent(...args),
+    announceResponding,
+    announceReply,
+    announceResponseStatus,
     setActiveChat: (...args) => setActiveChat(...args),
     loadSummary: (...args) => loadSummary(...args),
     markOnboardingCompleted: (...args) => markOnboardingCompleted(...args),
@@ -221,7 +226,7 @@ const {exportCurrentChat, backupWorkspace, importWorkspaceFromFile} = createWork
     conversation, getChatById, setNotice, promptPopup, confirmPopup, setChatLoading, loadChatSessions
 });
 const {editChatMessage, deleteChatMessage, retryLatestAssistantMessage, switchResponseVersion, switchRetryVariant, branchFromMessage} = createMessageActions({
-    conversation, setNotice, promptPopup, confirmPopup, setActiveChat, openCreatedChat, setLoadingState, loadSummary, renderMessages, addMessage, setMessageContent, webSearchToggle, reasoningToggle, modelSelect, messagesDiv, msgInput
+    conversation, setNotice, promptPopup, confirmPopup, setActiveChat, openCreatedChat, setLoadingState, loadSummary, renderMessages, addMessage, setMessageContent, announceReply, announceResponseStatus, webSearchToggle, reasoningToggle, modelSelect, messagesDiv, msgInput
 });
 
 const memoryPanel = createMemoryPanel({state: conversation});
@@ -373,6 +378,7 @@ function maybeShowOnboarding() {
 }
 
 function updateComposerPlaceholder() {
+    if (conversation.isProcessing) { msgInput.placeholder = "Draft your next message..."; return; }
     const activeChat = getChatById(conversation.activeChatId);
     if (!activeChat) {
         msgInput.placeholder = "Create a chat to begin...";
@@ -979,8 +985,9 @@ function bindChatDrawerActions() {
     });
 }
 
-sendBtn.addEventListener("click", () => { void (conversation.isProcessing ? stopGeneration() : sendMessage()); });
-msgInput.addEventListener("keydown", (event) => { if (event.key === "Enter" && !event.shiftKey && !event.isComposing) { event.preventDefault(); void sendMessage(); } });
+sendBtn.addEventListener("click", () => { void sendMessage(); });
+stopBtn.addEventListener("click", () => { void stopGeneration(); });
+msgInput.addEventListener("keydown", (event) => { if (event.key === "Enter" && !event.shiftKey && !event.isComposing && !conversation.isProcessing) { event.preventDefault(); void sendMessage(); } });
 msgInput.addEventListener("input", function () {
     if (conversation.currentUsername) conversation.chatDrafts.set(conversation.activeChatId ?? "new", msgInput.value);
     resizeComposerInput();