refactor: add spinner svg component (#659)

Signed-off-by: Bob Du <i@bobdu.cc>

Author: BobDu

src/icons/Spinner.vue

@@ -0,0 +1,12 @@
+<template>
+  <svg
+    class="animate-spin shrink-0"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    v-bind="$attrs"
+  >
+    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+  </svg>
+</template>

src/views/chat/components/Message/Reasoning.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { useBasicLayout } from '@/hooks/useBasicLayout'
+import Spinner from '@/icons/Spinner.vue'
 
 const props = defineProps<Props>()
 
@@ -82,15 +83,7 @@ function toggleCollapse() {
     >
       <div class="flex items-center pr-2">
         <template v-if="shouldShowThinkingIndicator">
-          <svg
-            class="animate-spin mr-2 h-4 w-4 text-blue-500 dark:text-blue-400 shrink-0"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-          >
-            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
-            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
-          </svg>
+          <Spinner class="mr-2 h-4 w-4 text-blue-500 dark:text-blue-400" />
           <span class="text-gray-700 dark:text-gray-200 truncate">{{ t('chat.thinking') }}</span>
           <span v-if="hasReasoningText" class="mx-1.5 text-gray-400 dark:text-gray-500">|</span>
         </template>

src/views/chat/components/Message/Search.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { useBasicLayout } from '@/hooks/useBasicLayout'
+import Spinner from '@/icons/Spinner.vue'
 
 const props = defineProps<Props>()
 
@@ -90,15 +91,7 @@ function toggleCollapse() {
     >
       <div class="flex items-center pr-2">
         <template v-if="shouldShowSearchingIndicator">
-          <svg
-            class="animate-spin mr-2 h-4 w-4 text-blue-600 dark:text-blue-400 shrink-0"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-          >
-            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
-            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
-          </svg>
+          <Spinner class="mr-2 h-4 w-4 text-blue-600 dark:text-blue-400" />
           <span class="text-blue-700 dark:text-blue-200 truncate">{{ t('chat.searching') }}</span>
           <span class="ml-1.5 mr-5 text-blue-400 dark:text-blue-500">|</span>
         </template>