From 3b710020fe4e43791a2cc83f6b8552e772d73e0e Mon Sep 17 00:00:00 2001
From: JOJO <1498581755@qq.com>
Date: Sat, 4 Apr 2026 19:47:17 +0800
Subject: [PATCH] feat(chat): add randomized summary loaders in minimal mode

---
 static/src/components/chat/MinimalBlocks.vue  | 203 ++++++++++++------
 .../chat/loaders/BouncingSquaresLoader.vue    |  57 +++++
 .../chat/loaders/DualChaseLoader.vue          |  71 ++++++
 .../chat/loaders/FiveSquaresLoader.vue        | 107 +++++++++
 .../chat/loaders/NineGridLoader.vue           | 197 +++++++++++++++++
 .../components/chat/loaders/RippleLoader.vue  |  84 ++++++++
 .../chat/loaders/RotatingSquaresLoader.vue    |  83 +++++++
 .../chat/loaders/SquareGridLoader.vue         |  95 ++++++++
 static/src/components/chat/loaders/index.ts   |  25 +++
 9 files changed, 859 insertions(+), 63 deletions(-)
 create mode 100644 static/src/components/chat/loaders/BouncingSquaresLoader.vue
 create mode 100644 static/src/components/chat/loaders/DualChaseLoader.vue
 create mode 100644 static/src/components/chat/loaders/FiveSquaresLoader.vue
 create mode 100644 static/src/components/chat/loaders/NineGridLoader.vue
 create mode 100644 static/src/components/chat/loaders/RippleLoader.vue
 create mode 100644 static/src/components/chat/loaders/RotatingSquaresLoader.vue
 create mode 100644 static/src/components/chat/loaders/SquareGridLoader.vue
 create mode 100644 static/src/components/chat/loaders/index.ts

diff --git a/static/src/components/chat/MinimalBlocks.vue b/static/src/components/chat/MinimalBlocks.vue
index 269e346..a326fa2 100644
--- a/static/src/components/chat/MinimalBlocks.vue
+++ b/static/src/components/chat/MinimalBlocks.vue
@@ -1,12 +1,5 @@
 <template>
   <div class="minimal-blocks-container">
-    <!-- 等待动画 -->
-    <div v-if="showGenerating" class="generating-placeholder">
-      <span v-for="(letter, letterIdx) in '思考中...'.split('')" :key="letterIdx" class="letter" :style="{ animationDelay: `${letterIdx * 0.1}s` }">
-        {{ letter }}
-      </span>
-    </div>
-
     <!-- 按真实顺序显示分组 -->
     <template v-for="group in blockGroups" :key="group.id">
       <!-- 摘要组（thinking/tool） -->
@@ -20,9 +13,14 @@
           <div class="summary-content-wrapper">
             <span class="summary-preview">{{ getSummaryPreview(group.actions) }}</span>
           </div>
-          <svg class="expand-icon" :class="{ expanded: expandedGroups.has(group.id) }" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <polyline points="6 9 12 15 18 9"></polyline>
-          </svg>
+          <!-- 加载动画或完成图标 -->
+          <div class="summary-status-icon">
+            <component v-if="isSummaryRunning(group.actions, group.id)" :is="getSummaryLoader(group.id)" />
+            <svg v-else class="check-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <circle cx="12" cy="12" r="10" />
+              <polyline points="7.5 12 10.5 15 16.5 9" />
+            </svg>
+          </div>
         </div>
 
         <!-- 步骤容器（展开时显示所有步骤） -->
@@ -78,9 +76,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, nextTick } from 'vue';
+import { ref, computed, watch, nextTick, Component } from 'vue';
 import { usePersonalizationStore } from '@/stores/personalization';
 import { renderEnhancedToolResult } from './actions/toolRenderers';
