admin-ui/src/views/assistant/index.vue

<script setup lang="ts">
import { ref, nextTick, onMounted, computed, onUnmounted, reactive, watch } from 'vue'
import { Local } from '/@/utils/storage'
import { User, ChatDotRound, Delete, Edit, Check, Close } from '@element-plus/icons-vue'
import { MarkdownPlugin } from '/@/components/markdown/type/markdown'
import EChartsPlugin from '/@/components/markdown/plugins/echarts'
import ToolsLoadingPlugin from '/@/components/markdown/plugins/tools-loading'
import Markdown from '/@/components/markdown/Markdown.vue'
import assist from '/@/api/assist'
import { ChatResponse, LmConfigInfo, Message } from '/@/api/assist/type'
import { useLoading } from '/@/utils/loading-util'
import { Setting as EleSetting } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const plugins: Array<MarkdownPlugin<any>> = [EChartsPlugin(), ToolsLoadingPlugin()]

//聊天管理接口
// 消息列表
const messages = ref<Message[]>([])

// 输入框内容
const inputMessage = ref('')
const messagesContainer = ref<HTMLElement>()

// 选中的工具和模型
const selectedTool = ref([])
// 工具选择
const toolOptions = ref([
	{
		value: 'code',
		label: '代码工具',
		children: [
			{
				value: 'codebase-retrieval',
				label: '代码库检索',
			},
			{
				value: 'str-replace-editor',
				label: '代码编辑器',
			},
			{
				value: 'save-file',
				label: '文件保存',
			},
		],
	},
	{
		value: 'web',
		label: '网络工具',
		children: [
			{
				value: 'web-search',
				label: '网络搜索',
			},
			{
				value: 'web-fetch',
				label: '网页获取',
			},
		],
	},
	{
		value: 'system',
		label: '系统工具',
		children: [
			{
				value: 'execute-command',
				label: '命令执行',
			},
			{
				value: 'launch-process',
				label: '进程启动',
			},
		],
	},
])

const prompt = ref<string>('')
const openPromptDialog = ref(false)

// 模型选择
const modelOptions = ref<LmConfigInfo[]>([])

const {loading: loadingModels, doLoading: loadModel} = useLoading(async ()=> {
	const data: {list: LmConfigInfo[],total: number} = await assist.model.getList().catch(() => {
		return {
			list: []
		}
	})

	modelOptions.value = data.list
	selectedModel.value = data.list[0]?.id ?? undefined
})

onMounted(loadModel)

const selectedModel = ref<number | undefined>(undefined)


const chatInstance = ref<(() => void) | undefined>(undefined)
onUnmounted(() => chatInstance.value?.())
// 是否正在对话
const isConversationActive = computed(() => chatInstance.value !== undefined)

const clearMessage = () => {
	stopConversation()
	messages.value = []
}

// 发送消息
const sendMessage = () => {
	if (!inputMessage.value.trim()) return

	messages.value.push({
		id: Date.now(),
		role: 'user',
		content: inputMessage.value,
		timestamp: Date.now(),
	})

	const rtn = reactive<Message>({
		id: Date.now(),
		role: 'assistant',
		content: '',
		timestamp: Date.now(),
	})

	const fn = watch(()=>rtn.content,(newVal)=>console.log(newVal))

	inputMessage.value = ''

	scrollToBottom()
	//
	// let toolcall: { name: string; param?: string; value?: string } | undefined = undefined
	chatInstance.value = assist.chat({
		chatRequest: {
			message: prompt.value ? [
				{
					id: 0,
					role: 'system',
					content: prompt.value,
					timestamp: Date.now(),
				},
				...messages.value,
			]: messages.value,
			modelClassId: selectedModel.value
		},
		onReceive: (resp: ChatResponse) => {
			switch (resp.type) {
				case 'message':
					rtn.content += resp.message
					break
				case 'toolcall':
					rtn.content += `
\`\`\`tools-loading
request
${resp.request.name}
${resp.request.data.replace('\n', '')}
\`\`\`

`
					break
				case 'toolres':
					rtn.content += `
\`\`\`tools-loading
resp
${resp.response.name}
${resp.response.data.replace('\n', '')}
\`\`\`

`
					break

				case 'error':
					rtn.content += `
> ### 系统报错
> ${resp.error}

`
					break
			}
		},
		onComplete: (e) => {
			fn()
			if (e !== undefined) {
				rtn.content += `

				`
			}
			rtn.content += '\n'
			chatInstance.value = undefined
		},
	})
	messages.value.push(rtn)
}

