UI fix chatbot improvements (#487)
* feat: Improve feedback display for print settings * fix(alert-comment): Prevent comment content overflow * feat: chatbot clear history feature * fix: chatbot drawer --------- Co-authored-by: Davide Di Modica <webmaster.ddm@gmail.com>
taylor_socfortress committed
Aug 10, 2025 at 09:05 UTC
f31fda7ef129bf33a7126afe3e320b917d6fe8db
4 files changed
+34
-8
frontend/src/components/aiChatbot/ChatButton.vue
+17
-3
@@ -20,20 +20,34 @@
20
:trap-focus="false"
21
resizable
22
>
23
- <n-drawer-content title="AI Chatbot" closable body-content-class="p-0! overflow-hidden! flex flex-col">
24
- <ChatContainer class="grow" />
23
+ <n-drawer-content closable body-content-class="p-0! overflow-hidden! flex flex-col">
24
+ <template #header>
25
+ <div class="mr-4 flex items-center justify-between gap-4">
26
+ <span>AI Chatbot</span>
27
+ <n-tooltip v-if="chatContainerCTX">
28
+ <template #trigger>
29
+ <n-button text @click="chatContainerCTX.clearHistory()">
30
+ <Icon name="mdi:broom" :size="18" />
31
+ </n-button>
32
+ </template>
33
+ Clear chat history
34
+ </n-tooltip>
35
+ </div>
36
+ </template>
37
+ <ChatContainer class="grow" @mounted="chatContainerCTX = $event" />
38
</n-drawer-content>
39
</n-drawer>
40
</div>
41
</template>
42
43
<script setup lang="ts">
31
-import { NDrawer, NDrawerContent, NFloatButton, NTooltip } from "naive-ui"
44
+import { NButton, NDrawer, NDrawerContent, NFloatButton, NTooltip } from "naive-ui"
45
import { ref } from "vue"
46
import Icon from "@/components/common/Icon.vue"
47
import ChatContainer from "./ChatContainer.vue"
48
49
const showDrawer = ref(false)
50
+const chatContainerCTX = ref<{ clearHistory: () => void } | null>(null)
51
</script>
52
53
<style lang="scss" scoped>
frontend/src/components/aiChatbot/ChatContainer.vue
+10
@@ -61,6 +61,10 @@ import ChatBubbleBlock from "./ChatBubble.vue"
61
import ChatQuery from "./ChatQuery.vue"
62
import ChatQuestions from "./ChatQuestions.vue"
63
64
+const emit = defineEmits<{
65
+ (e: "mounted", value: { clearHistory: () => void }): void
66
+}>()
67
+
68
const message = useMessage()
69
70
const list: RemovableRef<ChatBubble[]> = useStorage<ChatBubble[]>(
@@ -184,11 +188,17 @@ function sendQuery(payload: Message) {
188
})
189
}
190
191
+function clearHistory() {
192
+ list.value = []
193
+}
194
+
195
onBeforeMount(() => {
196
setAllOld()
197
})
198
199
onMounted(() => {
200
scrollChat()
201
+
202
+ emit("mounted", { clearHistory })
203
})
204
</script>
frontend/src/components/incidentManagement/alerts/AlertComment.vue
+1
-1
@@ -3,7 +3,7 @@
3
<div v-if="userPic" class="user-pic">
4
<n-avatar round :size="32" :src="userPic" />
5
</div>
6
- <div class="comment flex grow flex-col gap-1">
6
+ <div class="comment flex grow flex-col gap-1 overflow-hidden">
7
<div class="user flex items-center gap-3">
8
<div class="user-name">
9
{{ comment.user_name }}
frontend/src/components/reportCreation/PrintSettings.vue
+6
-4
@@ -19,19 +19,21 @@
19
</div>
20
</div>
21
22
- <div class="theme">
23
- <n-form-item label="Theme" feedback="⊙ choose panels palette">
22
+ <div class="flex flex-col gap-2">
23
+ <n-form-item label="Theme" :show-feedback="false">
24
<n-radio-group v-model:value="theme">
25
<n-radio-button value="light">Light</n-radio-button>
26
<n-radio-button value="dark">Dark</n-radio-button>
27
</n-radio-group>
28
</n-form-item>
29
+ <div class="text-secondary text-sm">⊙ choose panels palette</div>
30
</div>
31
31
- <div class="retina">
32
- <n-form-item label="Retina" feedback="⊙ improve panels resolution; it will increase the report size">
32
+ <div class="flex flex-col gap-2">
33
+ <n-form-item label="Retina" :show-feedback="false">
34
<n-switch v-model:value="retina" />
35
</n-form-item>
36
+ <div class="text-secondary text-sm">⊙ improve panels resolution; it will increase the report size</div>
37
</div>
38
</div>
39
</template>