chore(stage-tamagotchi): improved ui of chat history & chat input
This commit is contained in:
@@ -62,13 +62,13 @@ watch(sending, () => {
|
||||
<div v-for="(message, index) in messages" :key="index" mb-2>
|
||||
<div v-if="message.role === 'error'" flex mr="12">
|
||||
<div
|
||||
flex="~ col" shadow="md violet-900/50 dark:none"
|
||||
flex="~ col" shadow="sm violet-200/50 dark:none"
|
||||
min-w-20 rounded-xl px-3 py-3 h="unset <sm:fit"
|
||||
class="bg-violet-50/80 <md:bg-violet-500/25 dark:bg-violet-900/80"
|
||||
class="bg-violet-100/80 dark:bg-violet-950/80"
|
||||
>
|
||||
<div flex="~ row" gap-2>
|
||||
<div flex-1>
|
||||
<span text-sm text="black/60 dark:white/65" font-normal class="inline <sm:hidden">{{ t('stage.chat.message.character-name.core-system') }}</span>
|
||||
<div flex-1 class="inline <sm:hidden">
|
||||
<span text-sm text="black/60 dark:white/65" font-normal>{{ t('stage.chat.message.character-name.core-system') }}</span>
|
||||
</div>
|
||||
<div i-solar:danger-triangle-bold-duotone text-violet-500 />
|
||||
</div>
|
||||
@@ -76,7 +76,7 @@ watch(sending, () => {
|
||||
<MarkdownRenderer
|
||||
v-else
|
||||
:content="message.content as string"
|
||||
class="break-words text-violet-500"
|
||||
class="break-words text-violet-500 dark:text-violet-300"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -89,7 +89,7 @@ watch(sending, () => {
|
||||
<div>
|
||||
<span text-sm text="black/60 dark:white/65" font-normal class="inline <sm:hidden">{{ t('stage.chat.message.character-name.airi') }}</span>
|
||||
</div>
|
||||
<div v-if="message.content" class="break-words" text="primary-700 dark:primary-200">
|
||||
<div v-if="message.content" class="break-words" text="primary-700 dark:primary-100">
|
||||
<div v-for="(slice, sliceIndex) in message.slices" :key="sliceIndex">
|
||||
<div v-if="slice.type === 'tool-call'" mb-2>
|
||||
<Collapsable
|
||||
@@ -134,7 +134,7 @@ watch(sending, () => {
|
||||
<div
|
||||
flex="~ col" shadow="sm neutral-200/50 dark:none" px="2" h="unset <sm:fit"
|
||||
min-w-20 rounded-xl px-3 py-3
|
||||
class="bg-neutral-100/80 dark:bg-neutral-950/80"
|
||||
class="bg-neutral-100/80 dark:bg-neutral-800/80"
|
||||
>
|
||||
<div>
|
||||
<span text-sm text="black/60 dark:white/65" font-normal class="inline <sm:hidden">{{ t('stage.chat.message.character-name.you') }}</span>
|
||||
@@ -157,7 +157,7 @@ watch(sending, () => {
|
||||
<div>
|
||||
<span text-sm text="black/60 dark:white/65" font-normal class="inline <sm:hidden">{{ t('stage.chat.message.character-name.airi') }}</span>
|
||||
</div>
|
||||
<div v-if="presentSlices.length > 0 || streamingMessage.content" class="break-words" text="primary-700 dark:primary-200">
|
||||
<div v-if="presentSlices.length > 0 || streamingMessage.content" class="break-words" text="primary-700 dark:primary-100">
|
||||
<!-- Prefer presentation slices if available; fallback to normal streaming -->
|
||||
<template v-if="presentSlices.length > 0">
|
||||
<div v-for="(text, idx) in presentSlices" :key="`present-${idx}`">
|
||||
|
||||
@@ -165,7 +165,7 @@ onAfterMessageComposed(async () => {
|
||||
hover:text="red-500 dark:red-400"
|
||||
flex items-center justify-center rounded-md p-2 outline-none
|
||||
transition-colors transition-transform active:scale-95
|
||||
@click="cleanupMessages"
|
||||
@click="() => cleanupMessages()"
|
||||
>
|
||||
<div class="i-solar:trash-bin-2-bold-duotone" />
|
||||
</button>
|
||||
@@ -173,7 +173,7 @@ onAfterMessageComposed(async () => {
|
||||
<BasicTextarea
|
||||
v-model="messageInput"
|
||||
:placeholder="t('stage.message')"
|
||||
text="primary-600 placeholder:primary-600"
|
||||
text="primary-600 dark:primary-100 placeholder:primary-500"
|
||||
border="solid 2 primary-200/20 dark:primary-400/20"
|
||||
bg="primary-100/50 dark:primary-900/70"
|
||||
max-h="[10lh]" min-h="[1lh]"
|
||||
|
||||
Reference in New Issue
Block a user