fix(ui): smooth reasoning collapse animation
This commit is contained in:
@@ -209,7 +209,7 @@ export const ReasoningTimelineBlock: React.FC<ReasoningTimelineBlockProps> = ({
|
|||||||
|
|
||||||
{isStreaming ? (
|
{isStreaming ? (
|
||||||
<span className="flex items-center gap-1 typography-meta font-medium" style={{ color: 'var(--tools-title)' }}>
|
<span className="flex items-center gap-1 typography-meta font-medium" style={{ color: 'var(--tools-title)' }}>
|
||||||
<span>{t('chat.reasoningTrace.reasoning')}</span>
|
<span>{t(variant === 'justification' ? 'chat.reasoningTrace.justification' : 'chat.reasoningTrace.thinking')}</span>
|
||||||
<BusyDots />
|
<BusyDots />
|
||||||
</span>
|
</span>
|
||||||
) : isExpanded ? (
|
) : isExpanded ? (
|
||||||
@@ -244,12 +244,17 @@ export const ReasoningTimelineBlock: React.FC<ReasoningTimelineBlockProps> = ({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Expanded content — left border matching ToolPart */}
|
{/* Expanded content — keep mounted so auto-collapse can animate smoothly. */}
|
||||||
{isExpanded && (
|
|
||||||
<div
|
<div
|
||||||
id={contentId}
|
id={contentId}
|
||||||
className="relative ml-2 pl-3 pb-1 pt-0.5"
|
aria-hidden={!isExpanded}
|
||||||
|
className={cn(
|
||||||
|
'grid transition-[grid-template-rows,opacity] duration-[350ms] ease-out motion-reduce:transition-none',
|
||||||
|
isExpanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0',
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
|
<div className="min-h-0 overflow-hidden">
|
||||||
|
<div className="relative ml-2 pl-3 pb-1 pt-0.5">
|
||||||
<span
|
<span
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
className="pointer-events-none absolute left-0 top-0 bottom-0 w-px"
|
className="pointer-events-none absolute left-0 top-0 bottom-0 w-px"
|
||||||
@@ -282,7 +287,8 @@ export const ReasoningTimelineBlock: React.FC<ReasoningTimelineBlockProps> = ({
|
|||||||
) : null}
|
) : null}
|
||||||
</ScrollableOverlay>
|
</ScrollableOverlay>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1687,7 +1687,6 @@ export const dict = {
|
|||||||
'chat.modelControls.modeValue.all': 'All',
|
'chat.modelControls.modeValue.all': 'All',
|
||||||
'chat.modelControls.modeValue.none': '—',
|
'chat.modelControls.modeValue.none': '—',
|
||||||
'chat.reasoningTrace.thinking': 'Thinking',
|
'chat.reasoningTrace.thinking': 'Thinking',
|
||||||
'chat.reasoningTrace.reasoning': 'Reasoning',
|
|
||||||
'chat.reasoningTrace.justification': 'Justification',
|
'chat.reasoningTrace.justification': 'Justification',
|
||||||
'chat.reasoningTrace.expandAria': 'Expand reasoning trace',
|
'chat.reasoningTrace.expandAria': 'Expand reasoning trace',
|
||||||
'chat.reasoningTrace.collapseAria': 'Collapse reasoning trace',
|
'chat.reasoningTrace.collapseAria': 'Collapse reasoning trace',
|
||||||
|
|||||||
@@ -1653,7 +1653,6 @@ export const dict: Record<I18nKey, string> = {
|
|||||||
"chat.modelControls.modeValue.all": "Todos",
|
"chat.modelControls.modeValue.all": "Todos",
|
||||||
"chat.modelControls.modeValue.none": "—",
|
"chat.modelControls.modeValue.none": "—",
|
||||||
"chat.reasoningTrace.thinking": "Pensando",
|
"chat.reasoningTrace.thinking": "Pensando",
|
||||||
"chat.reasoningTrace.reasoning": "Razonando",
|
|
||||||
"chat.reasoningTrace.justification": "Justificación",
|
"chat.reasoningTrace.justification": "Justificación",
|
||||||
"chat.reasoningTrace.expandAria": "Expandir traza de razonamiento",
|
"chat.reasoningTrace.expandAria": "Expandir traza de razonamiento",
|
||||||
"chat.reasoningTrace.collapseAria": "Contraer traza de razonamiento",
|
"chat.reasoningTrace.collapseAria": "Contraer traza de razonamiento",
|
||||||
|
|||||||
@@ -1687,7 +1687,6 @@ export const dict: Record<I18nKey, string> = {
|
|||||||
'chat.modelControls.modeValue.all': '전체',
|
'chat.modelControls.modeValue.all': '전체',
|
||||||
'chat.modelControls.modeValue.none': '—',
|
'chat.modelControls.modeValue.none': '—',
|
||||||
'chat.reasoningTrace.thinking': '추론',
|
'chat.reasoningTrace.thinking': '추론',
|
||||||
'chat.reasoningTrace.reasoning': '추론 중',
|
|
||||||
'chat.reasoningTrace.justification': '근거',
|
'chat.reasoningTrace.justification': '근거',
|
||||||
'chat.reasoningTrace.expandAria': '추론 트레이스 펼치기',
|
'chat.reasoningTrace.expandAria': '추론 트레이스 펼치기',
|
||||||
'chat.reasoningTrace.collapseAria': '추론 트레이스 접기',
|
'chat.reasoningTrace.collapseAria': '추론 트레이스 접기',
|
||||||
|
|||||||
@@ -890,7 +890,6 @@ export const dict: Record<I18nKey, string> = {
|
|||||||
'chat.messageBody.subtask.showPrompt': 'Pokaż prompt',
|
'chat.messageBody.subtask.showPrompt': 'Pokaż prompt',
|
||||||
'chat.messageBody.subtask.title': 'Zadanie delegowane',
|
'chat.messageBody.subtask.title': 'Zadanie delegowane',
|
||||||
'chat.reasoningTrace.thinking': 'Myślenie',
|
'chat.reasoningTrace.thinking': 'Myślenie',
|
||||||
'chat.reasoningTrace.reasoning': 'Rozumowanie',
|
|
||||||
'chat.reasoningTrace.justification': 'Uzasadnienie',
|
'chat.reasoningTrace.justification': 'Uzasadnienie',
|
||||||
'chat.reasoningTrace.expandAria': 'Rozwiń ślad rozumowania',
|
'chat.reasoningTrace.expandAria': 'Rozwiń ślad rozumowania',
|
||||||
'chat.reasoningTrace.collapseAria': 'Zwiń ślad rozumowania',
|
'chat.reasoningTrace.collapseAria': 'Zwiń ślad rozumowania',
|
||||||
|
|||||||
@@ -1653,7 +1653,6 @@ export const dict: Record<I18nKey, string> = {
|
|||||||
"chat.modelControls.modeValue.all": "Todos",
|
"chat.modelControls.modeValue.all": "Todos",
|
||||||
"chat.modelControls.modeValue.none": "—",
|
"chat.modelControls.modeValue.none": "—",
|
||||||
"chat.reasoningTrace.thinking": "Pensando",
|
"chat.reasoningTrace.thinking": "Pensando",
|
||||||
"chat.reasoningTrace.reasoning": "Raciocinando",
|
|
||||||
"chat.reasoningTrace.justification": "Justificativa",
|
"chat.reasoningTrace.justification": "Justificativa",
|
||||||
"chat.reasoningTrace.expandAria": "Expandir rastro de raciocínio",
|
"chat.reasoningTrace.expandAria": "Expandir rastro de raciocínio",
|
||||||
"chat.reasoningTrace.collapseAria": "Recolher rastro de raciocínio",
|
"chat.reasoningTrace.collapseAria": "Recolher rastro de raciocínio",
|
||||||
|
|||||||
@@ -1653,7 +1653,6 @@ export const dict: Record<I18nKey, string> = {
|
|||||||
"chat.modelControls.modeValue.all": "всі",
|
"chat.modelControls.modeValue.all": "всі",
|
||||||
"chat.modelControls.modeValue.none": "—",
|
"chat.modelControls.modeValue.none": "—",
|
||||||
"chat.reasoningTrace.thinking": "Міркування",
|
"chat.reasoningTrace.thinking": "Міркування",
|
||||||
"chat.reasoningTrace.reasoning": "Міркую",
|
|
||||||
"chat.reasoningTrace.justification": "Обґрунтування",
|
"chat.reasoningTrace.justification": "Обґрунтування",
|
||||||
"chat.reasoningTrace.expandAria": "Розгорнути слід міркування",
|
"chat.reasoningTrace.expandAria": "Розгорнути слід міркування",
|
||||||
"chat.reasoningTrace.collapseAria": "Згорнути слід міркування",
|
"chat.reasoningTrace.collapseAria": "Згорнути слід міркування",
|
||||||
|
|||||||
@@ -1653,7 +1653,6 @@ export const dict: Record<I18nKey, string> = {
|
|||||||
'chat.modelControls.modeValue.all': '全部',
|
'chat.modelControls.modeValue.all': '全部',
|
||||||
'chat.modelControls.modeValue.none': '—',
|
'chat.modelControls.modeValue.none': '—',
|
||||||
'chat.reasoningTrace.thinking': '思考',
|
'chat.reasoningTrace.thinking': '思考',
|
||||||
'chat.reasoningTrace.reasoning': '推理',
|
|
||||||
'chat.reasoningTrace.justification': '理由',
|
'chat.reasoningTrace.justification': '理由',
|
||||||
'chat.reasoningTrace.expandAria': '展开推理轨迹',
|
'chat.reasoningTrace.expandAria': '展开推理轨迹',
|
||||||
'chat.reasoningTrace.collapseAria': '折叠推理轨迹',
|
'chat.reasoningTrace.collapseAria': '折叠推理轨迹',
|
||||||
|
|||||||
Reference in New Issue
Block a user