Skip to content

Commit 48a433e

Browse files
EvilFreelancerEvilFreelancer
authored
Merge pull request #164 from vamplabAI/frontend-hotfix
Tunes of styles and endpoints
2 parents 6e31fab + e2974b5 commit 48a433e

File tree

11 files changed

+170
-46
lines changed

11 files changed

+170
-46
lines changed

‎sgr-agent-frontend/package-lock.json‎

Lines changed: 14 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎sgr-agent-frontend/src/features/chat-message/ui/AgentReasoningStep.vue‎

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
<template>
2-
<div class="agent-reasoning-step">
2+
<div class="agent-reasoning-step" :class="{ 'agent-reasoning-step--collapsed': isCollapsed }">
33
<div class="agent-reasoning-step__header" @click="toggleCollapsed">
44
<div class="agent-reasoning-step__title">
55
<span class="agent-reasoning-step__reasoning">{{ step.reasoning }}</span>
66
<span class="agent-reasoning-step__tool-name">{{
77
getToolDisplayName(step.tool_name_discriminator)
88
}}</span>
99
</div>
10-
<div class="agent-reasoning-step__toggle">
11-
<AppIconChevronDown24 :class="{ 'agent-reasoning-step__chevron--rotated': !isCollapsed }" />
10+
<div v-if="hasContent" class="agent-reasoning-step__toggle">
11+
<AppIconChevronDown24 :class="{ 'agent-reasoning-step__chevron--rotated': isCollapsed }" />
1212
</div>
1313
</div>
1414

15-
<div v-if="!isCollapsed" class="agent-reasoning-step__content">
15+
<div v-if="!isCollapsed && hasContent" class="agent-reasoning-step__content">
1616
<!-- Web Search Tool -->
1717
<div
1818
v-if="step.tool_name_discriminator === 'websearchtool'"
@@ -103,7 +103,7 @@
103103
</template>
104104