// 终止对话
const stopConversation = () => {
	chatInstance.value?.()
	chatInstance.value = undefined
}

// 滚动到底部
const scrollToBottom = () => {
	nextTick(() => {
		if (messagesContainer.value) {
			messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
		}
	})
}

// 会话管理模块
// 所有会话
const conversations = ref<{ id: number; title: string }[]>([])
// 当前活跃会话
const activeConversationId = ref<number | undefined>(undefined)

// 选择会话
const selectConversation = (id: number) => {
	activeConversationId.value = id
}

// 删除会话
const deleteConversation = (id: number) => {
	// TODO: 实现删除对话逻辑
}

// 编辑会话状态管理
const editingConversationId = ref<number | undefined>(undefined)
const editingTitle = ref('')
// 编辑会话摘要
const editSummary = (id: number) => {
	const conversation = conversations.value.find((conv) => conv.id === id)
	if (conversation) {
		// 设置当前编辑的会话ID
		editingConversationId.value = id
		editingTitle.value = conversation.title
		// 下一帧聚焦到输入框
		nextTick(() => {
			const editInput = document.querySelector('.edit-input .el-input__inner') as HTMLInputElement
			if (editInput) {
				editInput.focus()
				editInput.select()
			}
		})
	}
}
// 确认编辑
const confirmEdit = (id: number) => {
	const conversation = conversations.value.find((conv) => conv.id === id)
	if (conversation && editingTitle.value.trim()) {
		conversation.title = editingTitle.value.trim()
		// 清除编辑状态
		editingConversationId.value = undefined
		editingTitle.value = ''
	}
}

// 取消编辑
const cancelEdit = () => {
	// 清除编辑状态
	editingConversationId.value = undefined
	editingTitle.value = ''
}

onMounted(() => {
	scrollToBottom()
})

//杂项
const getUserInfos = ref<{
	avatar: string
	userName: string
}>(Local.get('userInfo') || {})

const router = useRouter()
const redirectToModelManager = () => router.push('manage/model')
</script>

