feat: Chat UI done

components/aigc/chat/Message.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type {PropType} from "vue";
 import type {ChatMessage} from "~/components/aigc/chat/index";
+import MessageResponding from "~/components/Icon/MessageResponding.vue";
 
 const props = defineProps({
   message: {
@@ -40,9 +41,20 @@ const message_background = computed(() => {
         <Icon :name="message_avatar" class="text-lg"/>
       </div>
       <div class="flex flex-col" :class="{'items-end': message_place_end}">
-        <div class="chat-inside-content" :class="message_background">
-          {{ message.content }}
-        </div>
+        <Transition mode="out-in" name="message-content-change">
+          <div
+              class="chat-inside-content relative"
+              :class="message_background"
+              :key="message.content"
+          >
+            <span v-if="message.content">
+              {{ message.content }}
+            </span>
+            <span v-else>
+              <MessageResponding class="text-xl text-neutral-500 dark:text-neutral-300 mx-2"/>
+            </span>
+          </div>
+        </Transition>
         <div class="chat-inside-extra">
           {{ dayjs(message.create_at * 1000).format('YYYY-MM-DD HH:mm:ss') }}
         </div>
@@ -75,4 +87,13 @@ const message_background = computed(() => {
     }
   }
 }
+
+.message-content-change-enter-active,
+.message-content-change-leave-active {
+  @apply transition-all duration-300 overflow-hidden;
+}
+
+.message-content-change-enter-from {
+  @apply opacity-0 translate-y-4;
+}
 </style>