hubian
386fa20c84
- 使用 marked.js 渲染 Markdown 格式 - AI消息添加重新生成按钮（刷新图标） - 用户和AI消息都可删除 - 删除AI消息时同时删除对应的用户消息 - 删除用户消息时同时删除对应的AI回复 - 消息操作按钮hover时显示 - 优化Markdown样式（标题、列表、代码块、表格等）
61 lines
2.1 KiB
HTML
61 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||
<meta name="theme-color" content="#667eea">
|
||
<title>AI助手</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
<link rel="manifest" href="manifest.json">
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
<!-- 头部 -->
|
||
<header class="header">
|
||
<div class="header-title">
|
||
<span class="logo">🤖</span>
|
||
<h1>AI助手</h1>
|
||
</div>
|
||
<button class="clear-btn" onclick="clearChat()" title="清空对话">
|
||
<svg viewBox="0 0 24 24" width="20" height="20">
|
||
<path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
|
||
</svg>
|
||
</button>
|
||
</header>
|
||
|
||
<!-- 消息区域 -->
|
||
<div class="messages-container" id="messagesContainer">
|
||
<div class="welcome" id="welcome">
|
||
<div class="welcome-icon">👋</div>
|
||
<h2>你好！我是AI助手</h2>
|
||
<p>有什么可以帮助你的吗？</p>
|
||
<div class="quick-actions">
|
||
<button onclick="sendQuickMessage('介绍一下你自己')">介绍一下你自己</button>
|
||
<button onclick="sendQuickMessage('帮我写一段代码')">帮我写代码</button>
|
||
<button onclick="sendQuickMessage('解释一个概念')">解释概念</button>
|
||
</div>
|
||
</div>
|
||
<div class="messages" id="messages"></div>
|
||
</div>
|
||
|
||
<!-- 输入区域 -->
|
||
<div class="input-area">
|
||
<textarea
|
||
id="userInput"
|
||
placeholder="输入消息..."
|
||
rows="1"
|
||
onkeydown="handleKeyDown(event)"
|
||
oninput="autoResize(this)"
|
||
></textarea>
|
||
<button class="send-btn" onclick="sendMessage()" id="sendBtn">
|
||
<svg viewBox="0 0 24 24" width="24" height="24">
|
||
<path fill="currentColor" d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="marked.min.js"></script>
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html> |