mirror of
https://github.com/zhayujie/chatgpt-on-wechat.git
synced 2026-07-20 05:27:59 +08:00
feat(cli): cli options in web console
This commit is contained in:
zhayujie
@@ -270,7 +270,7 @@
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<!-- Attachment preview bar -->
|
||||
<div id="attachment-preview" class="attachment-preview hidden"></div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="flex items-center gap-2 relative">
|
||||
<div class="flex items-center flex-shrink-0">
|
||||
<button id="new-chat-btn" class="w-9 h-10 flex items-center justify-center rounded-lg
|
||||
text-slate-400 hover:text-primary-500 hover:bg-primary-50 dark:hover:bg-primary-900/20
|
||||
@@ -287,6 +287,7 @@
|
||||
</div>
|
||||
<input type="file" id="file-input" class="hidden" multiple
|
||||
accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.csv,.json,.xml,.zip,.rar,.7z,.py,.js,.ts,.java,.c,.cpp,.go,.rs,.md">
|
||||
<div id="slash-menu" class="slash-menu hidden"></div>
|
||||
<textarea id="chat-input"
|
||||
class="flex-1 min-w-0 px-4 py-[10px] rounded-xl border border-slate-200 dark:border-slate-600
|
||||
bg-slate-50 dark:bg-white/5 text-slate-800 dark:text-slate-100
|
||||
@@ -295,7 +296,7 @@
|
||||
text-sm leading-relaxed"
|
||||
rows="1"
|
||||
data-i18n-placeholder="input_placeholder"
|
||||
placeholder="Type a message..."></textarea>
|
||||
placeholder="Type a message, or press / for commands"></textarea>
|
||||
<button id="send-btn"
|
||||
class="flex-shrink-0 w-10 h-10 flex items-center justify-center rounded-lg
|
||||
bg-primary-400 text-white hover:bg-primary-500
|
||||
|
||||
@@ -446,3 +446,87 @@
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Slash Command Menu */
|
||||
.slash-menu {
|
||||
position: absolute;
|
||||
bottom: calc(100% + 6px);
|
||||
left: 0;
|
||||
right: 0;
|
||||
max-height: 320px;
|
||||
overflow-y: auto;
|
||||
background: #fff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 30px -6px rgba(0, 0, 0, 0.1), 0 2px 8px -2px rgba(0, 0, 0, 0.04);
|
||||
z-index: 50;
|
||||
padding: 4px;
|
||||
animation: slashMenuIn 0.15s ease-out;
|
||||
}
|
||||
.slash-menu.hidden { display: none; }
|
||||
|
||||
@keyframes slashMenuIn {
|
||||
from { opacity: 0; transform: translateY(6px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.slash-menu-header {
|
||||
padding: 6px 10px 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #94a3b8;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.slash-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 10px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: background 0.12s ease;
|
||||
}
|
||||
.slash-menu-item:hover,
|
||||
.slash-menu-item.active {
|
||||
background: #EDFDF3;
|
||||
}
|
||||
.slash-menu-item .cmd {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #334155;
|
||||
font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
|
||||
}
|
||||
.slash-menu-item.active .cmd {
|
||||
color: #228547;
|
||||
}
|
||||
.slash-menu-item .desc {
|
||||
font-size: 12px;
|
||||
color: #94a3b8;
|
||||
margin-left: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Dark mode */
|
||||
.dark .slash-menu {
|
||||
background: #1A1A1A;
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 8px 30px -6px rgba(0, 0, 0, 0.35), 0 2px 8px -2px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.dark .slash-menu-header {
|
||||
color: #64748b;
|
||||
}
|
||||
.dark .slash-menu-item:hover,
|
||||
.dark .slash-menu-item.active {
|
||||
background: rgba(74, 190, 110, 0.1);
|
||||
}
|
||||
.dark .slash-menu-item .cmd {
|
||||
color: #e2e8f0;
|
||||
}
|
||||
.dark .slash-menu-item.active .cmd {
|
||||
color: #4ABE6E;
|
||||
}
|
||||
.dark .slash-menu-item .desc {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
@@ -21,7 +21,7 @@ const I18N = {
|
||||
example_sys_title: '系统管理', example_sys_text: '帮我查看工作空间里有哪些文件',
|
||||
example_task_title: '技能系统', example_task_text: '查看所有支持的工具和技能',
|
||||
example_code_title: '编程助手', example_code_text: '帮我编写一个Python爬虫脚本',
|
||||
input_placeholder: '输入消息...',
|
||||
input_placeholder: '输入消息，或输入 / 使用指令',
|
||||
config_title: '配置管理', config_desc: '管理模型和 Agent 配置',
|
||||
config_model: '模型配置', config_agent: 'Agent 配置',
|
||||
config_channel: '通道配置',
|
||||
@@ -72,7 +72,7 @@ const I18N = {
|
||||
example_sys_title: 'System', example_sys_text: 'Show me the files in the workspace',
|
||||
example_task_title: 'Skills', example_task_text: 'Show current tools and skills',
|
||||
example_code_title: 'Coding', example_code_text: 'Write a Python web scraper script',
|
||||
input_placeholder: 'Type a message...',
|
||||
input_placeholder: 'Type a message, or press / for commands',
|
||||
config_title: 'Configuration', config_desc: 'Manage model and agent settings',
|
||||
config_model: 'Model Configuration', config_agent: 'Agent Configuration',
|
||||
config_channel: 'Channel Configuration',
|
||||
@@ -435,6 +435,99 @@ chatInput.addEventListener('paste', (e) => {
|
||||
chatInput.addEventListener('compositionstart', () => { isComposing = true; });
|
||||
chatInput.addEventListener('compositionend', () => { setTimeout(() => { isComposing = false; }, 100); });
|
||||
|
||||
// ── Slash Command Menu ───────────────────────────────────────
|
||||
const SLASH_COMMANDS = [
|
||||
{ cmd: '/help', desc: '显示命令帮助' },
|
||||
{ cmd: '/status', desc: '查看运行状态' },
|
||||
{ cmd: '/context', desc: '查看对话上下文' },
|
||||
{ cmd: '/context clear', desc: '清除对话上下文' },
|
||||
{ cmd: '/skill list', desc: '查看已安装技能' },
|
||||
{ cmd: '/skill list --remote', desc: '浏览技能广场' },
|
||||
{ cmd: '/skill search ', desc: '搜索技能' },
|
||||
{ cmd: '/skill install ', desc: '安装技能' },
|
||||
{ cmd: '/skill uninstall ', desc: '卸载技能' },
|
||||
{ cmd: '/skill info ', desc: '查看技能详情' },
|
||||
{ cmd: '/skill enable ', desc: '启用技能' },
|
||||
{ cmd: '/skill disable ', desc: '禁用技能' },
|
||||
{ cmd: '/config', desc: '查看当前配置' },
|
||||
{ cmd: '/logs', desc: '查看最近日志' },
|
||||
{ cmd: '/version', desc: '查看版本' },
|
||||
];
|
||||
|
||||
const slashMenu = document.getElementById('slash-menu');
|
||||
let slashActiveIdx = 0;
|
||||
let slashFiltered = [];
|
||||
let slashJustSelected = false;
|
||||
let slashLastFilter = '';
|
||||
|
||||
function showSlashMenu(filter) {
|
||||
const q = filter.toLowerCase();
|
||||
if (q === slashLastFilter && !slashMenu.classList.contains('hidden')) return;
|
||||
slashLastFilter = q;
|
||||
|
||||
const newFiltered = SLASH_COMMANDS.filter(c => c.cmd.toLowerCase().startsWith(q));
|
||||
if (newFiltered.length === 0) {
|
||||
hideSlashMenu();
|
||||
return;
|
||||
}
|
||||
|
||||
const changed = newFiltered.length !== slashFiltered.length ||
|
||||
newFiltered.some((c, i) => c.cmd !== slashFiltered[i]?.cmd);
|
||||
slashFiltered = newFiltered;
|
||||
if (changed) slashActiveIdx = 0;
|
||||
slashActiveIdx = Math.min(slashActiveIdx, slashFiltered.length - 1);
|
||||
|
||||
renderSlashItems();
|
||||
slashMenu.classList.remove('hidden');
|
||||
}
|
||||
|
||||
function hideSlashMenu() {
|
||||
slashMenu.classList.add('hidden');
|
||||
slashMenu.innerHTML = '';
|
||||
slashFiltered = [];
|
||||
slashActiveIdx = -1;
|
||||
slashLastFilter = '';
|
||||
}
|
||||
|
||||
function isSlashMenuVisible() {
|
||||
return !slashMenu.classList.contains('hidden') && slashFiltered.length > 0;
|
||||
}
|
||||
|
||||
function renderSlashItems() {
|
||||
slashMenu.innerHTML =
|
||||
'<div class="slash-menu-header">Commands</div>' +
|
||||
slashFiltered.map((c, i) =>
|
||||
`<div class="slash-menu-item${i === slashActiveIdx ? ' active' : ''}" data-idx="${i}">` +
|
||||
`<span class="cmd">${escapeHtml(c.cmd)}</span>` +
|
||||
`<span class="desc">${escapeHtml(c.desc)}</span></div>`
|
||||
).join('');
|
||||
|
||||
slashMenu.querySelectorAll('.slash-menu-item').forEach(el => {
|
||||
el.addEventListener('mouseenter', () => {
|
||||
slashActiveIdx = parseInt(el.dataset.idx);
|
||||
renderSlashItems();
|
||||
});
|
||||
el.addEventListener('mousedown', (e) => {
|
||||
e.preventDefault();
|
||||
selectSlashCommand(parseInt(el.dataset.idx));
|
||||
});
|
||||
});
|
||||
|
||||
const activeEl = slashMenu.querySelector('.slash-menu-item.active');
|
||||
if (activeEl) activeEl.scrollIntoView({ block: 'nearest' });
|
||||
}
|
||||
|
||||
function selectSlashCommand(idx) {
|
||||
if (idx < 0 || idx >= slashFiltered.length) return;
|
||||
const chosen = slashFiltered[idx].cmd;
|
||||
slashJustSelected = true;
|
||||
chatInput.value = chosen;
|
||||
chatInput.dispatchEvent(new Event('input'));
|
||||
hideSlashMenu();
|
||||
chatInput.focus();
|
||||
chatInput.selectionStart = chatInput.selectionEnd = chosen.length;
|
||||
}
|
||||
|
||||
chatInput.addEventListener('input', function() {
|
||||
this.style.height = '42px';
|
||||
const scrollH = this.scrollHeight;
|
||||
@@ -442,11 +535,50 @@ chatInput.addEventListener('input', function() {
|
||||
this.style.height = newH + 'px';
|
||||
this.style.overflowY = scrollH > 180 ? 'auto' : 'hidden';
|
||||
updateSendBtnState();
|
||||
|
||||
const val = this.value;
|
||||
if (slashJustSelected) {
|
||||
slashJustSelected = false;
|
||||
} else if (val.startsWith('/')) {
|
||||
showSlashMenu(val);
|
||||
} else {
|
||||
hideSlashMenu();
|
||||
}
|
||||
});
|
||||
|
||||
chatInput.addEventListener('keydown', function(e) {
|
||||
// keyCode 229 indicates an IME is processing the keystroke (reliable across browsers)
|
||||
if (e.keyCode === 229 || e.isComposing || isComposing) return;
|
||||
|
||||
if (isSlashMenuVisible()) {
|
||||
if (e.key === 'ArrowDown') {
|
||||
e.preventDefault();
|
||||
slashActiveIdx = Math.min(slashActiveIdx + 1, slashFiltered.length - 1);
|
||||
renderSlashItems();
|
||||
return;
|
||||
}
|
||||
if (e.key === 'ArrowUp') {
|
||||
e.preventDefault();
|
||||
slashActiveIdx = Math.max(slashActiveIdx - 1, 0);
|
||||
renderSlashItems();
|
||||
return;
|
||||
}
|
||||
if (e.key === 'Enter' && !e.shiftKey && !e.ctrlKey) {
|
||||
e.preventDefault();
|
||||
selectSlashCommand(slashActiveIdx);
|
||||
return;
|
||||
}
|
||||
if (e.key === 'Escape') {
|
||||
e.preventDefault();
|
||||
hideSlashMenu();
|
||||
return;
|
||||
}
|
||||
if (e.key === 'Tab') {
|
||||
e.preventDefault();
|
||||
selectSlashCommand(slashActiveIdx);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if ((e.ctrlKey || e.shiftKey) && e.key === 'Enter') {
|
||||
const start = this.selectionStart;
|
||||
const end = this.selectionEnd;
|
||||
@@ -460,6 +592,10 @@ chatInput.addEventListener('keydown', function(e) {
|
||||
}
|
||||
});
|
||||
|
||||
chatInput.addEventListener('blur', () => {
|
||||
setTimeout(hideSlashMenu, 150);
|
||||
});
|
||||
|
||||
document.querySelectorAll('.example-card').forEach(card => {
|
||||
card.addEventListener('click', () => {
|
||||
const textEl = card.querySelector('[data-i18n*="text"]');
|
||||
|
||||
Reference in New Issue
Block a user