Skip to content

Commit 5bfbf38

Browse files
yaroslav8765yaroslav8765
committed
fix: make reasoning expand-collapse animation smooth
1 parent a659e44 commit 5bfbf38

3 files changed

Lines changed: 51 additions & 46 deletions

File tree

‎custom/conversation_area/ProcessingTimeline.vue‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,16 @@
1818
behavior="smooth"
1919
v-if="ToolOrReasoningParts.length > 0"
2020
v-show="isExpanded"
21+
:threshold="5"
2122
:wrapperStyle="{
2223
marginRight: '8rem',
2324
}"
2425
>
25-
<ol class="ml-8 relative border-l border-l-2 border-black border-default border-listTableHeadingText dark:border-darkListTableHeadingText">
26-
<li class="mb-6 ms-2 z-50" v-for="(part, index) in ToolOrReasoningParts" :key="index">
26+
<ol class="ml-8 my-2 relative border-l border-l-2 border-black border-default border-listTableHeadingText dark:border-darkListTableHeadingText">
27+
<template v-for="(part, index) in ToolOrReasoningParts" :key="index">
2728
<ReasoningRenderer v-if="part.type === 'reasoning'" :state="part.state" :text="part.text" />
28-
<ToolsGroup v-else :toolGroup="groupToolCallParts(message, part)" />
29-
</li>
29+
<ToolsGroup v-else-if="part.type==='data-tool-call'" :toolGroup="groupToolCallParts(message, part)" />
30+
</template>
3031
</ol>
3132
</CustomAutoScrollContainer>
3233
</transition>

‎custom/conversation_area/ReasoningRenderer.vue‎

Lines changed: 30 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,35 @@
11
<template>
2-
<span class="bg-lightNavbar dark:bg-darkNavbar absolute flex items-center text-listTableHeadingText dark:text-darkListTableHeadingText justify-center w-5 h-5 bg-brand-softer rounded-full -start-[0.68rem] ring-4 ring-lightNavbar dark:ring-darkNavbar ring-default">
3-
<div class="w-5 h-5 rounded-full flex items-center justify-center">
4-
<IconBrainOutline class="w-4 h-4" />
5-
</div>
6-
</span>
7-
<h3
8-
class="flex items-center mb-1 text-sm my-2 ml-3 gap-1 cursor-pointer select-none hover:opacity-80 text-listTableHeadingText dark:text-darkListTableHeadingText"
9-
@click="isExpanded = !isExpanded"
10-
>
11-
<span class="font-semibold">{{ reasoningTitle }}</span>
12-
<ThreeDotsAnimation v-if="isStreaming"/>
13-
<IconAngleDownOutline
14-
:class="isExpanded ? 'rotate-180' : 'rotate-0'"
15-
class="transition-transform duration-200"
16-
/>
17-
</h3>
18-
<transition name="expand">
19-
<CustomAutoScrollContainer
20-
v-if="isExpanded" v-show="isExpanded" class="mb-4 text-sm max-h-64 pl-4"
21-
:wrapperStyle="{
22-
marginRight: '8rem',
23-
}"
24-
:enabled="isStreaming"
2+
<li class="mb-6 ms-2 z-50 overflow-hidden">
3+
<span class="bg-lightNavbar dark:bg-darkNavbar absolute flex items-center text-listTableHeadingText dark:text-darkListTableHeadingText justify-center w-5 h-5 bg-brand-softer rounded-full -start-[0.68rem] ring-4 ring-lightNavbar dark:ring-darkNavbar ring-default">
4+
<div class="w-5 h-5 rounded-full flex items-center justify-center">
5+
<IconBrainOutline class="w-4 h-4" />
6+
</div>
7+
</span>
8+
<h3
9+
class=" flex items-center mb-1 text-sm ml-3 gap-1 cursor-pointer select-none hover:opacity-80 text-listTableHeadingText dark:text-darkListTableHeadingText"
10+
@click="isExpanded = !isExpanded"
2511
>
26-
<IncremarkContent
27-
:content="reasoningText"
12+
<span class="font-semibold">{{ reasoningTitle }}</span>
13+
<ThreeDotsAnimation v-if="isStreaming"/>
14+
<IconAngleDownOutline
15+
:class="isExpanded ? 'rotate-180' : 'rotate-0'"
16+
class="transition-transform duration-200"
2817
/>
29-
</CustomAutoScrollContainer>
30-
</transition>
18+
</h3>
19+
<transition name="expand">
20+
<CustomAutoScrollContainer
21+
v-if="isExpanded" v-show="isExpanded" class="mb-4 text-sm max-h-64 pl-4"
22+
:wrapperStyle="{
23+
marginRight: '8rem',
24+
}"
25+
:enabled="isStreaming"
26+
>
27+
<IncremarkContent
28+
:content="reasoningText"
29+
/>
30+
</CustomAutoScrollContainer>
31+
</transition>
32+
</li>
3133
</template>
3234

3335

@@ -67,7 +69,7 @@ watch(() => props.state, (newValue: IPart['state']) => {
6769
<style scoped>
6870
.expand-enter-active,
6971
.expand-leave-active {
70-
transition: all 0.3s ease;
72+
transition: all 300ms ease;
7173
}
7274
7375
.expand-enter-from,

‎custom/conversation_area/ToolsGroup.vue‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
11
<template >
22
<template v-if="toolGroup.length > 0">
3-
<span class="text-listTableHeadingText dark:text-darkListTableHeadingText bg-lightNavbar dark:bg-darkNavbar absolute flex items-center justify-center w-5 h-5 bg-brand-softer rounded-full -start-[0.68rem] ring-4 ring-lightNavbar dark:ring-darkNavbar ring-default">
4-
<div class="w-5 h-5 rounded-full flex items-center justify-center">
5-
<IconWrenchSolid class="w-4 h-4" />
3+
<li class="mb-6 ms-2 z-50">
4+
<span class="text-listTableHeadingText dark:text-darkListTableHeadingText bg-lightNavbar dark:bg-darkNavbar absolute flex items-center justify-center w-5 h-5 bg-brand-softer rounded-full -start-[0.68rem] ring-4 ring-lightNavbar dark:ring-darkNavbar ring-default">
5+
<div class="w-5 h-5 rounded-full flex items-center justify-center">
6+
<IconWrenchSolid class="w-4 h-4" />
7+
</div>
8+
</span>
9+
<h3
10+
class="flex items-center mb-1 text-sm my-2 ml-3 gap-1 text-listTableHeadingText dark:text-darkListTableHeadingText"
11+
>
12+
<span class="font-semibold select-none ">Call tools</span>
13+
</h3>
14+
<div class="flex flex-wrap">
15+
<template v-for="group in props.toolGroup" :key="group.title">
16+
<ToolRenderer v-for="part in group.groupedTools" :key="part.toolInfo.toolCallId" :data="part"/>
17+
</template>
618
</div>
7-
</span>
8-
<h3
9-
class="flex items-center mb-1 text-sm my-2 ml-3 gap-1 text-listTableHeadingText dark:text-darkListTableHeadingText"
10-
>
11-
<span class="font-semibold select-none ">Call tools</span>
12-
</h3>
13-
<div class="flex flex-wrap">
14-
<template v-for="group in props.toolGroup" :key="group.title">
15-
<ToolRenderer v-for="part in group.groupedTools" :key="part.toolInfo.toolCallId" :data="part"/>
16-
</template>
17-
</div>
19+
</li>
1820
</template>
1921
</template>
2022

0 commit comments

Comments
 (0)