fix(hub): improve mobile AI coach layout
Move new-chat button to top toolbar to prevent overlap, compact chrome, hide chrome when keyboard opens, and soften mobile tab styling. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
@@ -3897,12 +3897,14 @@ body.hub-page-ai #page-ai {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.hub-page-ai.hub-ai-keyboard-open .ai-mobile-tabs {
|
||||
margin-bottom: 4px;
|
||||
body.hub-page-ai.hub-ai-keyboard-open .ai-mobile-tabs,
|
||||
body.hub-page-ai.hub-ai-keyboard-open .ai-chat-topbar,
|
||||
body.hub-page-ai.hub-ai-keyboard-open .ai-chat-session-head {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.hub-page-ai.hub-ai-keyboard-open .ai-panel-head {
|
||||
padding-bottom: 0;
|
||||
body.hub-page-ai.hub-ai-keyboard-open .ai-mobile-tabs {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
body.hub-page-ai #page-ai {
|
||||
@@ -3937,7 +3939,11 @@ body.hub-page-ai #page-ai {
|
||||
color: var(--text);
|
||||
border-color: var(--accent);
|
||||
background: var(--accent-dim);
|
||||
box-shadow: var(--glow);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
body.hub-page-ai #page-ai .page-desc {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.hub-page-ai .ai-layout {
|
||||
@@ -3951,6 +3957,7 @@ body.hub-page-ai #page-ai {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body.hub-page-ai .ai-layout[data-ai-mobile-tab="chat"] .ai-chat-panel,
|
||||
body.hub-page-ai .ai-layout[data-ai-mobile-tab="history"] .ai-chat-panel {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
@@ -3964,14 +3971,11 @@ body.hub-page-ai #page-ai {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body.hub-page-ai .ai-layout[data-ai-mobile-tab="history"] .ai-chat-main {
|
||||
body.hub-page-ai .ai-layout[data-ai-mobile-tab="history"] .ai-chat-main,
|
||||
body.hub-page-ai .ai-layout[data-ai-mobile-tab="history"] .ai-chat-topbar {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body.hub-page-ai .ai-layout[data-ai-mobile-tab="history"] .ai-bot-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.hub-page-ai .ai-layout[data-ai-mobile-tab="history"] .ai-chat-history-panel {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
@@ -3985,6 +3989,8 @@ body.hub-page-ai #page-ai {
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 8px 10px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
body.hub-page-ai .ai-chat-panel {
|
||||
@@ -3992,12 +3998,62 @@ body.hub-page-ai #page-ai {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
body.hub-page-ai .ai-chat-topbar {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
body.hub-page-ai .ai-bot-tab {
|
||||
min-height: 34px;
|
||||
padding: 5px 8px;
|
||||
font-size: 0.76rem;
|
||||
}
|
||||
|
||||
body.hub-page-ai .ai-bot-tab.is-active {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
body.hub-page-ai .ai-chat-new-btn {
|
||||
min-height: 34px;
|
||||
padding: 5px 10px;
|
||||
font-size: 0.76rem;
|
||||
}
|
||||
|
||||
body.hub-page-ai .ai-chat-split {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
body.hub-page-ai .ai-chat-main {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
body.hub-page-ai .ai-chat-session-head {
|
||||
margin: 0;
|
||||
padding: 0 2px 4px;
|
||||
}
|
||||
|
||||
body.hub-page-ai .ai-chat-session-head h2 {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
color: var(--muted);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
body.hub-page-ai .ai-chat-messages {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
padding-bottom: 8px;
|
||||
padding: 4px 2px 8px;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
@@ -4008,43 +4064,76 @@ body.hub-page-ai #page-ai {
|
||||
z-index: 3;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 10px 0 max(10px, env(safe-area-inset-bottom));
|
||||
padding: 8px 0 max(8px, env(safe-area-inset-bottom));
|
||||
background: var(--panel);
|
||||
border-top: 1px solid var(--border-soft);
|
||||
box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.18);
|
||||
box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
body.hub-page-ai .ai-chat-compose {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
body.hub-page-ai .ai-chat-form textarea {
|
||||
min-height: 44px;
|
||||
max-height: 120px;
|
||||
min-height: 40px;
|
||||
max-height: 96px;
|
||||
font-size: 16px;
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
body.hub-page-ai .ai-chat-compose-actions {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body.hub-page-ai .ai-chat-files-label {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
body.hub-page-ai .ai-chat-files-label:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.hub-page-ai .ai-chat-upload-btn,
|
||||
body.hub-page-ai #btn-ai-chat-send {
|
||||
min-height: 44px;
|
||||
min-height: 40px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
body.hub-page-ai #btn-ai-chat-send {
|
||||
min-width: 76px;
|
||||
min-width: 72px;
|
||||
margin-left: auto;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
body.hub-page-ai .ai-msg-row-user {
|
||||
max-width: 92%;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
body.hub-page-ai .ai-msg-row-coach {
|
||||
max-width: 96%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
body.hub-page-ai .ai-bubble {
|
||||
font-size: 0.86rem;
|
||||
padding: 9px 11px;
|
||||
}
|
||||
|
||||
body.hub-page-ai .ai-msg-role {
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
body.hub-page-ai .ai-chat-history-list {
|
||||
padding: 6px 4px;
|
||||
}
|
||||
|
||||
body.hub-page-ai .ai-chat-history-item {
|
||||
padding: 10px 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4324,11 +4413,34 @@ body.hub-page-ai #page-ai {
|
||||
.ai-chat-panel .ai-chat-split {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.ai-chat-topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.ai-chat-topbar .ai-bot-bar {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
.ai-chat-new-btn {
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ai-chat-session-head {
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
.ai-chat-session-head h2 {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ai-bot-bar {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
padding-bottom: 2px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.ai-bot-tab {
|
||||
flex: 1;
|
||||
|
||||
@@ -3314,8 +3314,16 @@
|
||||
const botMode = (session && session.bot_mode) || aiSelectedBotMode || "trading";
|
||||
if (title) {
|
||||
const modeLabel = botMode === "general" ? "普通聊天" : "交易教练";
|
||||
title.textContent =
|
||||
session && session.title ? `${modeLabel} · ${session.title}` : modeLabel;
|
||||
const sessionTitle = session && session.title ? String(session.title) : "";
|
||||
if (isMobileLayout()) {
|
||||
title.textContent = sessionTitle && sessionTitle !== "新对话"
|
||||
? sessionTitle
|
||||
: modeLabel;
|
||||
} else {
|
||||
title.textContent = sessionTitle
|
||||
? `${modeLabel} · ${sessionTitle}`
|
||||
: modeLabel;
|
||||
}
|
||||
}
|
||||
const showPlaceholder =
|
||||
!msgs.length && !options.pendingUser && !options.thinking;
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'" />
|
||||
<noscript><link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet" /></noscript>
|
||||
<link rel="stylesheet" href="/assets/app.css?v=20260609-hub-funds-fold" />
|
||||
<link rel="stylesheet" href="/assets/app.css?v=20260611-hub-ai-mobile" />
|
||||
<link rel="stylesheet" href="/assets/dashboard.css?v=20260611-hub-dash-sse" />
|
||||
</head>
|
||||
<body>
|
||||
@@ -449,17 +449,17 @@
|
||||
</div>
|
||||
<div class="ai-layout" data-ai-mobile-tab="chat">
|
||||
<section class="ai-panel ai-chat-panel" data-ai-panel="chat">
|
||||
<div class="ai-bot-bar" role="tablist" aria-label="聊天机器人">
|
||||
<button type="button" class="ai-bot-tab is-active" data-bot="trading" role="tab" aria-selected="true">交易教练</button>
|
||||
<button type="button" class="ai-bot-tab" data-bot="general" role="tab" aria-selected="false">普通聊天</button>
|
||||
<div class="ai-chat-topbar">
|
||||
<div class="ai-bot-bar" role="tablist" aria-label="聊天机器人">
|
||||
<button type="button" class="ai-bot-tab is-active" data-bot="trading" role="tab" aria-selected="true">交易教练</button>
|
||||
<button type="button" class="ai-bot-tab" data-bot="general" role="tab" aria-selected="false">普通聊天</button>
|
||||
</div>
|
||||
<button type="button" id="btn-ai-chat-new" class="primary ai-chat-new-btn">新开对话</button>
|
||||
</div>
|
||||
<div class="ai-chat-split">
|
||||
<div class="ai-chat-main">
|
||||
<div class="ai-panel-head">
|
||||
<div class="ai-panel-head ai-chat-session-head">
|
||||
<h2 id="ai-chat-title">聊天</h2>
|
||||
<div class="ai-panel-actions">
|
||||
<button type="button" id="btn-ai-chat-new" class="primary">新开对话</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="ai-chat-messages" class="ai-panel-scroll ai-chat-messages" aria-live="polite"></div>
|
||||
<form id="ai-chat-form" class="ai-chat-form">
|
||||
@@ -555,6 +555,6 @@
|
||||
<script src="/assets/funds.js?v=20260609-hub-funds-fold"></script>
|
||||
<script src="/assets/dashboard.js?v=20260611-hub-dash-sse"></script>
|
||||
<script src="/assets/ai_review_render.js?v=2"></script>
|
||||
<script src="/assets/app.js?v=20260611-hub-nav-prefs"></script>
|
||||
<script src="/assets/app.js?v=20260611-hub-ai-mobile"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user