<template>
	<el-container class="chat-container">
		<!-- 左侧会话列表 -->
		<el-aside width="300px" class="chat-sidebar">
			<div class="sidebar-header">
				<h3>对话历史</h3>
				<el-button round :icon="EleSetting" size="small" @click="redirectToModelManager"></el-button>
			</div>
			<el-scrollbar class="conversation-list">
				<div
					v-for="conv in conversations"
					:key="conv.id"
					@click="editingConversationId !== conv.id ? selectConversation(conv.id) : () => {}"
					:class="['conversation-item', { active: activeConversationId === conv.id, editing: editingConversationId === conv.id }]"
				>
					<!-- 非编辑状态 -->
					<div v-if="editingConversationId !== conv.id" class="conversation-content">
						<span class="conversation-title">{{ conv.title }}</span>
					</div>

					<!-- 编辑状态 -->
					<div v-else class="conversation-edit-content">
						<el-input v-model="editingTitle" size="small" @keydown.enter="confirmEdit(conv.id)" @keydown.esc="cancelEdit" class="edit-input" />
					</div>

					<!-- 操作按钮 -->
					<div class="conversation-actions">
						<!-- 非编辑状态的按钮 -->
						<template v-if="editingConversationId !== conv.id">
							<el-button
								type="primary"
								size="small"
								:icon="Edit"
								@click.stop="editSummary(conv.id)"
								class="action-btn edit-btn"
								title="编辑摘要"
								plain
								circle
							/>
							<el-button
								type="danger"
								size="small"
								:icon="Delete"
								@click.stop="deleteConversation(conv.id)"
								class="action-btn delete-btn"
								title="删除对话"
								plain
								circle
							/>
						</template>

						<!-- 编辑状态的按钮 -->
						<template v-else>
							<el-button type="success" size="small" @click.stop="confirmEdit(conv.id)" class="action-btn confirm-btn" title="确认修改" plain circle>
								<el-icon>
									<Check />
								</el-icon>
							</el-button>
							<el-button type="info" size="small" @click.stop="cancelEdit(conv.id)" class="action-btn cancel-btn" title="取消编辑" plain circle>
								<el-icon>
									<Close />
								</el-icon>
							</el-button>
						</template>
					</div>
				</div>
			</el-scrollbar>
			<el-button type="primary" size="large" class="create-conversation-btn">创建对话</el-button>
		</el-aside>

		<!-- 右侧聊天区域 -->
		<el-main class="chat-main">
			<!-- 消息展示区域 -->
			<div class="messages-container" ref="messagesContainer">
				<div v-if="messages.length !== 0">
					<div v-for="message in messages" :key="message.id" :class="['message-wrapper', message.role]">
						<!-- AI消息 -->
						<div v-if="message.role === 'assistant'" class="ai-message-container">
							<el-avatar class="message-avatar" :icon="ChatDotRound" />
							<div class="message-bubble ai-bubble">
								<Markdown v-if="message.content !== ''" :content="message.content" :plugins="plugins" class="markdown-content" />
								<div v-else class="loading-container">
									<div class="loading-dots">
										<span class="dot"></span>
										<span class="dot"></span>
										<span class="dot"></span>
									</div>
									<span class="loading-text">AI正在思考中...</span>
								</div>
							</div>
						</div>

						<!-- 用户消息 -->
						<div v-if="message.role === 'user'" class="user-message-container">
							<div class="message-bubble user-bubble">
								{{ message.content }}
							</div>
							<el-avatar class="message-avatar" :src="getUserInfos.avatar" :icon="User" />
						</div>
					</div>
				</div>

				<!-- 空状态页面 -->

				<div v-else class="empty-content">
					<!-- 主图标 -->
					<div class="empty-icon">
						<el-icon :size="80" color="#d1d5db">
							<ChatDotRound />
						</el-icon>
					</div>

					<!-- 标题和描述 -->
					<div class="empty-text">
						<h2 class="empty-title">开始新的对话</h2>
						<p class="empty-description">选择工具和模型，然后在下方输入您的问题开始对话</p>
					</div>

					<!-- 快速开始提示 -->
					<div class="quick-start">
						<div class="quick-start-item">
							<span class="step-number">1</span>
							<span class="step-text">选择需要的工具</span>
						</div>
						<div class="quick-start-item">
							<span class="step-number">2</span>
							<span class="step-text">选择AI模型</span>
						</div>
						<div class="quick-start-item">
							<span class="step-number">3</span>
							<span class="step-text">输入问题并发送</span>
						</div>
					</div>

					<!-- 示例问题 -->
					<div class="example-questions">
						<h4>试试这些问题：</h4>
						<div class="question-tags">
							<el-tag class="question-tag" @click="inputMessage = '帮我查看设备运行状态和告警信息'" type="info">
								帮我查看设备运行状态和告警信息
							</el-tag>
							<el-tag class="question-tag" @click="inputMessage = '分析用户权限配置和角色分配情况'" type="success">
								分析用户权限配置和角色分配情况
							</el-tag>
							<el-tag class="question-tag" @click="inputMessage = '检查系统性能和在线用户统计'" type="warning"> 检查系统性能和在线用户统计 </el-tag>
						</div>
					</div>
				</div>

				<div class="messages-spacer"></div>
			</div>

			<div class="input-container">
				<!-- 工具和模型选择行 -->
				<div class="selection-row">
					<!-- 工具选择 -->
					<div class="tool-selector">
						<el-cascader
							v-model="selectedTool"
							:options="toolOptions"
							:show-all-levels="false"
							:props="{ multiple: true }"
							collapse-tags
							collapse-tags-tooltip
							clearable
							size="small"
							style="width: 200px"
						/>
					</div>

					<!-- 模型选择 -->
					<div class="model-selector" v-loading="loadingModels">
						<el-select v-model="selectedModel" placeholder="选择模型" size="small" style="width: 200px">
							<el-option v-for="item in modelOptions" :key="item.id" :value="item.id" :label="item.modelName"/>
						</el-select>
					</div>

					<!-- 提示词输入框 -->
					<div class="prompt-selector">
						<el-input
							v-model="prompt"
							placeholder="点击设置提示词..."
							size="small"
							style="width: 200px"
							readonly
							@click="openPromptDialog = true"
						/>
					</div>
				</div>

				<!-- 输入框和按钮行 -->
				<div class="input-row">
					<!-- 输入框 -->
					<div class="message-input-wrapper">
						<el-input
							v-model="inputMessage"
							type="textarea"
							placeholder="请输入您的问题..."
							:rows="2"
							resize="none"
							@keydown.enter.ctrl="sendMessage"
							@keydown.enter.meta="sendMessage"
							:disabled="isConversationActive"
						/>
					</div>

					<!-- 按钮组 -->
					<div class="button-group">
						<el-button
							type="warning"
							size="small"
							@click="clearMessage"
							style="margin-left: 12px"
						>
							清空
						</el-button>
						<el-button
							v-if="!isConversationActive"
							type="primary"
							size="small"
							@click="sendMessage"
							@keyup.ctrl.enter="sendMessage"
							:disabled="!inputMessage.trim() && loadingModels"
						>
							发送
						</el-button>
						<el-button v-else type="danger" size="small" @click="stopConversation"> 终止</el-button>
					</div>
				</div>
			</div>
		</el-main>

		<!-- 提示词设置对话框 -->
		<el-dialog
			v-model="openPromptDialog"
			title="设置提示词"
			width="600px"
			:before-close="() => { openPromptDialog = false }"
		>
			<el-input
				v-model="prompt"
				type="textarea"
				placeholder="请输入提示词..."
				:rows="8"
				resize="none"
			/>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="openPromptDialog = false">取消</el-button>
					<el-button type="primary" @click="openPromptDialog = false">确定</el-button>
				</div>
			</template>
		</el-dialog>
	</el-container>