+import { getRandomLoader } from './loaders/index';
 
 interface Action {
   id?: string;
@@ -128,6 +127,46 @@ const props = defineProps<{
 
 const personalizationStore = usePersonalizationStore();
 const expandedGroups = ref(new Set<string>());
+const thinkingRefs = new Map<string, HTMLElement>();
+const summaryLoaders = new Map<string, Component>();
+
+// 获取摘要组的加载动画组件（每次action类型切换时随机一次）
+const getSummaryLoader = (groupId: string) => {
+  const group = blockGroups.value.find(g => g.id === groupId);
+  if (!group || !group.actions) return getRandomLoader();
+
+  // 找到当前正在streaming的action，或最后一个action
+  const streamingAction = group.actions.find(a => a.streaming);
+  const currentAction = streamingAction || group.actions[group.actions.length - 1];
+
+  if (!currentAction) return getRandomLoader();
+
+  // 找到当前action之前最近的一个不同类型的action
+  // 用于判断是否发生了类型切换（thinking <-> tool）
+  const currentIndex = group.actions.indexOf(currentAction);
+  let lastDifferentTypeIndex = -1;
+
+  for (let i = currentIndex - 1; i >= 0; i--) {
+    if (group.actions[i].type !== currentAction.type) {
+      lastDifferentTypeIndex = i;
+      break;
+    }
+  }
+
+  // 使用"类型切换点"作为key
+  // 如果是第一个action，或者类型发生了切换，就会生成新的key
+  // 如果是相同类型的连续action（如多个工具并行），使用相同的key
+  const typeSegmentKey = lastDifferentTypeIndex >= 0
+    ? `${group.actions[lastDifferentTypeIndex].id}-${currentAction.type}`
+    : `start-${currentAction.type}`;
+
+  const cacheKey = `${groupId}-${typeSegmentKey}`;
+
+  if (!summaryLoaders.has(cacheKey)) {
+    summaryLoaders.set(cacheKey, getRandomLoader());
+  }
+  return summaryLoaders.get(cacheKey);
+};
 
 // 将 actions 分组：连续的 thinking/tool 为一组，text 单独为一组
 const blockGroups = computed(() => {
@@ -141,11 +180,14 @@ const blockGroups = computed(() => {
     } else if (action.type === 'text') {
       // 先保存当前的 thinking/tool 组
       if (currentGroup.length > 0) {
+        // 使用第一个 action 的 id 作为 group id，保证稳定性
+        const firstActionId = currentGroup[0].id || currentGroup[0].blockId || `summary-${groupIndex}`;
         groups.push({
           type: 'summary',
-          id: `summary-${groupIndex++}`,
+          id: `summary-${firstActionId}`,
           actions: currentGroup
         });
+        groupIndex++;
         currentGroup = [];
       }
       // 添加 text 组
@@ -160,9 +202,11 @@ const blockGroups = computed(() => {
 
   // 处理最后剩余的 thinking/tool 组
   if (currentGroup.length > 0) {
+    // 使用第一个 action 的 id 作为 group id，保证稳定性
+    const firstActionId = currentGroup[0].id || currentGroup[0].blockId || `summary-${groupIndex}`;
     groups.push({
       type: 'summary',
-      id: `summary-${groupIndex}`,
+      id: `summary-${firstActionId}`,
       actions: currentGroup
     });
   }
@@ -170,20 +214,25 @@ const blockGroups = computed(() => {
   return groups;
 });
 
-// 是否显示等待动画
-const showGenerating = computed(() => {
-  const hasAnyThinkingOrTool = props.actions.some(a => a.type === 'thinking' || a.type === 'tool');
-  const isStreaming = props.actions.some(a => a.streaming && (a.type === 'thinking' || a.type === 'tool'));
-  return isStreaming && !hasAnyThinkingOrTool;
-});
-
 // 获取摘要组的预览文本（始终显示最新的思考/工具）
 const getSummaryPreview = (actions: Action[]) => {
   // 优先返回正在 streaming 的最后一个
   const streamingActions = actions.filter(a => a.streaming);
-  const currentStep = streamingActions.length > 0
-    ? streamingActions[streamingActions.length - 1]
-    : actions[actions.length - 1]; // 如果没有 streaming 的，返回最后一个
+
+  let currentStep;
+  if (streamingActions.length > 0) {
+    // 如果有 streaming 的，返回最后一个 streaming 的
+    currentStep = streamingActions[streamingActions.length - 1];
+  } else {
+    // 如果没有 streaming 的（全部完成了），优先返回最后一个工具
+    const toolActions = actions.filter(a => a.type === 'tool');
+    if (toolActions.length > 0) {
+      currentStep = toolActions[toolActions.length - 1];
+    } else {
+      // 如果没有工具，返回最后一个思考
+      currentStep = actions[actions.length - 1];
+    }
+  }
 
   if (!currentStep) return '';
 
@@ -223,7 +272,7 @@ const getSummaryPreview = (actions: Action[]) => {
   return '';
 };
 
-// 判断摘要组是否正在运行（包括已完成但后面还没有文本输出的情况）
+// 判断摘要组是否正在运行（显示加载动画还是对勾）
 const isSummaryRunning = (actions: Action[], groupId: string) => {
   // 找到当前 group 在 blockGroups 中的索引
   const currentIndex = blockGroups.value.findIndex(g => g.id === groupId);
@@ -232,11 +281,9 @@ const isSummaryRunning = (actions: Action[], groupId: string) => {
   // 检查后面是否有文本输出
   const hasTextAfter = blockGroups.value.slice(currentIndex + 1).some(g => g.type === 'text');
 
-  // 如果后面有文本输出，说明这个 summary group 已经完成了，不再显示变色效果
-  if (hasTextAfter) return false;
-
-  // 否则，这个 summary group 应该有变色效果（无论是运行中还是已完成）
-  return true;
+  // 只有当后面有文本输出时，才显示对勾（说明这个摘要组已经完成并开始输出了）
+  // 否则一直显示加载动画（即使工具执行完了，也要等下一个步骤或文本输出）
+  return !hasTextAfter;
 };
 
 // 获取摘要组的所有步骤（用于展开显示）
@@ -253,8 +300,45 @@ const getSummarySteps = (actions: Action[]) => {
 const toggleExpand = (groupId: string) => {
   if (expandedGroups.value.has(groupId)) {
     expandedGroups.value.delete(groupId);
+
+    // 折叠后，取消注册该组中的思考内容 ref
+    nextTick(() => {
+      const group = blockGroups.value.find(g => g.id === groupId);
+      if (group && group.actions) {
+        group.actions.forEach(action => {
+          if (action.type === 'thinking') {
+            const blockId = action.id || action.blockId;
+            if (blockId && typeof props.registerThinkingRef === 'function') {
+              props.registerThinkingRef(blockId, null);
+            }
+          }
+        });
+      }
+    });
   } else {
     expandedGroups.value.add(groupId);
+
+    // 展开后，注册该组中的思考内容 ref
+    nextTick(() => {
+      const group = blockGroups.value.find(g => g.id === groupId);
+      if (group && group.actions) {
+        group.actions.forEach(action => {
+          if (action.type === 'thinking') {
+            const blockId = action.id || action.blockId;
+            if (blockId) {
+              const el = thinkingRefs.get(blockId);
+              if (el && typeof props.registerThinkingRef === 'function') {
+                props.registerThinkingRef(blockId, el);
+                // 如果正在 streaming，滚动到底部
+                if (action.streaming) {
+                  el.scrollTop = el.scrollHeight;
+                }
+              }
+            }
+          }
+        });
+      }
+    });
   }
 };
 
@@ -338,8 +422,23 @@ const escapeHtml = (text: string) => {
 };
 
 const registerThinking = (key: string, el: Element | null) => {
-  if (typeof props.registerThinkingRef === 'function') {
-    props.registerThinkingRef(key, el);
+  // 本地保存一份，用于展开/折叠时管理
+  if (el instanceof HTMLElement) {
+    thinkingRefs.set(key, el);
+  } else {
+    thinkingRefs.delete(key);
+  }
+
+  // 检查当前思考内容所在的摘要是否展开
+  const group = blockGroups.value.find(g =>
+    g.type === 'summary' && g.actions && g.actions.some(a => (a.id === key || a.blockId === key))
+  );
+
+  // 只有展开的摘要中的思考内容才注册到父组件
+  if (group && expandedGroups.value.has(group.id)) {
+    if (typeof props.registerThinkingRef === 'function') {
+      props.registerThinkingRef(key, el);
+    }
   }
 };
 
@@ -359,33 +458,6 @@ watch(() => props.actions, () => {
   margin: 16px 0;
 }
 
-/* 等待动画 */
-.generating-placeholder {
-  display: flex;
-  gap: 4px;
-  padding: 12px 0;
-  font-size: 15px;
-  font-weight: 500;
-  color: var(--claude-text-tertiary);
-}
-
-.generating-placeholder .letter {
-  display: inline-block;
-  animation: wave 1.6s ease-in-out infinite;
-  opacity: 0.4;
-}
-
-@keyframes wave {
-  0%, 100% {
-    opacity: 0.4;
-    transform: translateY(0);
-  }
-  50% {
-    opacity: 1;
-    transform: translateY(-3px);
-  }
-}
-
 /* 摘要组 */
 .summary-group {
   margin: 16px 0;
@@ -421,15 +493,20 @@ watch(() => props.actions, () => {
   color: inherit;
 }
 
-.expand-icon {
+.summary-status-icon {
   flex-shrink: 0;
   margin-left: 8px;
-  color: var(--claude-text-tertiary);
-  transition: transform 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
 }
 
-.expand-icon.expanded {
-  transform: rotate(180deg);
+.check-icon {
+  color: var(--claude-text-tertiary);
+  width: 18px;
+  height: 18px;
 }
 
 /* 运行中的发光效果 */
diff --git a/static/src/components/chat/loaders/BouncingSquaresLoader.vue b/static/src/components/chat/loaders/BouncingSquaresLoader.vue
new file mode 100644
index 0000000..67d5c41
--- /dev/null
+++ b/static/src/components/chat/loaders/BouncingSquaresLoader.vue
@@ -0,0 +1,57 @@
+<template>
+  <div class="bouncing-squares-loader">
+    <div class="square"></div>
+    <div class="square"></div>
+    <div class="square"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// From Uiverse.io by mobinkakei (modified)
+</script>
+
+<style scoped>
+.bouncing-squares-loader {
+  width: 40px;
+  height: 20px;
+  position: relative;
+}
+
+.square {
+  width: 3px;
+  height: 3px;
+  position: absolute;
+  background-color: var(--claude-text-tertiary);
+  left: 15%;
+  transform-origin: 50%;
+  animation: bounce-square .5s alternate infinite ease;
+}
+
+@keyframes bounce-square {
+  0% {
+    top: 20px;
+    height: 2px;
+    transform: scaleX(1.7);
+  }
+
+  40% {
+    height: 3px;
+    transform: scaleX(1);
+  }
+
+  100% {
+    top: 0%;
+  }
+}
+
+.square:nth-child(2) {
+  left: 45%;
+  animation-delay: .2s;
+}
+
+.square:nth-child(3) {
+  left: auto;
+  right: 15%;
+  animation-delay: .3s;
+}
+</style>
diff --git a/static/src/components/chat/loaders/DualChaseLoader.vue b/static/src/components/chat/loaders/DualChaseLoader.vue
new file mode 100644
index 0000000..f2bb5fa
--- /dev/null
+++ b/static/src/components/chat/loaders/DualChaseLoader.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="dual-chase-loader"></div>
+</template>
+
+<script setup lang="ts">
+// From Uiverse.io by satyamchaudharydev (modified)
+</script>
+
+<style scoped>
+.dual-chase-loader {
+  --size: 6px;
+  width: 16px;
+  height: 16px;
+  position: relative;
+}
+
+.dual-chase-loader::after,
+.dual-chase-loader::before {
+  box-sizing: border-box;
+  position: absolute;
+  content: "";
+  width: var(--size);
+  height: var(--size);
+  top: 50%;
+  animation: chase-up 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
+  left: 50%;
+  background: var(--claude-text-tertiary);
+}
+
+.dual-chase-loader::after {
+  top: calc(50% - var(--size));
+  left: calc(50% - var(--size));
+  animation: chase-down 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
+}
+
+@keyframes chase-down {
+  0%, 100% {
+    transform: none;
+  }
+
+  25% {
+    transform: translateX(100%);
+  }
+
+  50% {
+    transform: translateX(100%) translateY(100%);
+  }
+
+  75% {
+    transform: translateY(100%);
+  }
+}
+
+@keyframes chase-up {
+  0%, 100% {
+    transform: none;
+  }
+
+  25% {
+    transform: translateX(-100%);
+  }
+
+  50% {
+    transform: translateX(-100%) translateY(-100%);
+  }
+
+  75% {
+    transform: translateY(-100%);
+  }
+}
+</style>
diff --git a/static/src/components/chat/loaders/FiveSquaresLoader.vue b/static/src/components/chat/loaders/FiveSquaresLoader.vue
new file mode 100644
index 0000000..ee202d8
--- /dev/null
+++ b/static/src/components/chat/loaders/FiveSquaresLoader.vue
@@ -0,0 +1,107 @@
+<template>
+  <div class="five-squares-loader">
+    <div id="sq1"></div>
+    <div id="sq2"></div>
+    <div id="sq3"></div>
+    <div id="sq4"></div>
+    <div id="sq5"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// From Uiverse.io by Nawsome (modified)
+</script>
+
+<style scoped>
+.five-squares-loader {
+  --square: 3px;
+  --offset: 7.5px;
+  width: calc(3 * var(--offset) + var(--square));
+  height: calc(2 * var(--offset) + var(--square));
+  position: relative;
+}
+
+.five-squares-loader div {
+  display: inline-block;
+  background: var(--claude-text-tertiary);
+  width: var(--square);
+  height: var(--square);
+  position: absolute;
+}
+
+.five-squares-loader #sq1 {
+  left: 0;
+  top: 0;
+  animation: square1 2.4s 0.2s ease-in-out infinite;
+}
+
+.five-squares-loader #sq2 {
+  left: 0;
+  top: var(--offset);
+  animation: square2 2.4s 0.2s ease-in-out infinite;
+}
+
+.five-squares-loader #sq3 {
+  left: var(--offset);
+  top: var(--offset);
+  animation: square3 2.4s 0.2s ease-in-out infinite;
+}
+
+.five-squares-loader #sq4 {
+  left: calc(2 * var(--offset));
+  top: var(--offset);
+  animation: square4 2.4s 0.2s ease-in-out infinite;
+}
+
+.five-squares-loader #sq5 {
+  left: calc(3 * var(--offset));
+  top: var(--offset);
+  animation: square5 2.4s 0.2s ease-in-out infinite;
+}
+
+@keyframes square1 {
+  0% { left: 0; top: 0; }
+  8.33% { left: 0; top: var(--offset); }
+  100% { left: 0; top: var(--offset); }
+}
+
+@keyframes square2 {
+  0% { left: 0; top: var(--offset); }
+  8.33% { left: 0; top: calc(2 * var(--offset)); }
+  16.67% { left: var(--offset); top: calc(2 * var(--offset)); }
+  25% { left: var(--offset); top: var(--offset); }
+  83.33% { left: var(--offset); top: var(--offset); }
+  91.67% { left: var(--offset); top: 0; }
+  100% { left: 0; top: 0; }
+}
+
+@keyframes square3 {
+  0%, 100% { left: var(--offset); top: var(--offset); }
+  16.67% { left: var(--offset); top: var(--offset); }
+  25% { left: var(--offset); top: 0; }
+  33.33% { left: calc(2 * var(--offset)); top: 0; }
+  41.67% { left: calc(2 * var(--offset)); top: var(--offset); }
+  66.67% { left: calc(2 * var(--offset)); top: var(--offset); }
+  75% { left: calc(2 * var(--offset)); top: calc(2 * var(--offset)); }
+  83.33% { left: var(--offset); top: calc(2 * var(--offset)); }
+  91.67% { left: var(--offset); top: var(--offset); }
+}
+
+@keyframes square4 {
+  0% { left: calc(2 * var(--offset)); top: var(--offset); }
+  33.33% { left: calc(2 * var(--offset)); top: var(--offset); }
+  41.67% { left: calc(2 * var(--offset)); top: calc(2 * var(--offset)); }
+  50% { left: calc(3 * var(--offset)); top: calc(2 * var(--offset)); }
+  58.33% { left: calc(3 * var(--offset)); top: var(--offset); }
+  100% { left: calc(3 * var(--offset)); top: var(--offset); }
+}
+
+@keyframes square5 {
+  0% { left: calc(3 * var(--offset)); top: var(--offset); }
+  50% { left: calc(3 * var(--offset)); top: var(--offset); }
+  58.33% { left: calc(3 * var(--offset)); top: 0; }
+  66.67% { left: calc(2 * var(--offset)); top: 0; }
+  75% { left: calc(2 * var(--offset)); top: var(--offset); }
+  100% { left: calc(2 * var(--offset)); top: var(--offset); }
+}
+</style>
diff --git a/static/src/components/chat/loaders/NineGridLoader.vue b/static/src/components/chat/loaders/NineGridLoader.vue
new file mode 100644
index 0000000..81294c2
--- /dev/null
+++ b/static/src/components/chat/loaders/NineGridLoader.vue
@@ -0,0 +1,197 @@
+<template>
+  <div class="nine-grid-loader">
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// From Uiverse.io by Nawsome (modified)
+</script>
+
+<style scoped>
+.nine-grid-loader {
+  position: relative;
+  width: 20px;
+  height: 20px;
+}
+
+.box {
+  float: left;
+  position: relative;
+  width: 3px;
+  height: 3px;
+  margin-right: 4px;
+}
+
+.box:before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--claude-text-tertiary);
+}
+
+.box:nth-child(3n) {
+  margin-right: 0;
+  margin-bottom: 4px;
+}
+
+.box:nth-child(1):before,
+.box:nth-child(4):before {
+  margin-left: 7px;
+}
+
+.box:nth-child(3):before {
+  margin-top: 14px;
+}
+
+.box:last-child {
+  margin-bottom: 0;
+}
+
+.box:nth-child(1) { animation: moveBox-1 4s infinite; }
+.box:nth-child(2) { animation: moveBox-2 4s infinite; }
+.box:nth-child(3) { animation: moveBox-3 4s infinite; }
+.box:nth-child(4) { animation: moveBox-4 4s infinite; }
+.box:nth-child(5) { animation: moveBox-5 4s infinite; }
+.box:nth-child(6) { animation: moveBox-6 4s infinite; }
+.box:nth-child(7) { animation: moveBox-7 4s infinite; }
+.box:nth-child(8) { animation: moveBox-8 4s infinite; }
+.box:nth-child(9) { animation: moveBox-9 4s infinite; }
+
+@keyframes moveBox-1 {
+  9% { transform: translate(-7px, 0); }
+  18% { transform: translate(0, 0); }
+  27% { transform: translate(0, 0); }
+  36% { transform: translate(7px, 0); }
+  45% { transform: translate(7px, 7px); }
+  54% { transform: translate(7px, 7px); }
+  63% { transform: translate(7px, 7px); }
+  72% { transform: translate(7px, 0); }
+  81% { transform: translate(0, 0); }
+  90% { transform: translate(-7px, 0); }
+  100% { transform: translate(0, 0); }
+}
+
+@keyframes moveBox-2 {
+  9% { transform: translate(0, 0); }
+  18% { transform: translate(7px, 0); }
+  27% { transform: translate(0, 0); }
+  36% { transform: translate(7px, 0); }
+  45% { transform: translate(7px, 7px); }
+  54% { transform: translate(7px, 7px); }
+  63% { transform: translate(7px, 7px); }
+  72% { transform: translate(7px, 7px); }
+  81% { transform: translate(0, 7px); }
+  90% { transform: translate(0, 7px); }
+  100% { transform: translate(0, 0); }
+}
+
+@keyframes moveBox-3 {
+  9% { transform: translate(-7px, 0); }
+  18% { transform: translate(-7px, 0); }
+  27% { transform: translate(0, 0); }
+  36% { transform: translate(-7px, 0); }
+  45% { transform: translate(-7px, 0); }
+  54% { transform: translate(-7px, 0); }
+  63% { transform: translate(-7px, 0); }
+  72% { transform: translate(-7px, 0); }
+  81% { transform: translate(-7px, -7px); }
+  90% { transform: translate(0, -7px); }
+  100% { transform: translate(0, 0); }
+}
+
+@keyframes moveBox-4 {
+  9% { transform: translate(-7px, 0); }
+  18% { transform: translate(-7px, 0); }
+  27% { transform: translate(-7px, -7px); }
+  36% { transform: translate(0, -7px); }
+  45% { transform: translate(0, 0); }
+  54% { transform: translate(0, -7px); }
+  63% { transform: translate(0, -7px); }
+  72% { transform: translate(0, -7px); }
+  81% { transform: translate(-7px, -7px); }
+  90% { transform: translate(-7px, 0); }
+  100% { transform: translate(0, 0); }
+}
+
+@keyframes moveBox-5 {
+  9% { transform: translate(0, 0); }
+  18% { transform: translate(0, 0); }
+  27% { transform: translate(0, 0); }
+  36% { transform: translate(7px, 0); }
+  45% { transform: translate(7px, 0); }
+  54% { transform: translate(7px, 0); }
+  63% { transform: translate(7px, 0); }
+  72% { transform: translate(7px, 0); }
+  81% { transform: translate(7px, -7px); }
+  90% { transform: translate(0, -7px); }
+  100% { transform: translate(0, 0); }
+}
+
+@keyframes moveBox-6 {
+  9% { transform: translate(0, 0); }
+  18% { transform: translate(-7px, 0); }
+  27% { transform: translate(-7px, 0); }
+  36% { transform: translate(0, 0); }
+  45% { transform: translate(0, 0); }
+  54% { transform: translate(0, 0); }
+  63% { transform: translate(0, 0); }
+  72% { transform: translate(0, 7px); }
+  81% { transform: translate(-7px, 7px); }
+  90% { transform: translate(-7px, 0); }
+  100% { transform: translate(0, 0); }
+}
+
+@keyframes moveBox-7 {
+  9% { transform: translate(7px, 0); }
+  18% { transform: translate(7px, 0); }
+  27% { transform: translate(7px, 0); }
+  36% { transform: translate(0, 0); }
+  45% { transform: translate(0, -7px); }
+  54% { transform: translate(7px, -7px); }
+  63% { transform: translate(0, -7px); }
+  72% { transform: translate(0, -7px); }
+  81% { transform: translate(0, 0); }
+  90% { transform: translate(7px, 0); }
+  100% { transform: translate(0, 0); }
+}
+
+@keyframes moveBox-8 {
+  9% { transform: translate(0, 0); }
+  18% { transform: translate(-7px, 0); }
+  27% { transform: translate(-7px, -7px); }
+  36% { transform: translate(0, -7px); }
+  45% { transform: translate(0, -7px); }
+  54% { transform: translate(0, -7px); }
+  63% { transform: translate(0, -7px); }
+  72% { transform: translate(0, -7px); }
+  81% { transform: translate(7px, -7px); }
+  90% { transform: translate(7px, 0); }
+  100% { transform: translate(0, 0); }
+}
+
+@keyframes moveBox-9 {
+  9% { transform: translate(-7px, 0); }
+  18% { transform: translate(-7px, 0); }
+  27% { transform: translate(0, 0); }
+  36% { transform: translate(-7px, 0); }
+  45% { transform: translate(0, 0); }
+  54% { transform: translate(0, 0); }
+  63% { transform: translate(-7px, 0); }
+  72% { transform: translate(-7px, 0); }
+  81% { transform: translate(-14px, 0); }
+  90% { transform: translate(-7px, 0); }
+  100% { transform: translate(0, 0); }
+}
+</style>
diff --git a/static/src/components/chat/loaders/RippleLoader.vue b/static/src/components/chat/loaders/RippleLoader.vue
new file mode 100644
index 0000000..dd44af1
--- /dev/null
+++ b/static/src/components/chat/loaders/RippleLoader.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="ripple-loader">
+    <div class="cell d-0"></div>
+    <div class="cell d-1"></div>
+    <div class="cell d-2"></div>
+    <div class="cell d-1"></div>
+    <div class="cell d-2"></div>
+    <div class="cell d-2"></div>
+    <div class="cell d-3"></div>
+    <div class="cell d-3"></div>
+    <div class="cell d-4"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// From Uiverse.io by alexruix (modified)
+</script>
+
+<style scoped>
+.ripple-loader {
+  --cell-size: 3px;
+  --cell-spacing: 2px;
+  --cells: 3;
+  --total-size: calc(var(--cells) * (var(--cell-size) + 2 * var(--cell-spacing)));
+  display: flex;
+  flex-wrap: wrap;
+  width: var(--total-size);
+  height: var(--total-size);
+}
+
+.cell {
+  flex: 0 0 var(--cell-size);
+  margin: var(--cell-spacing);
+  background-color: transparent;
+  box-sizing: border-box;
+  animation: 1.5s ripple ease infinite;
+}
+
+.cell.d-1 {
+  animation-delay: 100ms;
+}
+
+.cell.d-2 {
+  animation-delay: 200ms;
+}
+
+.cell.d-3 {
+  animation-delay: 300ms;
+}
+
+.cell.d-4 {
+  animation-delay: 400ms;
+}
+
+.cell:nth-child(1),
+.cell:nth-child(2),
+.cell:nth-child(3),
+.cell:nth-child(4),
+.cell:nth-child(5),
+.cell:nth-child(6),
+.cell:nth-child(7),
+.cell:nth-child(8),
+.cell:nth-child(9) {
+  --cell-color: var(--claude-text-tertiary);
+}
+
+@keyframes ripple {
+  0% {
+    background-color: transparent;
+  }
+
+  30% {
+    background-color: var(--cell-color);
+  }
+
+  60% {
+    background-color: transparent;
+  }
+
+  100% {
+    background-color: transparent;
+  }
+}
+</style>
diff --git a/static/src/components/chat/loaders/RotatingSquaresLoader.vue b/static/src/components/chat/loaders/RotatingSquaresLoader.vue
new file mode 100644
index 0000000..20fa266
--- /dev/null
+++ b/static/src/components/chat/loaders/RotatingSquaresLoader.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="rotating-squares-loader">
+    <div class="square"></div>
+    <div class="square"></div>
+    <div class="square"></div>
+    <div class="square"></div>
+    <div class="square"></div>
+    <div class="square"></div>
+    <div class="square"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// From Uiverse.io by ZacharyCrespin (modified)
+</script>
+
+<style scoped>
+@keyframes square-animation {
+  0% { left: 0; top: 0; }
+  10.5% { left: 0; top: 0; }
+  12.5% { left: 8px; top: 0; }
+  23% { left: 8px; top: 0; }
+  25% { left: 16px; top: 0; }
+  35.5% { left: 16px; top: 0; }
+  37.5% { left: 16px; top: 8px; }
+  48% { left: 16px; top: 8px; }
+  50% { left: 8px; top: 8px; }
+  60.5% { left: 8px; top: 8px; }
+  62.5% { left: 8px; top: 16px; }
+  73% { left: 8px; top: 16px; }
+  75% { left: 0; top: 16px; }
+  85.5% { left: 0; top: 16px; }
+  87.5% { left: 0; top: 8px; }
+  98% { left: 0; top: 8px; }
+  100% { left: 0; top: 0; }
+}
+
+.rotating-squares-loader {
+  position: relative;
+  width: 24px;
+  height: 24px;
+  transform: rotate(45deg);
+}
+
+.square {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 3px;
+  height: 3px;
+  margin: 0.5px;
+  background: var(--claude-text-tertiary);
+  animation: square-animation 10s ease-in-out infinite both;
+}
+
+.square:nth-of-type(1) {
+  animation-delay: -1.43s;
+}
+
+.square:nth-of-type(2) {
+  animation-delay: -2.86s;
+}
+
+.square:nth-of-type(3) {
+  animation-delay: -4.29s;
+}
+
+.square:nth-of-type(4) {
+  animation-delay: -5.71s;
+}
+
+.square:nth-of-type(5) {
+  animation-delay: -7.14s;
+}
+
+.square:nth-of-type(6) {
+  animation-delay: -8.57s;
+}
+
+.square:nth-of-type(7) {
+  animation-delay: -10s;
+}
+</style>
diff --git a/static/src/components/chat/loaders/SquareGridLoader.vue b/static/src/components/chat/loaders/SquareGridLoader.vue
new file mode 100644
index 0000000..e262971
--- /dev/null
+++ b/static/src/components/chat/loaders/SquareGridLoader.vue
@@ -0,0 +1,95 @@
+<template>
+  <div class="square-grid-loader">
+    <div class="square" id="sq1"></div>
+    <div class="square" id="sq2"></div>
+    <div class="square" id="sq3"></div>
+    <div class="square" id="sq4"></div>
+    <div class="square" id="sq5"></div>
+    <div class="square" id="sq6"></div>
+    <div class="square" id="sq7"></div>
+    <div class="square" id="sq8"></div>
+    <div class="square" id="sq9"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// From Uiverse.io by JkHuger
+</script>
+
+<style scoped>
+@keyframes loader_5191 {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.square-grid-loader {
+  position: relative;
+  width: 16px;
+  height: 16px;
+}
+
+.square {
+  background: var(--claude-text-tertiary);
+  width: 3px;
+  height: 3px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -1.5px;
+  margin-left: -1.5px;
+  border-radius: 0.5px;
+}
+
+#sq1 {
+  margin-top: -7.5px;
+  margin-left: -7.5px;
+  animation: loader_5191 675ms ease-in-out 0s infinite alternate;
+}
+
+#sq2 {
+  margin-top: -7.5px;
+  animation: loader_5191 675ms ease-in-out 75ms infinite alternate;
+}
+
+#sq3 {
+  margin-top: -7.5px;
+  margin-left: 4.5px;
+  animation: loader_5191 675ms ease-in-out 150ms infinite;
+}
+
+#sq4 {
+  margin-left: -7.5px;
+  animation: loader_5191 675ms ease-in-out 225ms infinite;
+}
+
+#sq5 {
+  animation: loader_5191 675ms ease-in-out 300ms infinite;
+}
+
+#sq6 {
+  margin-left: 4.5px;
+  animation: loader_5191 675ms ease-in-out 375ms infinite;
+}
+
+#sq7 {
+  margin-top: 4.5px;
+  margin-left: -7.5px;
+  animation: loader_5191 675ms ease-in-out 450ms infinite;
+}
+
+#sq8 {
+  margin-top: 4.5px;
+  animation: loader_5191 675ms ease-in-out 525ms infinite;
+}
+
+#sq9 {
+  margin-top: 4.5px;
+  margin-left: 4.5px;
+  animation: loader_5191 675ms ease-in-out 600ms infinite;
+}
+</style>
diff --git a/static/src/components/chat/loaders/index.ts b/static/src/components/chat/loaders/index.ts
new file mode 100644
index 0000000..af30df3
--- /dev/null
+++ b/static/src/components/chat/loaders/index.ts
@@ -0,0 +1,25 @@
+import { Component } from 'vue';
+import SquareGridLoader from './SquareGridLoader.vue';
+import RotatingSquaresLoader from './RotatingSquaresLoader.vue';
+import DualChaseLoader from './DualChaseLoader.vue';
+import BouncingSquaresLoader from './BouncingSquaresLoader.vue';
+import FiveSquaresLoader from './FiveSquaresLoader.vue';
+import NineGridLoader from './NineGridLoader.vue';
+import RippleLoader from './RippleLoader.vue';
+
+// 加载动画池
+export const loaderPool: Component[] = [
+  SquareGridLoader,
+  RotatingSquaresLoader,
+  DualChaseLoader,
+  BouncingSquaresLoader,
+  FiveSquaresLoader,
+  NineGridLoader,
+  RippleLoader
+];
+
+// 随机获取一个加载动画
+export function getRandomLoader(): Component {
+  const randomIndex = Math.floor(Math.random() * loaderPool.length);
+  return loaderPool[randomIndex];
+}