105105
<script setup lang="ts">
106-
import { ref } from 'vue'
106+
import { ref, computed } from 'vue'
107107
import AppIconChevronDown24 from '@/shared/ui/icons/AppIconChevronDown24.vue'
108108
109109
interface ReasoningStep {
@@ -118,7 +118,7 @@ interface ReasoningStep {
118118
status?: string
119119
}
120120
121-
defineProps<{
121+
const props = defineProps<{
122122
step: ReasoningStep
123123
}>()
124124
@@ -128,6 +128,19 @@ const toggleCollapsed = () => {
128128
isCollapsed.value = !isCollapsed.value
129129
}
130130
131+
// Check if content is empty
132+
const hasContent = computed(() => {
133+
return !!(
134+
props.step.query ||
135+
(props.step.urls && props.step.urls.length > 0) ||
136+
props.step.title ||
137+
props.step.content ||
138+
(props.step.completed_steps && props.step.completed_steps.length > 0) ||
139+
props.step.status
140+
)
141+
})
142+
</script>
143+
131144
const getToolDisplayName = (toolName: string): string => {
132145
const toolNames: Record<string, string> = {
133146
websearchtool: 'Web Search',

‎sgr-agent-frontend/src/features/chat-message/ui/tools/ClarificationToolDisplay.vue‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
<template>
2-
<div class="agent-reasoning-step">
2+
<div class="agent-reasoning-step" :class="{ 'agent-reasoning-step--collapsed': isCollapsed, 'agent-reasoning-step--empty': !hasContent }">
33
<div class="agent-reasoning-step__header" @click="toggleCollapsed">
44
<div class="agent-reasoning-step__title">
55
<span class="agent-reasoning-step__reasoning">{{ data.reasoning }}</span>
66
<span class="agent-reasoning-step__tool-name">CLARIFICATIONTOOL</span>
77
</div>
8-
<div class="agent-reasoning-step__toggle">
8+
<div v-if="hasContent" class="agent-reasoning-step__toggle">
99
<AppIconChevronDown24
10-
:class="{ 'agent-reasoning-step__chevron--rotated': !isCollapsed }"
10+
:class="{ 'agent-reasoning-step__chevron--rotated': isCollapsed }"
1111
/>
1212
</div>
1313
</div>
1414

15-
<div v-if="!isCollapsed" class="agent-reasoning-step__content">
15+
<div v-if="!isCollapsed && hasContent" class="agent-reasoning-step__content">
1616
<div class="agent-reasoning-step__details">
1717
<!-- Questions -->
1818
<div v-if="data.questions && data.questions.length" class="agent-reasoning-step__field">
@@ -61,7 +61,7 @@
6161
</template>
6262

6363
<script setup lang="ts">
64-
import { ref } from 'vue'
64+
import { ref, computed } from 'vue'
6565
import AppIconChevronDown24 from '@/shared/ui/icons/AppIconChevronDown24.vue'
6666
6767
interface Props {
@@ -73,11 +73,20 @@ interface Props {
7373
}
7474
}
7575
76-
defineProps<Props>()
76+
const props = defineProps<Props>()
7777
7878
const isCollapsed = ref(true)
7979
8080
const toggleCollapsed = () => {
8181
isCollapsed.value = !isCollapsed.value
8282
}
83+
84+
// Check if content is empty
85+
const hasContent = computed(() => {
86+
return !!(
87+
(props.data.questions && props.data.questions.length > 0) ||
88+
(props.data.unclear_terms && props.data.unclear_terms.length > 0) ||
89+
(props.data.assumptions && props.data.assumptions.length > 0)
90+
)
91+
})
8392
</script>

‎sgr-agent-frontend/src/features/chat-message/ui/tools/ExtractPageContentToolDisplay.vue‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
<template>
2-
<div class="agent-reasoning-step">
2+
<div class="agent-reasoning-step" :class="{ 'agent-reasoning-step--collapsed': isCollapsed, 'agent-reasoning-step--empty': !hasContent }">
33
<div class="agent-reasoning-step__header" @click="toggleCollapsed">
44
<div class="agent-reasoning-step__title">
55
<span class="agent-reasoning-step__reasoning">{{ data.reasoning }}</span>
66
<span class="agent-reasoning-step__tool-name">EXTRACTPAGECONTENTTOOL</span>
77
</div>
88
<div class="agent-reasoning-step__toggle">
99
<AppIconChevronDown24
10-
:class="{ 'agent-reasoning-step__chevron--rotated': !isCollapsed }"
10+
:class="{ 'agent-reasoning-step__chevron--rotated': isCollapsed }"
1111
/>
1212
</div>
1313
</div>
1414

15-
<div v-if="!isCollapsed" class="agent-reasoning-step__content">
15+
<div v-if="!isCollapsed && hasContent" class="agent-reasoning-step__content">
1616
<div class="agent-reasoning-step__details">
1717
<!-- URLs -->
1818
<div v-if="data.urls && data.urls.length" class="agent-reasoning-step__field">
@@ -36,7 +36,7 @@
3636
</template>
3737

3838
<script setup lang="ts">
39-
import { ref } from 'vue'
39+
import { ref, computed } from 'vue'
4040
import AppIconChevronDown24 from '@/shared/ui/icons/AppIconChevronDown24.vue'
4141
4242
interface Props {
@@ -46,11 +46,16 @@ interface Props {
4646
}
4747
}
4848
49-
defineProps<Props>()
49+
const props = defineProps<Props>()
5050
5151
const isCollapsed = ref(true)
5252
5353
const toggleCollapsed = () => {
5454
isCollapsed.value = !isCollapsed.value
5555
}
56+
57+
// Check if content is empty
58+
const hasContent = computed(() => {
59+
return !!(props.data.urls && props.data.urls.length > 0)
60+
})
5661
</script>

‎sgr-agent-frontend/src/features/chat-message/ui/tools/FinalAnswerToolDisplay.vue‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
<template>
2-
<div class="agent-reasoning-step agent-reasoning-step--final-answer">
2+
<div class="agent-reasoning-step agent-reasoning-step--final-answer" :class="{ 'agent-reasoning-step--collapsed': isCollapsed }">
33
<div class="agent-reasoning-step__header" @click="toggleCollapsed">
44
<div class="agent-reasoning-step__title">
55
<span class="agent-reasoning-step__reasoning">✅ Final Answer</span>
66
<span class="agent-reasoning-step__tool-name">FINALANSWERTOOL</span>
77
</div>
8-
<div class="agent-reasoning-step__toggle">
8+
<div v-if="hasContent" class="agent-reasoning-step__toggle">
99
<AppIconChevronDown24
10-
:class="{ 'agent-reasoning-step__chevron--rotated': !isCollapsed }"
10+
:class="{ 'agent-reasoning-step__chevron--rotated': isCollapsed }"
1111
/>
1212
</div>
1313
</div>
1414

15-
<div v-if="!isCollapsed" class="agent-reasoning-step__content">
15+
<div v-if="!isCollapsed && hasContent" class="agent-reasoning-step__content">
1616
<div class="agent-reasoning-step__details">
1717
<!-- Completed Steps -->
1818
<div v-if="data.completed_steps && data.completed_steps.length" class="agent-reasoning-step__field">
@@ -48,7 +48,7 @@
4848
</template>
4949

5050
<script setup lang="ts">
51-
import { ref } from 'vue'
51+
import { ref, computed } from 'vue'
5252
import AppIconChevronDown24 from '@/shared/ui/icons/AppIconChevronDown24.vue'
5353
import { MarkdownRenderer } from '@/shared/ui'
5454
@@ -61,11 +61,20 @@ interface Props {
6161
}
6262
}
6363
64-
defineProps<Props>()
64+
const props = defineProps<Props>()
6565
6666
const isCollapsed = ref(false) // Start expanded to show final answer immediately
6767
6868
const toggleCollapsed = () => {
6969
isCollapsed.value = !isCollapsed.value
7070
}
71+
72+
// Check if content is empty
73+
const hasContent = computed(() => {
74+
return !!(
75+
(props.data.completed_steps && props.data.completed_steps.length > 0) ||
76+
props.data.answer ||
77+
props.data.status
78+
)
79+
})
7180
</script>

‎sgr-agent-frontend/src/features/chat-message/ui/tools/GenericToolDisplay.vue‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="agent-reasoning-step">
2+
<div class="agent-reasoning-step" :class="{ 'agent-reasoning-step--collapsed': isCollapsed, 'agent-reasoning-step--empty': !hasContent }">
33
<div class="agent-reasoning-step__header" @click="toggleCollapsed">
44
<div class="agent-reasoning-step__title">
55
<span class="agent-reasoning-step__reasoning">
@@ -11,7 +11,7 @@
1111
</div>
1212
<div class="agent-reasoning-step__toggle">
1313
<AppIconChevronDown24
14-
:class="{ 'agent-reasoning-step__chevron--rotated': !isCollapsed }"
14+
:class="{ 'agent-reasoning-step__chevron--rotated': isCollapsed }"
1515
/>
1616
</div>
1717
</div>
@@ -28,18 +28,23 @@
2828
</template>
2929

3030
<script setup lang="ts">
31-
import { ref } from 'vue'
31+
import { ref, computed } from 'vue'
3232
import AppIconChevronDown24 from '@/shared/ui/icons/AppIconChevronDown24.vue'
3333
3434
interface Props {
3535
step: any
3636
}
3737
38-
defineProps<Props>()
38+
const props = defineProps<Props>()
3939
4040
const isCollapsed = ref(true)
4141
4242
const toggleCollapsed = () => {
4343
isCollapsed.value = !isCollapsed.value
4444
}
45+
46+
// Check if content is empty (has at least some data)
47+
const hasContent = computed(() => {
48+
return props.step && Object.keys(props.step).length > 0
49+
})
4550
</script>

0 commit comments

Comments
 (0)