</template>

<style scoped lang="scss">
:deep(.el-icon) {
	margin-right: 0 !important;
}

.chat-container {
	height: 100%;
	background: var(--el-bg-color-page);
}

.create-conversation-btn {
	margin: 16px;
}

/* 左侧边栏样式 */
.chat-sidebar {
	background: var(--el-bg-color);
	border-right: 1px solid var(--el-border-color-light);
	display: flex;
	flex-direction: column;
}

.sidebar-header {
	padding: 20px;
	border-bottom: 1px solid var(--el-border-color-light);
	display: flex;
	justify-content: space-between;

	h3 {
		margin: 0;
		color: var(--el-text-color-primary);
		font-size: 16px;
		font-weight: 600;
	}
}

.conversation-list {
	flex: 1;
	padding: 10px;
}

.conversation-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	margin-bottom: 8px;
	border-radius: 8px;
	transition: all 0.2s;
	color: var(--el-text-color-regular);
	border: 1px solid transparent;
	position: relative;
	cursor: pointer;

	&:hover {
		background: var(--el-fill-color-light);
		color: var(--el-text-color-primary);

		.conversation-actions {
			opacity: 1;
		}
	}

	&.active {
		background: var(--el-color-primary-light-9);
		color: var(--el-color-primary);
		border-color: var(--el-color-primary-light-7);

		.conversation-actions {
			opacity: 1;
		}
	}

	&.editing {
		background: var(--el-color-warning-light-9);
		border-color: var(--el-color-warning-light-7);

		.conversation-actions {
			opacity: 1;
		}
	}
}

.conversation-content {
	flex: 1;
	min-width: 0;
	cursor: pointer;
}

.conversation-edit-content {
	flex: 1;
	min-width: 0;
}

.edit-input {
	width: 100%;

	:deep(.el-input__inner) {
		font-size: 14px;
		padding: 4px 8px;
		height: 28px;
		line-height: 20px;
	}
}

