make better ux for model selecting
This commit is contained in:
+245
-18
@@ -807,15 +807,74 @@ select:focus {
|
||||
|
||||
.chat-header-actions {
|
||||
justify-content: flex-end;
|
||||
align-items: end;
|
||||
flex-wrap: nowrap;
|
||||
align-items: stretch;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.model-menu,
|
||||
.persona-menu {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.model-badge-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-height: 44px;
|
||||
padding: 10px 14px;
|
||||
border-radius: 999px;
|
||||
background: rgba(164, 85, 45, 0.1);
|
||||
color: var(--text);
|
||||
border: 1px solid rgba(164, 85, 45, 0.18);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.model-badge-label {
|
||||
font-size: 0.74rem;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.model-badge-button strong {
|
||||
font-family: "Space Grotesk", sans-serif;
|
||||
font-size: 0.95rem;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.model-badge-button[aria-expanded="true"] {
|
||||
background: rgba(164, 85, 45, 0.16);
|
||||
border-color: rgba(164, 85, 45, 0.28);
|
||||
}
|
||||
|
||||
.model-popover {
|
||||
position: absolute;
|
||||
top: calc(100% + 10px);
|
||||
right: 0;
|
||||
width: min(420px, 88vw);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 16px;
|
||||
box-shadow: var(--shadow);
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
z-index: 20;
|
||||
background: var(--surface-strong);
|
||||
border: 1px solid rgba(24, 32, 31, 0.08);
|
||||
}
|
||||
|
||||
.model-select {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
min-width: 180px;
|
||||
align-self: end;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.model-select-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.model-select label {
|
||||
@@ -825,6 +884,119 @@ select:focus {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.model-count {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--brand-strong);
|
||||
}
|
||||
|
||||
.model-select-control {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.model-select-control select {
|
||||
padding-right: 48px;
|
||||
border-radius: 14px;
|
||||
appearance: none;
|
||||
background: rgba(255, 253, 249, 0.96);
|
||||
border-color: rgba(24, 32, 31, 0.12);
|
||||
font-weight: 700;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.model-select-chevron {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 50%;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-right: 2px solid var(--text-soft);
|
||||
border-bottom: 2px solid var(--text-soft);
|
||||
transform: translateY(-65%) rotate(45deg);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.model-help {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
padding: 14px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(24, 32, 31, 0.08);
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 252, 246, 0.92));
|
||||
min-height: 92px;
|
||||
}
|
||||
|
||||
.model-help-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.model-help-header strong {
|
||||
font-family: "Space Grotesk", sans-serif;
|
||||
font-size: 0.98rem;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.model-help-badge {
|
||||
padding: 5px 10px;
|
||||
border-radius: 999px;
|
||||
background: rgba(164, 85, 45, 0.1);
|
||||
border: 1px solid rgba(164, 85, 45, 0.18);
|
||||
color: var(--brand-strong);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.model-help-badge[data-badge="coding"] {
|
||||
background: rgba(38, 101, 214, 0.12);
|
||||
border-color: rgba(38, 101, 214, 0.18);
|
||||
color: #214ea7;
|
||||
}
|
||||
|
||||
.model-help-badge[data-badge="fast"] {
|
||||
background: rgba(15, 138, 103, 0.12);
|
||||
border-color: rgba(15, 138, 103, 0.18);
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.model-help-badge[data-badge="chatty"] {
|
||||
background: rgba(168, 85, 247, 0.12);
|
||||
border-color: rgba(168, 85, 247, 0.2);
|
||||
color: #7c3aed;
|
||||
}
|
||||
|
||||
.model-help-badge[data-badge="balanced"] {
|
||||
background: rgba(217, 119, 6, 0.12);
|
||||
border-color: rgba(217, 119, 6, 0.18);
|
||||
color: #b45309;
|
||||
}
|
||||
|
||||
.model-help-badge[data-badge="persona"] {
|
||||
background: rgba(190, 24, 93, 0.12);
|
||||
border-color: rgba(190, 24, 93, 0.18);
|
||||
color: #be185d;
|
||||
}
|
||||
|
||||
.model-help-badge[data-badge="waiting"] {
|
||||
background: rgba(24, 32, 31, 0.06);
|
||||
border-color: rgba(24, 32, 31, 0.1);
|
||||
color: var(--text-soft);
|
||||
}
|
||||
|
||||
.model-help-summary {
|
||||
margin: 0;
|
||||
color: var(--text-soft);
|
||||
font-size: 0.86rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.context-rail,
|
||||
.quick-prompts {
|
||||
display: flex;
|
||||
@@ -1076,18 +1248,11 @@ select:focus {
|
||||
min-width: 88px;
|
||||
}
|
||||
|
||||
.chat-header-actions .model-menu,
|
||||
.chat-header-actions .persona-menu {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
align-self: end;
|
||||
}
|
||||
|
||||
.chat-header-actions .model-select select {
|
||||
min-width: 190px;
|
||||
}
|
||||
|
||||
.persona-menu {
|
||||
position: relative;
|
||||
align-items: stretch;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.persona-popover {
|
||||
@@ -1468,7 +1633,10 @@ body[data-theme="fakegpt"] .hero-stat,
|
||||
body[data-theme="fakegpt"] .summary-card,
|
||||
body[data-theme="fakegpt"] .context-pill,
|
||||
body[data-theme="fakegpt"] .prompt-chip,
|
||||
body[data-theme="fakegpt"] .status {
|
||||
body[data-theme="fakegpt"] .status,
|
||||
body[data-theme="fakegpt"] .model-popover,
|
||||
body[data-theme="fakegpt"] .model-select,
|
||||
body[data-theme="fakegpt"] .model-help {
|
||||
background: rgba(18, 24, 21, 0.9);
|
||||
color: #e8fff7;
|
||||
border-color: rgba(36, 255, 180, 0.12);
|
||||
@@ -1515,12 +1683,32 @@ body[data-theme="fakegpt"] .persona-form .field {
|
||||
|
||||
body[data-theme="fakegpt"] input,
|
||||
body[data-theme="fakegpt"] textarea,
|
||||
body[data-theme="fakegpt"] select {
|
||||
body[data-theme="fakegpt"] select,
|
||||
body[data-theme="fakegpt"] .model-select-control select {
|
||||
background: rgba(10, 15, 13, 0.96);
|
||||
color: #e8fff7;
|
||||
border-color: rgba(36, 255, 180, 0.12);
|
||||
}
|
||||
|
||||
body[data-theme="fakegpt"] .model-count,
|
||||
body[data-theme="fakegpt"] .model-help-badge[data-badge="waiting"] {
|
||||
color: #87aea3;
|
||||
}
|
||||
|
||||
body[data-theme="fakegpt"] .model-badge-button {
|
||||
background: rgba(18, 24, 21, 0.96);
|
||||
color: #d7fff3;
|
||||
border-color: rgba(36, 255, 180, 0.16);
|
||||
}
|
||||
|
||||
body[data-theme="fakegpt"] .model-badge-label {
|
||||
color: #87aea3;
|
||||
}
|
||||
|
||||
body[data-theme="fakegpt"] .model-select-chevron {
|
||||
border-color: #b7d8ce;
|
||||
}
|
||||
|
||||
body[data-theme="fakegpt"] option {
|
||||
background: #101513;
|
||||
color: #e8fff7;
|
||||
@@ -1590,6 +1778,9 @@ body[data-theme="fraud"] .toggle.active {
|
||||
body[data-theme="fraud"] input,
|
||||
body[data-theme="fraud"] textarea,
|
||||
body[data-theme="fraud"] select,
|
||||
body[data-theme="fraud"] .model-popover,
|
||||
body[data-theme="fraud"] .model-select,
|
||||
body[data-theme="fraud"] .model-help,
|
||||
body[data-theme="fraud"] .secondary-action,
|
||||
body[data-theme="fraud"] .icon-button,
|
||||
body[data-theme="fraud"] .session-chip,
|
||||
@@ -1622,6 +1813,9 @@ body[data-theme="germini"] .market-shell,
|
||||
body[data-theme="germini"] .settings-panel,
|
||||
body[data-theme="germini"] .modal-card,
|
||||
body[data-theme="germini"] .persona-popover,
|
||||
body[data-theme="germini"] .model-popover,
|
||||
body[data-theme="germini"] .model-select,
|
||||
body[data-theme="germini"] .model-help,
|
||||
body[data-theme="germini"] .hero-panel {
|
||||
background: rgba(255, 255, 255, 0.32);
|
||||
backdrop-filter: blur(22px);
|
||||
@@ -1654,7 +1848,8 @@ body[data-theme="germini"] .settings-shell {
|
||||
|
||||
body[data-theme="germini"] input,
|
||||
body[data-theme="germini"] textarea,
|
||||
body[data-theme="germini"] select {
|
||||
body[data-theme="germini"] select,
|
||||
body[data-theme="germini"] .model-select-control select {
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
border-color: rgba(255, 255, 255, 0.42);
|
||||
}
|
||||
@@ -1712,6 +1907,9 @@ body[data-theme="slopilot"] .settings-nav,
|
||||
body[data-theme="slopilot"] .settings-nav-item:not(.active),
|
||||
body[data-theme="slopilot"] .settings-theme-note,
|
||||
body[data-theme="slopilot"] .persona-form-intro,
|
||||
body[data-theme="slopilot"] .model-popover,
|
||||
body[data-theme="slopilot"] .model-select,
|
||||
body[data-theme="slopilot"] .model-help,
|
||||
body[data-theme="slopilot"] .persona-form .field {
|
||||
background: #ffffff;
|
||||
border-color: rgba(13, 104, 255, 0.12);
|
||||
@@ -1732,6 +1930,9 @@ body[data-theme="beta-ai"] .chat-sidebar,
|
||||
body[data-theme="beta-ai"] .messages-panel,
|
||||
body[data-theme="beta-ai"] .input-shell,
|
||||
body[data-theme="beta-ai"] .settings-panel,
|
||||
body[data-theme="beta-ai"] .model-popover,
|
||||
body[data-theme="beta-ai"] .model-select,
|
||||
body[data-theme="beta-ai"] .model-help,
|
||||
body[data-theme="beta-ai"] .market-shell {
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(243, 238, 255, 0.92));
|
||||
}
|
||||
@@ -1761,6 +1962,9 @@ body[data-theme="confusity"] .messages-panel,
|
||||
body[data-theme="confusity"] .input-shell,
|
||||
body[data-theme="confusity"] .chat-sidebar,
|
||||
body[data-theme="confusity"] .settings-panel,
|
||||
body[data-theme="confusity"] .model-popover,
|
||||
body[data-theme="confusity"] .model-select,
|
||||
body[data-theme="confusity"] .model-help,
|
||||
body[data-theme="confusity"] .market-shell {
|
||||
background: #ffffff;
|
||||
}
|
||||
@@ -1970,6 +2174,12 @@ body[data-theme="beta-ai"] .persona-form .field {
|
||||
.settings-theme-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.model-select {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
@@ -2037,6 +2247,11 @@ body[data-theme="beta-ai"] .persona-form .field {
|
||||
.settings-shell .market-header-actions .secondary-action {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chat-header-actions {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
@@ -2069,11 +2284,23 @@ body[data-theme="beta-ai"] .persona-form .field {
|
||||
|
||||
.chat-toolbar .icon-button,
|
||||
.chat-header-actions .secondary-action,
|
||||
.chat-header-actions .model-badge-button,
|
||||
.chat-header-actions .model-select select {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.model-popover {
|
||||
left: 0;
|
||||
right: auto;
|
||||
width: min(92vw, 420px);
|
||||
}
|
||||
|
||||
.model-help-header {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.context-pill {
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
|
||||
Reference in New Issue
Block a user