XuanShengHua/xsh-assistant-next
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Chat UI done

Browse Source
This commit is contained in:
Timothy Yin
2024-03-29 18:11:55 +08:00
parent 1ee6ada6af
commit d20b518f5b
5 changed files with 202 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
components/Icon/MessageResponding.vue Normal file
View File

@@ -0,0 +1,52 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<circle cx="4" cy="12" r="0" fill="currentColor">
<animate fill="freeze" attributeName="r" begin="0;svgSpinners3DotsMove1.end" calcMode="spline" dur="0.5s"
keySplines=".36,.6,.31,1" values="0;3"></animate>
<animate fill="freeze" attributeName="cx" begin="svgSpinners3DotsMove7.end" calcMode="spline" dur="0.5s"
keySplines=".36,.6,.31,1" values="4;12"></animate>
<animate fill="freeze" attributeName="cx" begin="svgSpinners3DotsMove5.end" calcMode="spline" dur="0.5s"
keySplines=".36,.6,.31,1" values="12;20"></animate>
<animate id="svgSpinners3DotsMove0" fill="freeze" attributeName="r" begin="svgSpinners3DotsMove3.end"
calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="3;0"></animate>
<animate id="svgSpinners3DotsMove1" fill="freeze" attributeName="cx" begin="svgSpinners3DotsMove0.end"
dur="0.001s" values="20;4"></animate>
</circle>
<circle cx="4" cy="12" r="3" fill="currentColor">
<animate fill="freeze" attributeName="cx" begin="0;svgSpinners3DotsMove1.end" calcMode="spline" dur="0.5s"
keySplines=".36,.6,.31,1" values="4;12"></animate>
<animate fill="freeze" attributeName="cx" begin="svgSpinners3DotsMove7.end" calcMode="spline" dur="0.5s"
keySplines=".36,.6,.31,1" values="12;20"></animate>
<animate id="svgSpinners3DotsMove2" fill="freeze" attributeName="r" begin="svgSpinners3DotsMove5.end"
calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="3;0"></animate>
<animate id="svgSpinners3DotsMove3" fill="freeze" attributeName="cx" begin="svgSpinners3DotsMove2.end"
dur="0.001s" values="20;4"></animate>
<animate fill="freeze" attributeName="r" begin="svgSpinners3DotsMove3.end" calcMode="spline" dur="0.5s"
keySplines=".36,.6,.31,1" values="0;3"></animate>
</circle>
<circle cx="12" cy="12" r="3" fill="currentColor">
<animate fill="freeze" attributeName="cx" begin="0;svgSpinners3DotsMove1.end" calcMode="spline" dur="0.5s"
keySplines=".36,.6,.31,1" values="12;20"></animate>
<animate id="svgSpinners3DotsMove4" fill="freeze" attributeName="r" begin="svgSpinners3DotsMove7.end"
calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="3;0"></animate>
<animate id="svgSpinners3DotsMove5" fill="freeze" attributeName="cx" begin="svgSpinners3DotsMove4.end"
dur="0.001s" values="20;4"></animate>
<animate fill="freeze" attributeName="r" begin="svgSpinners3DotsMove5.end" calcMode="spline" dur="0.5s"
keySplines=".36,.6,.31,1" values="0;3"></animate>
<animate fill="freeze" attributeName="cx" begin="svgSpinners3DotsMove3.end" calcMode="spline" dur="0.5s"
keySplines=".36,.6,.31,1" values="4;12"></animate>
</circle>
<circle cx="20" cy="12" r="3" fill="currentColor">
<animate id="svgSpinners3DotsMove6" fill="freeze" attributeName="r" begin="0;svgSpinners3DotsMove1.end"
calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="3;0"></animate>
<animate id="svgSpinners3DotsMove7" fill="freeze" attributeName="cx" begin="svgSpinners3DotsMove6.end"
dur="0.001s" values="20;4"></animate>
<animate fill="freeze" attributeName="r" begin="svgSpinners3DotsMove7.end" calcMode="spline" dur="0.5s"
keySplines=".36,.6,.31,1" values="0;3"></animate>
<animate fill="freeze" attributeName="cx" begin="svgSpinners3DotsMove5.end" calcMode="spline" dur="0.5s"
keySplines=".36,.6,.31,1" values="4;12"></animate>
<animate fill="freeze" attributeName="cx" begin="svgSpinners3DotsMove3.end" calcMode="spline" dur="0.5s"
keySplines=".36,.6,.31,1" values="12;20"></animate>
</circle>
</svg>
</template>

27
components/aigc/chat/Message.vue
View File

@@ -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>