feat: 接入聊天历史界面与外链会话恢复
- 新增管理端与用户端聊天历史接口和页面 - 外链聊天支持访问令牌登录、身份保活与当前会话恢复 - 聊天执行链路切到统一 runtime 与 chatlog 查询接口
This commit is contained in:
@@ -0,0 +1,557 @@
|
||||
<script setup lang="ts">
|
||||
import { ChatThinkingBlock } from '@easyflow/common-ui';
|
||||
import ElXMarkdown from 'vue-element-plus-x/es/XMarkdown/index.js';
|
||||
|
||||
import { IconifyIcon } from '@easyflow/icons';
|
||||
|
||||
import { CircleCheck, Close } from '@element-plus/icons-vue';
|
||||
import {
|
||||
ElButton,
|
||||
ElCollapse,
|
||||
ElCollapseItem,
|
||||
ElEmpty,
|
||||
ElIcon,
|
||||
ElScrollbar,
|
||||
} from 'element-plus';
|
||||
|
||||
import ShowJson from '#/components/json/ShowJson.vue';
|
||||
|
||||
interface ChatHistoryDetailDrawerProps {
|
||||
visible?: boolean;
|
||||
loading?: boolean;
|
||||
session?: any;
|
||||
messages?: any[];
|
||||
hasMore?: boolean;
|
||||
onLoadMore?: (() => void | Promise<void>) | undefined;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<ChatHistoryDetailDrawerProps>(), {
|
||||
visible: false,
|
||||
loading: false,
|
||||
session: undefined,
|
||||
messages: () => [],
|
||||
hasMore: false,
|
||||
onLoadMore: undefined,
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
close: [];
|
||||
}>();
|
||||
|
||||
function formatTime(value?: string) {
|
||||
if (!value) {
|
||||
return '-';
|
||||
}
|
||||
const time = new Date(value);
|
||||
if (Number.isNaN(time.getTime())) {
|
||||
return value;
|
||||
}
|
||||
const year = time.getFullYear();
|
||||
const month = String(time.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(time.getDate()).padStart(2, '0');
|
||||
const hour = String(time.getHours()).padStart(2, '0');
|
||||
const minute = String(time.getMinutes()).padStart(2, '0');
|
||||
return `${year}-${month}-${day} ${hour}:${minute}`;
|
||||
}
|
||||
|
||||
function resolveSenderName(item: any) {
|
||||
if (item?.senderName) {
|
||||
return item.senderName;
|
||||
}
|
||||
return item?.role === 'assistant' ? '聊天助手' : '聊天用户';
|
||||
}
|
||||
|
||||
function isThinkingChain(chain: any) {
|
||||
return !chain?.id;
|
||||
}
|
||||
|
||||
function toolStatusText(status?: string) {
|
||||
return status === 'TOOL_RESULT' ? '调用成功' : '工具调用中';
|
||||
}
|
||||
|
||||
async function handleLoadMore() {
|
||||
await props.onLoadMore?.();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-loading="loading"
|
||||
class="chat-history-detail"
|
||||
:class="{ 'is-visible': visible }"
|
||||
>
|
||||
<div class="chat-history-detail__summary">
|
||||
<div class="chat-history-detail__summary-main">
|
||||
<div class="chat-history-detail__title-row">
|
||||
<h2 class="chat-history-detail__title">
|
||||
{{ session?.title || '未命名会话' }}
|
||||
</h2>
|
||||
<span class="chat-history-detail__assistant-tag">
|
||||
{{ session?.assistantName || '聊天助手' }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="chat-history-detail__meta-row">
|
||||
<span class="chat-history-detail__meta-inline">
|
||||
<span class="chat-history-detail__meta-label">聊天用户</span>
|
||||
<span class="chat-history-detail__meta-value">
|
||||
{{ session?.userAccount || '-' }}
|
||||
</span>
|
||||
</span>
|
||||
<span class="chat-history-detail__meta-divider"></span>
|
||||
<span class="chat-history-detail__meta-inline">
|
||||
<span class="chat-history-detail__meta-label">最近活跃</span>
|
||||
<span class="chat-history-detail__meta-value">
|
||||
{{ formatTime(session?.lastMessageAt || session?.accessAt) }}
|
||||
</span>
|
||||
</span>
|
||||
<span class="chat-history-detail__meta-divider"></span>
|
||||
<span class="chat-history-detail__meta-inline">
|
||||
<span class="chat-history-detail__meta-label">消息数</span>
|
||||
<span class="chat-history-detail__meta-value">
|
||||
{{ session?.messageCount ?? messages.length ?? 0 }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="chat-history-detail__close"
|
||||
aria-label="关闭聊天详情"
|
||||
@click="emit('close')"
|
||||
>
|
||||
<ElIcon size="18">
|
||||
<Close />
|
||||
</ElIcon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="chat-history-detail__stream">
|
||||
<div class="chat-history-detail__stream-toolbar">
|
||||
<ElButton
|
||||
v-if="hasMore"
|
||||
text
|
||||
type="primary"
|
||||
@click="handleLoadMore"
|
||||
>
|
||||
加载更早消息
|
||||
</ElButton>
|
||||
</div>
|
||||
|
||||
<ElScrollbar class="chat-history-detail__scrollbar">
|
||||
<div
|
||||
v-if="messages.length > 0"
|
||||
class="chat-history-detail__message-list"
|
||||
>
|
||||
<article
|
||||
v-for="item in messages"
|
||||
:key="item.key"
|
||||
class="chat-history-detail__message"
|
||||
:class="`is-${item.role}`"
|
||||
>
|
||||
<div
|
||||
class="chat-history-detail__message-meta"
|
||||
:class="`is-${item.role}`"
|
||||
>
|
||||
<span class="chat-history-detail__message-author">
|
||||
{{ resolveSenderName(item) }}
|
||||
</span>
|
||||
<span class="chat-history-detail__message-time">
|
||||
{{ formatTime(item.created) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="chat-history-detail__message-bubble"
|
||||
:class="`is-${item.role}`"
|
||||
>
|
||||
<div
|
||||
v-if="item.chains?.length"
|
||||
class="chat-history-detail__message-chains"
|
||||
>
|
||||
<template
|
||||
v-for="(chain, index) in item.chains"
|
||||
:key="chain.id || index"
|
||||
>
|
||||
<ChatThinkingBlock
|
||||
v-if="isThinkingChain(chain)"
|
||||
v-model:expanded="chain.thinkingExpanded"
|
||||
:content="chain.reasoning_content"
|
||||
readonly
|
||||
:status="chain.thinkingStatus"
|
||||
class="chat-history-detail__thinking"
|
||||
/>
|
||||
|
||||
<ElCollapse v-else class="chat-history-detail__tool-panel">
|
||||
<ElCollapseItem :title="chain.name" :name="chain.id">
|
||||
<template #title>
|
||||
<div class="chat-history-detail__tool-title">
|
||||
<ElIcon size="16">
|
||||
<IconifyIcon icon="svg:wrench" />
|
||||
</ElIcon>
|
||||
<span class="chat-history-detail__tool-name">
|
||||
{{ chain.name }}
|
||||
</span>
|
||||
<div class="chat-history-detail__tool-status">
|
||||
<ElIcon
|
||||
v-if="chain.status === 'TOOL_RESULT'"
|
||||
size="14"
|
||||
color="var(--el-color-success)"
|
||||
>
|
||||
<CircleCheck />
|
||||
</ElIcon>
|
||||
<IconifyIcon
|
||||
v-else
|
||||
icon="mdi:clock-time-five-outline"
|
||||
/>
|
||||
<span>{{ toolStatusText(chain.status) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<ShowJson :value="chain.result" />
|
||||
</ElCollapseItem>
|
||||
</ElCollapse>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="item.content && String(item.content).trim()"
|
||||
class="chat-history-detail__markdown"
|
||||
>
|
||||
<ElXMarkdown :markdown="item.content" />
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<ElEmpty v-else description="暂无聊天消息" />
|
||||
</ElScrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.chat-history-detail {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
flex-direction: column;
|
||||
background:
|
||||
radial-gradient(
|
||||
circle at top right,
|
||||
hsl(var(--nav-ambient) / 0.1),
|
||||
transparent 26%
|
||||
),
|
||||
linear-gradient(
|
||||
180deg,
|
||||
hsl(var(--glass-border) / 0.18) 0%,
|
||||
hsl(var(--glass-tint) / 0.34) 10%,
|
||||
hsl(var(--surface-panel) / 0.88) 28%,
|
||||
hsl(var(--surface-panel) / 0.96) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.chat-history-detail__summary {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 20px 24px 12px;
|
||||
border-bottom: 1px solid hsl(var(--divider-faint) / 0.16);
|
||||
}
|
||||
|
||||
.chat-history-detail__summary-main {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.chat-history-detail__title-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.chat-history-detail__title {
|
||||
margin: 0;
|
||||
min-width: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--text-strong));
|
||||
}
|
||||
|
||||
.chat-history-detail__assistant-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 26px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid hsl(var(--glass-border) / 0.38);
|
||||
border-radius: 999px;
|
||||
background: hsl(var(--glass-tint) / 0.54);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--nav-item-active-foreground));
|
||||
}
|
||||
|
||||
.chat-history-detail__meta-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.chat-history-detail__meta-label {
|
||||
font-size: 11px;
|
||||
color: hsl(var(--text-muted));
|
||||
}
|
||||
|
||||
.chat-history-detail__meta-value {
|
||||
min-width: 0;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--text-strong));
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.chat-history-detail__meta-inline {
|
||||
display: inline-flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.chat-history-detail__meta-divider {
|
||||
display: inline-flex;
|
||||
height: 12px;
|
||||
width: 1px;
|
||||
background: hsl(var(--divider-faint) / 0.42);
|
||||
}
|
||||
|
||||
.chat-history-detail__close {
|
||||
display: inline-flex;
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid hsl(var(--divider-faint) / 0.24);
|
||||
border-radius: 999px;
|
||||
background: hsl(var(--glass-tint) / 0.46);
|
||||
color: hsl(var(--text-muted));
|
||||
transition:
|
||||
transform 0.18s ease,
|
||||
background-color 0.18s ease,
|
||||
color 0.18s ease;
|
||||
}
|
||||
|
||||
.chat-history-detail__close:hover {
|
||||
color: hsl(var(--text-strong));
|
||||
background: hsl(var(--surface-contrast-soft) / 0.92);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.chat-history-detail__stream {
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
padding: 14px 24px 20px;
|
||||
}
|
||||
|
||||
.chat-history-detail__stream-toolbar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.chat-history-detail__scrollbar {
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.chat-history-detail__message-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.chat-history-detail__message {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.chat-history-detail__message.is-user {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.chat-history-detail__message.is-assistant {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.chat-history-detail__message-meta {
|
||||
display: inline-flex;
|
||||
max-width: 88%;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 11px;
|
||||
color: hsl(var(--text-muted));
|
||||
}
|
||||
|
||||
.chat-history-detail__message-meta.is-user {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.chat-history-detail__message-author {
|
||||
font-weight: 600;
|
||||
color: hsl(var(--text-strong));
|
||||
}
|
||||
|
||||
.chat-history-detail__message-bubble {
|
||||
width: min(88%, 760px);
|
||||
border: 1px solid hsl(var(--divider-faint) / 0.34);
|
||||
border-radius: 22px;
|
||||
padding: 14px 16px;
|
||||
font-size: 14px;
|
||||
line-height: 1.72;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.chat-history-detail__message-bubble.is-assistant {
|
||||
background: hsl(var(--glass-tint) / 0.88);
|
||||
box-shadow:
|
||||
inset 0 1px 0 hsl(var(--glass-border) / 0.48),
|
||||
0 12px 26px -24px hsl(var(--foreground) / 0.18);
|
||||
}
|
||||
|
||||
.chat-history-detail__message-bubble.is-user {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
hsl(var(--primary) / 0.14) 0%,
|
||||
hsl(var(--surface-panel) / 0.96) 100%
|
||||
);
|
||||
box-shadow:
|
||||
inset 0 1px 0 hsl(var(--glass-border) / 0.42),
|
||||
0 16px 30px -26px hsl(var(--primary) / 0.24);
|
||||
}
|
||||
|
||||
.chat-history-detail__message-chains {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.chat-history-detail__thinking {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chat-history-detail__tool-panel {
|
||||
overflow: hidden;
|
||||
border: 1px solid hsl(var(--divider-faint) / 0.24);
|
||||
border-radius: 14px;
|
||||
background: hsl(var(--surface-panel) / 0.68);
|
||||
box-shadow: inset 0 1px 0 hsl(var(--glass-border) / 0.18);
|
||||
}
|
||||
|
||||
.chat-history-detail__tool-title {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding-left: 6px;
|
||||
}
|
||||
|
||||
.chat-history-detail__tool-name {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.chat-history-detail__tool-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 999px;
|
||||
background: hsl(var(--surface-contrast-soft) / 0.92);
|
||||
font-size: 12px;
|
||||
color: hsl(var(--text-muted));
|
||||
}
|
||||
|
||||
.chat-history-detail__markdown {
|
||||
min-width: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.72;
|
||||
}
|
||||
|
||||
.chat-history-detail__markdown :deep(.markdown-body) {
|
||||
background: transparent;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.chat-history-detail__markdown :deep(.markdown-body > :first-child) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.chat-history-detail__markdown :deep(.markdown-body > :last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.chat-history-detail__markdown :deep(.markdown-body p) {
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.chat-history-detail__markdown :deep(pre) {
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.chat-history-detail__tool-panel :deep(.el-collapse-item__wrap) {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.chat-history-detail__tool-panel :deep(.el-collapse-item__header) {
|
||||
min-height: 44px;
|
||||
padding-right: 14px;
|
||||
background: transparent;
|
||||
border-bottom-color: hsl(var(--divider-faint) / 0.16);
|
||||
}
|
||||
|
||||
.chat-history-detail__message-bubble :deep(.el-collapse-item__content) {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.chat-history-detail__summary {
|
||||
padding: 18px 18px 12px;
|
||||
}
|
||||
|
||||
.chat-history-detail__stream {
|
||||
padding: 12px 18px 18px;
|
||||
}
|
||||
|
||||
.chat-history-detail__meta-row {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.chat-history-detail__meta-divider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.chat-history-detail__meta-inline {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chat-history-detail__message-bubble,
|
||||
.chat-history-detail__message-meta {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -3,16 +3,18 @@ import type {
|
||||
BubbleListInstance,
|
||||
BubbleListProps,
|
||||
} from 'vue-element-plus-x/types/BubbleList';
|
||||
import type { ThinkingStatus } from 'vue-element-plus-x/types/Thinking';
|
||||
import type { TypewriterInstance } from 'vue-element-plus-x/types/Typewriter';
|
||||
|
||||
import {
|
||||
ChatThinkingBlock,
|
||||
type ChatThinkingBlockStatus,
|
||||
} from '@easyflow/common-ui';
|
||||
import type { BotInfo, ChatMessage } from '@easyflow/types';
|
||||
|
||||
import { nextTick, onBeforeUnmount, onMounted, ref, watch, watchEffect } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import ElBubbleList from 'vue-element-plus-x/es/BubbleList/index.js';
|
||||
import ElSender from 'vue-element-plus-x/es/Sender/index.js';
|
||||
import ElThinking from 'vue-element-plus-x/es/Thinking/index.js';
|
||||
import ElXMarkdown from 'vue-element-plus-x/es/XMarkdown/index.js';
|
||||
|
||||
import { IconifyIcon } from '@easyflow/icons';
|
||||
@@ -49,8 +51,8 @@ import SendingIcon from '../icons/SendingIcon.vue';
|
||||
|
||||
type Think = {
|
||||
reasoning_content?: string;
|
||||
thinkingStatus?: ThinkingStatus;
|
||||
thinlCollapse?: boolean;
|
||||
thinkingStatus?: ChatThinkingBlockStatus;
|
||||
thinkingExpanded?: boolean;
|
||||
};
|
||||
|
||||
type Tool = {
|
||||
@@ -329,7 +331,7 @@ const handleSubmit = async (refreshContent: string) => {
|
||||
if (index === -1) {
|
||||
chains.push({
|
||||
thinkingStatus: 'thinking',
|
||||
thinlCollapse: true,
|
||||
thinkingExpanded: false,
|
||||
reasoning_content: delta,
|
||||
});
|
||||
} else {
|
||||
@@ -525,13 +527,14 @@ onBeforeUnmount(() => {
|
||||
v-for="(chain, index) in item.chains"
|
||||
:key="chain.id || index"
|
||||
>
|
||||
<ElThinking
|
||||
<ChatThinkingBlock
|
||||
v-if="isThink(chain)"
|
||||
v-model="chain.thinlCollapse"
|
||||
v-model:expanded="chain.thinkingExpanded"
|
||||
:content="chain.reasoning_content"
|
||||
:status="chain.thinkingStatus"
|
||||
class="chat-thinking-block-item"
|
||||
/>
|
||||
<ElCollapse v-else class="mb-2">
|
||||
<ElCollapse v-else class="chat-tool-panel">
|
||||
<ElCollapseItem :title="chain.name" :name="chain.id">
|
||||
<template #title>
|
||||
<div class="flex items-center gap-2 pl-5">
|
||||
@@ -569,42 +572,6 @@ onBeforeUnmount(() => {
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- <ElThinking
|
||||
v-if="item.reasoning_content"
|
||||
v-model="item.thinlCollapse"
|
||||
:content="item.reasoning_content"
|
||||
:status="item.thinkingStatus"
|
||||
class="mb-3"
|
||||
/> -->
|
||||
<!-- <ElCollapse v-if="item.tools" class="mb-2">
|
||||
<ElCollapseItem
|
||||
class="mb-2"
|
||||
v-for="tool in item.tools"
|
||||
:key="tool.id"
|
||||
:title="tool.name"
|
||||
:name="tool.id"
|
||||
>
|
||||
<template #title>
|
||||
<div class="flex items-center gap-2 pl-5">
|
||||
<ElIcon size="16">
|
||||
<IconifyIcon icon="svg:wrench" />
|
||||
</ElIcon>
|
||||
<span>{{ tool.name }}</span>
|
||||
<template v-if="tool.status === 'TOOL_CALL'">
|
||||
<ElIcon size="16">
|
||||
<IconifyIcon icon="svg:spinner" />
|
||||
</ElIcon>
|
||||
</template>
|
||||
<template v-else>
|
||||
<ElIcon size="16" color="var(--el-color-success)">
|
||||
<CircleCheck />
|
||||
</ElIcon>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<ShowJson :value="tool.result" />
|
||||
</ElCollapseItem>
|
||||
</ElCollapse> -->
|
||||
</div>
|
||||
</template>
|
||||
<!-- 自定义头像 -->
|
||||
@@ -799,22 +766,38 @@ onBeforeUnmount(() => {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
:deep(.el-thinking) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:deep(.el-thinking .content-wrapper) {
|
||||
--el-thinking-content-wrapper-width: var(--bubble-content-max-width);
|
||||
|
||||
.chat-thinking-block-item {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
:deep(.el-collapse-item) {
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
.chat-tool-panel {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
:deep(.el-collapse-item__content) {
|
||||
:deep(.chat-tool-panel.el-collapse) {
|
||||
border: 1px solid hsl(var(--divider-faint) / 0.26);
|
||||
border-radius: 14px;
|
||||
background: hsl(var(--surface-panel) / 0.7);
|
||||
box-shadow: inset 0 1px 0 hsl(var(--glass-border) / 0.2);
|
||||
}
|
||||
|
||||
:deep(.chat-tool-panel .el-collapse-item) {
|
||||
overflow: hidden;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
:deep(.chat-tool-panel .el-collapse-item__wrap) {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
:deep(.chat-tool-panel .el-collapse-item__header) {
|
||||
min-height: 44px;
|
||||
padding-right: 14px;
|
||||
background: transparent;
|
||||
border-bottom-color: hsl(var(--divider-faint) / 0.16);
|
||||
}
|
||||
|
||||
:deep(.chat-tool-panel .el-collapse-item__content) {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user