v0.1.4-p4
parent
08b35d632b
commit
95e3fd6c38
|
|
@ -48,9 +48,9 @@
|
||||||
.ops-composer-shell {
|
.ops-composer-shell {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-rows: minmax(96px, auto) auto;
|
grid-template-rows: minmax(0, auto) auto;
|
||||||
gap: 0;
|
gap: 0;
|
||||||
min-height: 108px;
|
min-height: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border: 1px solid color-mix(in oklab, var(--line) 70%, var(--text) 8%);
|
border: 1px solid color-mix(in oklab, var(--line) 70%, var(--text) 8%);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
|
@ -337,13 +337,13 @@
|
||||||
|
|
||||||
.ops-composer-shell .ops-composer-input,
|
.ops-composer-shell .ops-composer-input,
|
||||||
.ops-composer-shell .ops-composer-input.input {
|
.ops-composer-shell .ops-composer-input.input {
|
||||||
min-height: 96px;
|
min-height: calc((1.45em * 3) + 20px);
|
||||||
max-height: 220px;
|
max-height: 220px;
|
||||||
overflow: auto;
|
overflow-y: hidden;
|
||||||
resize: none;
|
resize: none;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 1.45;
|
line-height: 1.45;
|
||||||
padding: 14px 42px 10px 14px;
|
padding: 6px 42px 6px 12px;
|
||||||
border: 0 !important;
|
border: 0 !important;
|
||||||
border-bottom: 0 !important;
|
border-bottom: 0 !important;
|
||||||
border-radius: 10px 10px 0 0;
|
border-radius: 10px 10px 0 0;
|
||||||
|
|
@ -444,9 +444,10 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
min-height: 44px;
|
min-height: 38px;
|
||||||
padding: 4px 10px 6px 10px;
|
padding: 2px 10px 4px 10px;
|
||||||
background: var(--panel);
|
background: var(--panel);
|
||||||
|
border-top: 1px solid color-mix(in oklab, var(--line) 34%, transparent);
|
||||||
border-radius: 0 0 10px 10px;
|
border-radius: 0 0 10px 10px;
|
||||||
width: auto;
|
width: auto;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -591,6 +591,7 @@ export function DashboardChatPanel({
|
||||||
<textarea
|
<textarea
|
||||||
ref={composerTextareaRef}
|
ref={composerTextareaRef}
|
||||||
className="input ops-composer-input"
|
className="input ops-composer-input"
|
||||||
|
rows={3}
|
||||||
value={command}
|
value={command}
|
||||||
onChange={(event) => onCommandChange(event.target.value)}
|
onChange={(event) => onCommandChange(event.target.value)}
|
||||||
onKeyDown={onComposerKeyDown}
|
onKeyDown={onComposerKeyDown}
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,9 @@ import { normalizeAssistantMessageText, normalizeUserMessageText } from '../mess
|
||||||
import type { QuotedReply, StagedSubmissionDraft } from '../types';
|
import type { QuotedReply, StagedSubmissionDraft } from '../types';
|
||||||
import { loadComposerDraft, persistComposerDraft } from '../utils';
|
import { loadComposerDraft, persistComposerDraft } from '../utils';
|
||||||
|
|
||||||
|
const COMPOSER_MIN_ROWS = 3;
|
||||||
|
const COMPOSER_MAX_HEIGHT_PX = 220;
|
||||||
|
|
||||||
type PromptTone = 'info' | 'success' | 'warning' | 'error';
|
type PromptTone = 'info' | 'success' | 'warning' | 'error';
|
||||||
|
|
||||||
interface NotifyOptions {
|
interface NotifyOptions {
|
||||||
|
|
@ -120,6 +123,23 @@ export function useDashboardChatComposer({
|
||||||
setQuotedReply(null);
|
setQuotedReply(null);
|
||||||
}, [selectedBotId]);
|
}, [selectedBotId]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const textarea = composerTextareaRef.current;
|
||||||
|
if (!textarea || typeof window === 'undefined') return;
|
||||||
|
const computed = window.getComputedStyle(textarea);
|
||||||
|
const lineHeight = Number.parseFloat(computed.lineHeight) || 20;
|
||||||
|
const paddingTop = Number.parseFloat(computed.paddingTop) || 0;
|
||||||
|
const paddingBottom = Number.parseFloat(computed.paddingBottom) || 0;
|
||||||
|
const borderTop = Number.parseFloat(computed.borderTopWidth) || 0;
|
||||||
|
const borderBottom = Number.parseFloat(computed.borderBottomWidth) || 0;
|
||||||
|
const minHeight = Math.ceil((lineHeight * COMPOSER_MIN_ROWS) + paddingTop + paddingBottom + borderTop + borderBottom);
|
||||||
|
|
||||||
|
textarea.style.height = 'auto';
|
||||||
|
const nextHeight = Math.min(COMPOSER_MAX_HEIGHT_PX, Math.max(minHeight, textarea.scrollHeight));
|
||||||
|
textarea.style.height = `${nextHeight}px`;
|
||||||
|
textarea.style.overflowY = textarea.scrollHeight > nextHeight + 1 ? 'auto' : 'hidden';
|
||||||
|
}, [command, selectedBotId]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const hasDraft =
|
const hasDraft =
|
||||||
Boolean(String(command || '').trim())
|
Boolean(String(command || '').trim())
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue