BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: stabilize question custom textarea resizing (#1614)

Browse Source 
* fix: stabilize question custom textarea resizing

* fix: preserve custom question answer state

---------

Co-authored-by: Bohdan Triapitsyn <artmore@protonmail.com>
This commit is contained in:
HearingSmile
2026-06-13 00:28:42 +03:00
committed by GitHub
co-authored by Bohdan Triapitsyn
parent 8fbaa5df9c
commit 3bbd42587e
3 changed files with 123 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/chat/QuestionCard.tsx
+87 -32
View File
@@ -14,6 +14,7 @@ import { useSessions } from '@/sync/sync-context';
import * as sessionActions from '@/sync/session-actions';
import { useI18n } from '@/lib/i18n';
import { serializeQuestionAsJson, serializeQuestionAsMarkdown } from './questionSerializers';
import { QUESTION_CUSTOM_TEXTAREA_MIN_HEIGHT, getQuestionCustomTextareaHeight } from './questionTextareaSizing';
interface QuestionCardProps {
question: QuestionRequest;
@@ -22,6 +23,70 @@ interface QuestionCardProps {
type TabKey = string;
const SUMMARY_TAB = 'summary';
interface CustomAnswerTextareaProps {
value: string;
placeholder: string;
disabled: boolean;
onValueChange: (value: string) => void;
onKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
}
const CustomAnswerTextarea = React.memo(function CustomAnswerTextarea({
value,
placeholder,
disabled,
onValueChange,
onKeyDown,
}: CustomAnswerTextareaProps) {
const textareaRef = React.useRef<HTMLTextAreaElement | null>(null);
const [localValue, setLocalValue] = React.useState(value);
const [height, setHeight] = React.useState(QUESTION_CUSTOM_TEXTAREA_MIN_HEIGHT);
const [isScrollable, setIsScrollable] = React.useState(false);
React.useEffect(() => {
setLocalValue(value);
}, [value]);
React.useLayoutEffect(() => {
const textarea = textareaRef.current;
if (!textarea) return;
const nextHeight = getQuestionCustomTextareaHeight({
scrollHeight: textarea.scrollHeight,
currentHeight: height,
});
const nextScrollable = textarea.scrollHeight > (nextHeight ?? height);
if (isScrollable !== nextScrollable) {
setIsScrollable(nextScrollable);
}
if (nextHeight !== null) {
setHeight(nextHeight);
}
}, [height, isScrollable, localValue]);
return (
<textarea
ref={textareaRef}
value={localValue}
onChange={(event) => {
const nextValue = event.target.value;
setLocalValue(nextValue);
onValueChange(nextValue);
}}
placeholder={placeholder}
disabled={disabled}
rows={2}
onKeyDown={onKeyDown}
style={{ height }}
className={cn(
'w-full bg-transparent border border-border/30 focus:border-primary rounded px-2 py-1 outline-none typography-meta text-foreground placeholder:text-muted-foreground/50 transition-colors resize-none',
isScrollable ? 'overflow-y-auto' : 'overflow-hidden'
)}
autoFocus
/>
);
});
export const QuestionCard: React.FC<QuestionCardProps> = ({ question }) => {
const { t } = useI18n();
const respondToQuestion = sessionActions.respondToQuestion;
@@ -40,7 +105,8 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({ question }) => {
const [selectedOptions, setSelectedOptions] = React.useState<Record<number, string[]>>({});
const [customMode, setCustomMode] = React.useState<Record<number, boolean>>({});
const [customText, setCustomText] = React.useState<Record<number, string>>({});
const customTextRef = React.useRef<Record<number, string>>({});
const [customTextFilled, setCustomTextFilled] = React.useState<Record<number, boolean>>({});
const questions = React.useMemo(() => question.questions ?? [], [question.questions]);
const isSummaryTab = activeTab === SUMMARY_TAB;
@@ -56,7 +122,8 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({ question }) => {
setActiveTab('0');
setSelectedOptions({});
setCustomMode({});
setCustomText({});
customTextRef.current = {};
setCustomTextFilled({});
setHasResponded(false);
}, [question.id]);
@@ -76,12 +143,12 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({ question }) => {
const getAnswerDisplay = React.useCallback((index: number): string => {
const isCustom = Boolean(customMode[index]);
if (isCustom) {
const value = (customText[index] ?? '').trim();
const value = (customTextRef.current[index] ?? '').trim();
return value || t('chat.questionCard.noAnswer');
}
const answers = selectedOptions[index] ?? [];
return answers.length > 0 ? answers.join(', ') : t('chat.questionCard.noAnswer');
}, [customMode, customText, selectedOptions, t]);
}, [customMode, selectedOptions, t]);
const isMultiple = Boolean(activeQuestion?.multiple);
const selectedForActive = selectedOptions[activeIndex] ?? [];
@@ -92,8 +159,7 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({ question }) => {
for (let index = 0; index < questions.length; index += 1) {
const isCustom = Boolean(customMode[index]);
if (isCustom) {
const value = (customText[index] ?? '').trim();
if (!value) pending.push(index);
if (!customTextFilled[index]) pending.push(index);
continue;
}
@@ -103,7 +169,7 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({ question }) => {
}
}
return pending;
}, [customMode, customText, questions.length, selectedOptions]);
}, [customMode, customTextFilled, questions.length, selectedOptions]);
const requiredSatisfied = React.useMemo(() => {
if (questions.length === 0) return false;
@@ -131,7 +197,7 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({ question }) => {
for (let index = 0; index < questions.length; index += 1) {
const isCustom = Boolean(customMode[index]);
if (isCustom) {
const value = (customText[index] ?? '').trim();
const value = (customTextRef.current[index] ?? '').trim();
answers.push(value ? [value] : []);
continue;
}
@@ -140,13 +206,14 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({ question }) => {
}
return answers;
}, [customMode, customText, questions.length, selectedOptions]);
}, [customMode, questions.length, selectedOptions]);
const handleToggleOption = React.useCallback(
(label: string) => {
if (!activeQuestion) return;
setCustomMode((prev) => ({ ...prev, [activeIndex]: false }));
setCustomTextFilled((prev) => (prev[activeIndex] ? { ...prev, [activeIndex]: false } : prev));
setSelectedOptions((prev) => {
const current = prev[activeIndex] ?? [];
@@ -164,6 +231,14 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({ question }) => {
const handleSelectCustom = React.useCallback(() => {
setCustomMode((prev) => ({ ...prev, [activeIndex]: true }));
setSelectedOptions((prev) => ({ ...prev, [activeIndex]: [] }));
const hasValue = (customTextRef.current[activeIndex] ?? '').trim().length > 0;
setCustomTextFilled((prev) => (prev[activeIndex] === hasValue ? prev : { ...prev, [activeIndex]: hasValue }));
}, [activeIndex]);
const handleCustomValueChange = React.useCallback((value: string) => {
customTextRef.current[activeIndex] = value;
const hasValue = value.trim().length > 0;
setCustomTextFilled((prev) => (prev[activeIndex] === hasValue ? prev : { ...prev, [activeIndex]: hasValue }));
}, [activeIndex]);
const handleConfirm = React.useCallback(async () => {
@@ -438,32 +513,12 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({ question }) => {
{isCustomActive ? (
<div className="pl-6 pr-1 pt-0.5">
<textarea
ref={(el) => {
if (el) {
el.style.height = 'auto';
const lineHeight = 20; // approx typography-meta line height
const minHeight = lineHeight * 2;
const maxHeight = lineHeight * 4;
el.style.height = `${Math.min(Math.max(el.scrollHeight, minHeight), maxHeight)}px`;
}
}}
value={customText[activeIndex] ?? ''}
onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) => {
const el = event.target;
el.style.height = 'auto';
const lineHeight = 20;
const minHeight = lineHeight * 2;
const maxHeight = lineHeight * 4;
el.style.height = `${Math.min(Math.max(el.scrollHeight, minHeight), maxHeight)}px`;
setCustomText((prev) => ({ ...prev, [activeIndex]: el.value }));
}}
<CustomAnswerTextarea
value={customTextRef.current[activeIndex] ?? ''}
onValueChange={handleCustomValueChange}
placeholder={t('chat.questionCard.yourAnswer')}
disabled={isResponding}
rows={2}
onKeyDown={handleKeyDown}
className="w-full bg-transparent border border-border/30 focus:border-primary rounded px-2 py-1 outline-none typography-meta text-foreground placeholder:text-muted-foreground/50 transition-colors resize-none overflow-hidden"
autoFocus
/>
</div>
) : null}
packages/ui/src/components/chat/__tests__/questionTextareaSizing.test.ts
+18
View File
@@ -0,0 +1,18 @@
import { describe, expect, test } from 'bun:test';
import { QUESTION_CUSTOM_TEXTAREA_MIN_HEIGHT, getQuestionCustomTextareaHeight } from '../questionTextareaSizing';
describe('getQuestionCustomTextareaHeight', () => {
test('exports the initial textarea height', () => {
expect(QUESTION_CUSTOM_TEXTAREA_MIN_HEIGHT).toBe(40);
});
test('returns null when the textarea is already at the target height', () => {
expect(getQuestionCustomTextareaHeight({ scrollHeight: 60, currentHeight: 60 })).toBeNull();
});
test('clamps textarea height between two and ten lines', () => {
expect(getQuestionCustomTextareaHeight({ scrollHeight: 10, currentHeight: 0 })).toBe(40);
expect(getQuestionCustomTextareaHeight({ scrollHeight: 120, currentHeight: 0 })).toBe(120);
expect(getQuestionCustomTextareaHeight({ scrollHeight: 260, currentHeight: 0 })).toBe(200);
});
});
packages/ui/src/components/chat/questionTextareaSizing.ts
+18
View File
@@ -0,0 +1,18 @@
const QUESTION_TEXTAREA_LINE_HEIGHT = 20;
const QUESTION_TEXTAREA_MIN_LINES = 2;
const QUESTION_TEXTAREA_MAX_LINES = 10;
export const QUESTION_CUSTOM_TEXTAREA_MIN_HEIGHT = QUESTION_TEXTAREA_LINE_HEIGHT * QUESTION_TEXTAREA_MIN_LINES;
export function getQuestionCustomTextareaHeight({
scrollHeight,
currentHeight,
}: {
scrollHeight: number;
currentHeight: number | null | undefined;
}): number | null {
const maxHeight = QUESTION_TEXTAREA_LINE_HEIGHT * QUESTION_TEXTAREA_MAX_LINES;
const nextHeight = Math.min(Math.max(scrollHeight, QUESTION_CUSTOM_TEXTAREA_MIN_HEIGHT), maxHeight);
return currentHeight === nextHeight ? null : nextHeight;
}