.conversation-title {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.conversation-actions {
	display: flex;
	align-items: center;
	gap: 4px;
	opacity: 0;
	transition: opacity 0.2s;
	flex-shrink: 0;
}

.action-btn {
	width: 28px !important;
	height: 28px !important;
	padding: 0 !important;
	margin: 0 2px;
}

/* 右侧聊天区域样式 */
.chat-main {
	display: flex;
	flex-direction: column;
	padding: 0;
	background: var(--el-bg-color-page);

	position: relative;
}

.messages-container {
	flex: 1;
	padding: 20px;
	overflow-y: auto;
}

.messages-spacer {
	height: 160px;
}

.message-wrapper {
	margin-bottom: 20px;

	&:last-child {
		margin-bottom: 0;
	}
}

/* AI消息样式 */
.ai-message-container {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.ai-bubble {
	background: var(--el-fill-color-light);
	color: var(--el-text-color-primary);
	position: relative;
	min-width: 70%;
	max-width: 90%;
	border: 1px solid var(--el-border-color-lighter);

	&::before {
		content: '';
		position: absolute;
		left: -8px;
		top: 12px;
		width: 0;
		height: 0;
		border-right: 8px solid var(--el-fill-color-light);
		border-top: 8px solid transparent;
		border-bottom: 8px solid transparent;
	}
}

/* 用户消息样式 */
.user-message-container {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	justify-content: flex-end;
}

.user-bubble {
	background: var(--el-color-primary);
	color: white;
	position: relative;
	max-width: 70%;

	&::after {
		content: '';
		position: absolute;
		right: -8px;
		top: 12px;
		width: 0;
		height: 0;
		border-left: 8px solid var(--el-color-primary);
		border-top: 8px solid transparent;
		border-bottom: 8px solid transparent;
	}
}

/* 消息气泡通用样式 */
.message-bubble {
	padding: 12px 16px;
	border-radius: 12px;
	line-height: 1.5;
	word-wrap: break-word;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.message-avatar {
	flex-shrink: 0;
	margin-top: 2px;
}

/* 加载动画样式 */
.loading-container {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 0;
	color: var(--el-text-color-secondary);
}

.loading-dots {
	display: flex;
	gap: 4px;
}

.dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--el-color-primary);
	animation: loading-bounce 1.4s ease-in-out infinite both;
}

.dot:nth-child(1) {
	animation-delay: -0.32s;
}

.dot:nth-child(2) {
	animation-delay: -0.16s;
}

.dot:nth-child(3) {
	animation-delay: 0s;
}

@keyframes loading-bounce {
	0%, 80%, 100% {
		transform: scale(0.8);
		opacity: 0.5;
	}
	40% {
		transform: scale(1);
		opacity: 1;
	}
}

.loading-text {
	font-size: 14px;
	font-weight: 500;
}

.tools-button {
	margin-bottom: 10px;
	color: var(--el-text-color-regular);
}

.message-input {
	margin-bottom: 12px;

	:deep(.el-textarea__inner) {
		border-radius: 8px;
		resize: none;
	}
}

.input-actions {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
}

/* Markdown 内容样式优化 - 接入Element Plus颜色系统 */
:deep(.markdown-content) {
	/* 标题样式 */
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin-top: 24px;
		margin-bottom: 16px;
		font-weight: 600;
		line-height: 1.25;
		color: var(--el-text-color-primary);
	}

	h1 {
		font-size: 2em;
		border-bottom: 1px solid var(--el-border-color-light);
		padding-bottom: 8px;
	}

	h2 {
		font-size: 1.5em;
		border-bottom: 1px solid var(--el-border-color-lighter);
		padding-bottom: 6px;
	}

	h3 {
		font-size: 1.25em;
	}

	/* 段落样式 */
	p {
		margin-bottom: 16px;
		line-height: 1.6;
		color: var(--el-text-color-regular);
	}

	/* 代码块样式 */
	pre {
		background-color: var(--el-fill-color-light);
		border: 1px solid var(--el-border-color-light);
		border-radius: 6px;
		padding: 16px;
		overflow: auto;
		margin: 16px 0;
		color: var(--el-text-color-primary);
	}

	/* 行内代码样式 */
	code {
		background-color: var(--el-fill-color-light);
		color: var(--el-color-danger);
		padding: 2px 4px;
		border-radius: 3px;
		font-size: 85%;
		border: 1px solid var(--el-border-color-lighter);
	}

	/* 引用块样式 */
	blockquote {
		border-left: 4px solid var(--el-color-primary);
		padding-left: 16px;
		margin: 16px 0;
		color: var(--el-text-color-secondary);
		background-color: var(--el-fill-color-extra-light);
		padding: 12px 16px;
		border-radius: 4px;
	}

	/* 列表样式 */
	ul,
	ol {
		margin: 16px 0;
		padding-left: 32px;
		color: var(--el-text-color-regular);
	}

	li {
		margin: 4px 0;
		line-height: 1.6;
	}

	/* 表格样式 */
	table {
		border-collapse: collapse;
		margin: 16px 0;
		width: 100%;
		border: 1px solid var(--el-border-color-light);
	}

	th,
	td {
		border: 1px solid var(--el-border-color-light);
		padding: 8px 12px;
		text-align: left;
	}

	th {
		background-color: var(--el-fill-color-light);
		font-weight: 600;
		color: var(--el-text-color-primary);
	}

	td {
		color: var(--el-text-color-regular);
	}

	/* 分割线样式 */
	hr {
		border: none;
		border-top: 1px solid var(--el-border-color-light);
		margin: 24px 0;
	}

	/* 链接样式 */
	a {
		color: var(--el-color-primary);
		text-decoration: none;

		&:hover {
			color: var(--el-color-primary-light-3);
			text-decoration: underline;
		}
	}

	/* 强调文本样式 */
	strong {
		font-weight: 600;
		color: var(--el-text-color-primary);
	}

	em {
		font-style: italic;
		color: var(--el-text-color-regular);
	}
}

