fix(editor): Handle lots of text better in chat input (#19381)

This commit is contained in:
Mutasem Aldmour
2025-09-11 13:39:18 +02:00
committed by GitHub
parent 477dd27b08
commit 45e8209142
2 changed files with 19 additions and 6 deletions

View File

@@ -267,7 +267,7 @@ async function copySessionId() {
--chat--message--user--border: none; --chat--message--user--border: none;
--chat--input--padding: var(--spacing-xs); --chat--input--padding: var(--spacing-xs);
--chat--color-typing: var(--color-text-light); --chat--color-typing: var(--color-text-light);
--chat--textarea--max-height: calc(var(--panel-height) * 0.3); --chat--textarea--max-height: calc(var(--logs-panel-height) * 0.3);
--chat--message--pre--background: var(--color-foreground-light); --chat--message--pre--background: var(--color-foreground-light);
--chat--textarea--height: calc( --chat--textarea--height: calc(
var(--chat--input--padding) * 2 + var(--chat--input--font-size) * var(--chat--input--padding) * 2 + var(--chat--input--font-size) *

View File

@@ -11,6 +11,9 @@ import {
LOCAL_STORAGE_PANEL_WIDTH, LOCAL_STORAGE_PANEL_WIDTH,
} from '@/features/logs/logs.constants'; } from '@/features/logs/logs.constants';
const INITIAL_POPUP_HEIGHT = 400;
const COLLAPSED_PANEL_HEIGHT = 32;
export function useLogsPanelLayout( export function useLogsPanelLayout(
workflowName: ComputedRef<string>, workflowName: ComputedRef<string>,
popOutContainer: Readonly<ShallowRef<HTMLElement | null>>, popOutContainer: Readonly<ShallowRef<HTMLElement | null>>,
@@ -61,7 +64,7 @@ export function useLogsPanelLayout(
popOutWindow: popOutWindow, popOutWindow: popOutWindow,
} = usePopOutWindow({ } = usePopOutWindow({
title: popOutWindowTitle, title: popOutWindowTitle,
initialHeight: 400, initialHeight: INITIAL_POPUP_HEIGHT,
initialWidth: window.document.body.offsetWidth * 0.8, initialWidth: window.document.body.offsetWidth * 0.8,
container: popOutContainer, container: popOutContainer,
content: popOutContent, content: popOutContent,
@@ -109,15 +112,25 @@ export function useLogsPanelLayout(
} }
watch( watch(
[() => logsStore.state, resizer.size], [() => logsStore.state, resizer.size, isPoppedOut],
([state, height]) => { ([state, height]) => {
logsStore.setHeight( const updatedHeight =
state === LOGS_PANEL_STATE.FLOATING state === LOGS_PANEL_STATE.FLOATING
? 0 ? 0
: state === LOGS_PANEL_STATE.ATTACHED : state === LOGS_PANEL_STATE.ATTACHED
? height ? height
: 32 /* collapsed panel height */, : COLLAPSED_PANEL_HEIGHT;
);
if (state === LOGS_PANEL_STATE.FLOATING) {
popOutWindow?.value?.document.documentElement.style.setProperty(
'--logs-panel-height',
'100vh',
);
} else {
document.documentElement.style.setProperty('--logs-panel-height', `${updatedHeight}px`);
}
logsStore.setHeight(updatedHeight);
}, },
{ immediate: true }, { immediate: true },
); );