陈子默
615092f4f7
- 接入发布快照优先与未发布草稿受控运行 - 支持文本和思考流式输出、循环多输出及实时运行详情 - 完成聊天分享、图片输入、中止与清空重来 - 补充后端与前端定向回归测试
97 lines
2.0 KiB
Vue
97 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import type {ChatTimelineStatusItem} from './types';
|
|
|
|
import {computed} from 'vue';
|
|
|
|
import {BookOpenText} from '@easyflow/icons';
|
|
|
|
import {ChatEventLabel} from '../chat-status';
|
|
|
|
defineOptions({
|
|
name: 'ChatTimelineStatusRow',
|
|
});
|
|
|
|
const props = defineProps<{
|
|
item: ChatTimelineStatusItem;
|
|
}>();
|
|
|
|
const isRunning = computed(() => props.item.status === 'running');
|
|
const isSeparator = computed(() => props.item.presentation === 'separator');
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="chat-timeline-status-row"
|
|
:class="[
|
|
`is-${item.status}`,
|
|
`is-${item.tone || 'muted'}`,
|
|
{ 'is-separator': isSeparator },
|
|
]"
|
|
>
|
|
<span
|
|
v-if="isSeparator"
|
|
class="chat-timeline-status-row__line"
|
|
aria-hidden="true"
|
|
/>
|
|
<ChatEventLabel
|
|
class="chat-timeline-status-row__content"
|
|
:active="isRunning"
|
|
:text="item.label"
|
|
>
|
|
<template #icon>
|
|
<BookOpenText
|
|
v-if="item.icon !== 'none'"
|
|
class="chat-timeline-status-row__icon"
|
|
aria-hidden="true"
|
|
/>
|
|
</template>
|
|
</ChatEventLabel>
|
|
<span
|
|
v-if="isSeparator"
|
|
class="chat-timeline-status-row__line"
|
|
aria-hidden="true"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.chat-timeline-status-row {
|
|
display: inline-flex;
|
|
gap: 4px;
|
|
align-items: center;
|
|
max-width: min(78%, 680px);
|
|
min-width: 0;
|
|
padding: 2px 0;
|
|
color: var(--el-text-color-placeholder);
|
|
}
|
|
|
|
.chat-timeline-status-row__content {
|
|
min-width: 0;
|
|
}
|
|
|
|
.chat-timeline-status-row__icon {
|
|
width: 14px;
|
|
height: 14px;
|
|
color: var(--el-text-color-placeholder);
|
|
}
|
|
|
|
.chat-timeline-status-row.is-done {
|
|
opacity: 0.84;
|
|
}
|
|
|
|
.chat-timeline-status-row.is-separator {
|
|
display: flex;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
gap: 8px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.chat-timeline-status-row.is-separator .chat-timeline-status-row__line {
|
|
flex: 1 1 auto;
|
|
min-width: 24px;
|
|
height: 1px;
|
|
background: var(--el-border-color-lighter);
|
|
}
|
|
</style>
|