feat(chat): stop active llm responses

frontend/public/pages/chats.html

@@ -68,12 +68,18 @@
             x-html="renderMarkdown(message.content)"
           ></div>
 
-          <!-- Timestamp -->
+          <!-- Message Metadata -->
           <div class="flex items-center justify-between gap-2 mt-2">
             <div
               class="text-[10px] opacity-60"
               x-text="new Date(message.created_at).toLocaleTimeString()"
             ></div>
+            <div
+              x-show="message.role === 'assistant' && ['stopped', 'error', 'failed'].includes(message.status)"
+              :class="message.status === 'stopped' ? 'bg-primary-300/50 text-primary-700' : 'bg-tertiary-100 text-tertiary-700'"
+              class="px-2 py-0.5 rounded-full text-[10px] font-medium"
+              x-text="message.status === 'stopped' ? 'Stopped' : 'Error'"
+            ></div>
           </div>
         </div>
 
@@ -279,6 +285,26 @@
               </svg>
             </template>
           </button>
+
+          <button
+            x-show="loading"
+            type="button"
+            @click="stopResponse()"
+            :disabled="!activeStreamChatID"
+            :class="!activeStreamChatID ? 'opacity-50 cursor-not-allowed' : 'hover:shadow-md hover:scale-105'"
+            class="self-stretch w-[44px] bg-tertiary-600 text-white rounded-xl transition-all flex items-center justify-center flex-shrink-0"
+            title="Stop response"
+            aria-label="Stop response"
+          >
+            <svg
+              class="h-4 w-4"
+              fill="currentColor"
+              viewBox="0 0 24 24"
+              aria-hidden="true"
+            >
+              <path d="M6 6h12v12H6z" />
+            </svg>
+          </button>
         </form>
 
         <!-- Error Message -->