feat:输入框居中展示
- 点击历史记录和发起对话之后回到底部
This commit is contained in:
@ -36,7 +36,7 @@ export function getInputAreaContent(
|
|||||||
maxIcon: string = ''
|
maxIcon: string = ''
|
||||||
): string {
|
): string {
|
||||||
return `
|
return `
|
||||||
<div class="input-area">
|
<div class="input-area centered" id="inputArea">
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
<div class="input-wrapper">
|
<div class="input-wrapper">
|
||||||
<!-- 顶部工具栏 -->
|
<!-- 顶部工具栏 -->
|
||||||
@ -82,6 +82,23 @@ export function getInputAreaStyles(): string {
|
|||||||
border-top: 1px solid var(--vscode-panel-border);
|
border-top: 1px solid var(--vscode-panel-border);
|
||||||
padding-top: 15px;
|
padding-top: 15px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
/* 居中模式:未发起对话时 */
|
||||||
|
.input-area.centered {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: calc(100% - 40px);
|
||||||
|
max-width: 800px;
|
||||||
|
border-top: none;
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
/* 底部模式:发起对话后 */
|
||||||
|
.input-area.bottom {
|
||||||
|
position: relative;
|
||||||
|
transform: none;
|
||||||
}
|
}
|
||||||
.input-group {
|
.input-group {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -269,11 +286,28 @@ export function getInputAreaScript(): string {
|
|||||||
|
|
||||||
// 对话状态管理
|
// 对话状态管理
|
||||||
let isConversationActive = false;
|
let isConversationActive = false;
|
||||||
|
let hasMessages = false; // 是否已有消息
|
||||||
|
|
||||||
// 工作区检测状态
|
// 工作区检测状态
|
||||||
let hasCheckedWorkspace = false; // 是否已经检测过工作区
|
let hasCheckedWorkspace = false; // 是否已经检测过工作区
|
||||||
let hasWorkspace = true; // 工作区状态
|
let hasWorkspace = true; // 工作区状态
|
||||||
|
|
||||||
|
// 切换输入框布局模式
|
||||||
|
function updateInputAreaLayout() {
|
||||||
|
const inputArea = document.getElementById('inputArea');
|
||||||
|
if (!inputArea) return;
|
||||||
|
|
||||||
|
if (hasMessages) {
|
||||||
|
// 有消息时,移到底部
|
||||||
|
inputArea.classList.remove('centered');
|
||||||
|
inputArea.classList.add('bottom');
|
||||||
|
} else {
|
||||||
|
// 无消息时,居中显示
|
||||||
|
inputArea.classList.add('centered');
|
||||||
|
inputArea.classList.remove('bottom');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// 自动调整 textarea 高度
|
// 自动调整 textarea 高度
|
||||||
function autoResizeTextarea() {
|
function autoResizeTextarea() {
|
||||||
if (messageInput) {
|
if (messageInput) {
|
||||||
@ -359,6 +393,10 @@ export function getInputAreaScript(): string {
|
|||||||
|
|
||||||
addMessage(text, 'user');
|
addMessage(text, 'user');
|
||||||
|
|
||||||
|
// 标记已有消息,切换布局到底部
|
||||||
|
hasMessages = true;
|
||||||
|
updateInputAreaLayout();
|
||||||
|
|
||||||
// 切换按钮为暂停状态
|
// 切换按钮为暂停状态
|
||||||
setSendButtonState(true);
|
setSendButtonState(true);
|
||||||
|
|
||||||
@ -370,5 +408,28 @@ export function getInputAreaScript(): string {
|
|||||||
// 重置优化状态
|
// 重置优化状态
|
||||||
resetOptimizeButton();
|
resetOptimizeButton();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 全局函数:重置输入框布局(用于清空对话时)
|
||||||
|
window.resetInputAreaLayout = function() {
|
||||||
|
hasMessages = false;
|
||||||
|
updateInputAreaLayout();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 全局函数:检查是否有消息(用于页面加载时)
|
||||||
|
window.checkMessagesAndUpdateLayout = function() {
|
||||||
|
const messagesContainer = document.getElementById('messages');
|
||||||
|
if (messagesContainer) {
|
||||||
|
const messageElements = messagesContainer.querySelectorAll('.message');
|
||||||
|
hasMessages = messageElements.length > 0;
|
||||||
|
updateInputAreaLayout();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 页面加载时检查消息状态
|
||||||
|
setTimeout(() => {
|
||||||
|
if (window.checkMessagesAndUpdateLayout) {
|
||||||
|
window.checkMessagesAndUpdateLayout();
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -662,6 +662,10 @@ export function getWebviewContent(
|
|||||||
if (messagesContainer) {
|
if (messagesContainer) {
|
||||||
messagesContainer.innerHTML = '';
|
messagesContainer.innerHTML = '';
|
||||||
}
|
}
|
||||||
|
// 重置输入框布局到居中
|
||||||
|
if (typeof window.resetInputAreaLayout === 'function') {
|
||||||
|
window.resetInputAreaLayout();
|
||||||
|
}
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 'addUserMessage':
|
case 'addUserMessage':
|
||||||
@ -669,6 +673,10 @@ export function getWebviewContent(
|
|||||||
if (message.text) {
|
if (message.text) {
|
||||||
addMessage(message.text, 'user');
|
addMessage(message.text, 'user');
|
||||||
}
|
}
|
||||||
|
// 检查并更新输入框布局
|
||||||
|
if (typeof window.checkMessagesAndUpdateLayout === 'function') {
|
||||||
|
window.checkMessagesAndUpdateLayout();
|
||||||
|
}
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 'addAiMessage':
|
case 'addAiMessage':
|
||||||
@ -676,6 +684,10 @@ export function getWebviewContent(
|
|||||||
if (message.text) {
|
if (message.text) {
|
||||||
addMessage(message.text, 'bot');
|
addMessage(message.text, 'bot');
|
||||||
}
|
}
|
||||||
|
// 检查并更新输入框布局
|
||||||
|
if (typeof window.checkMessagesAndUpdateLayout === 'function') {
|
||||||
|
window.checkMessagesAndUpdateLayout();
|
||||||
|
}
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 'switchMode':
|
case 'switchMode':
|
||||||
|
|||||||
Reference in New Issue
Block a user