.input-container {
	position: absolute;
	width: 90%;
	left: 50%;
	bottom: 25px;
	transform: translate(-50%, 0);
	background: var(--el-bg-color);
	border: 1px solid var(--el-border-color-light);
	border-radius: 12px;
	padding: 16px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.selection-row {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.tool-selector,
.model-selector,
.prompt-selector {
	flex-shrink: 0;
}

.input-row {
	display: flex;
	align-items: flex-end;
	gap: 12px;
}

.message-input-wrapper {
	flex: 1;
	min-width: 0;
}

.message-input-wrapper :deep(.el-textarea__inner) {
	border-radius: 8px;
	resize: none;
	font-size: 14px;
	line-height: 1.4;
}

.button-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex-shrink: 0;
}

.button-group .el-button {
	min-width: 60px;
}

/* 提示词输入框样式 */
.prompt-selector .el-input {
	cursor: pointer;
}

.prompt-selector .el-input__inner {
	cursor: pointer;
}

/* 对话框样式 */
.dialog-footer {
	text-align: right;
}

/* 响应式调整 */
/* 空状态页面样式 */
.empty-content {
	text-align: center;
	max-width: 600px;
	width: 100%;

	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.empty-icon {
	margin-bottom: 24px;
	opacity: 0.6;
}

.empty-text {
	margin-bottom: 40px;
}

.empty-title {
	font-size: 28px;
	font-weight: 600;
	color: var(--el-text-color-primary);
	margin: 0 0 12px 0;
}

.empty-description {
	font-size: 16px;
	color: var(--el-text-color-regular);
	margin: 0;
	line-height: 1.5;
}

.quick-start {
	display: flex;
	justify-content: center;
	gap: 40px;
	margin-bottom: 40px;
	flex-wrap: wrap;
}

.quick-start-item {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--el-text-color-regular);
}

.step-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	background: var(--el-color-primary);
	color: white;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 600;
	flex-shrink: 0;
}

.step-text {
	font-size: 14px;
	font-weight: 500;
}

.example-questions {
	h4 {
		font-size: 16px;
		font-weight: 600;
		color: var(--el-text-color-primary);
		margin: 0 0 16px 0;
	}
}

.question-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

.question-tag {
	cursor: pointer;
	transition: all 0.2s ease;
	font-size: 13px;
	padding: 8px 16px;
	border-radius: 20px;

	&:hover {
		transform: translateY(-1px);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	}
}
</style>