feat: Add stop generation button during AI responses

src/components/chat-view/Chat.tsx

@@ -1,5 +1,5 @@
 import { useMutation } from '@tanstack/react-query'
-import { History, Plus } from 'lucide-react'
+import { CircleStop, History, Plus } from 'lucide-react'
 import { App, Notice } from 'obsidian'
 import {
   forwardRef,
@@ -118,9 +118,10 @@ const Chat = forwardRef<ChatRef, ChatProps>((props, ref) => {
   const [queryProgress, setQueryProgress] = useState<QueryProgressState>({
     type: 'idle',
   })
+  const [isStreaming, setIsStreaming] = useState(false)
+
   const preventAutoScrollRef = useRef(false)
   const lastProgrammaticScrollRef = useRef<number>(0)
-
   const activeStreamAbortControllersRef = useRef<AbortController[]>([])
   const chatUserInputRefs = useRef<Map<string, ChatUserInputRef>>(new Map())
   const chatMessagesRef = useRef<HTMLDivElement>(null)
@@ -171,6 +172,7 @@ const Chat = forwardRef<ChatRef, ChatProps>((props, ref) => {
       abortController.abort()
     }
     activeStreamAbortControllersRef.current = []
+    setIsStreaming(false)
   }
 
   const handleLoadConversation = async (conversationId: string) => {
@@ -241,6 +243,7 @@ const Chat = forwardRef<ChatRef, ChatProps>((props, ref) => {
       try {
         const abortController = new AbortController()
         activeStreamAbortControllersRef.current.push(abortController)
+        setIsStreaming(true)
 
         const { requestMessages, compiledMessages } =
           await promptGenerator.generateRequestMessages({
@@ -280,6 +283,7 @@ const Chat = forwardRef<ChatRef, ChatProps>((props, ref) => {
             handleScrollToBottom()
           }
         }
+        setIsStreaming(false)
       } catch (error) {
         if (error.name === 'AbortError') {
           return
@@ -594,6 +598,12 @@ const Chat = forwardRef<ChatRef, ChatProps>((props, ref) => {
           ),
         )}
         <QueryProgress state={queryProgress} />
+        {isStreaming && (
+          <button onClick={abortActiveStreams} className="smtcmp-stop-gen-btn">
+            <CircleStop size={16} />
+            <div>Stop Generation</div>
+          </button>
+        )}
       </div>
       <ChatUserInput
         key={inputMessage.id} // this is needed to clear the editor when the user submits a new message

styles.css

@@ -126,8 +126,20 @@ button:not(.clickable-icon).smtcmp-chat-list-dropdown {
 
 .smtcmp-chat-container {
   display: flex;
+  position: relative;
   flex-direction: column;
   height: 100%;
+
+  .smtcmp-stop-gen-btn {
+    z-index: 1000;
+    position: absolute;
+    bottom: 160px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    align-items: center;
+    gap: var(--size-4-1);
+  }
 }
 
 .smtcmp-chat-messages {