fix why not shown

Author: zAlweNy26

src/components/MessageBox.vue

@@ -124,10 +124,12 @@ const fileUrl = computed(() => {
 					</div>
 				</div>
 			</div>
-			<div v-if="why" class="divider divider-horizontal m-0 w-px before:bg-base-200 after:bg-base-200" />
-			<button v-if="why" class="btn btn-circle btn-xs mx-2 border-0 bg-neutral/20 text-neutral" @click="whyPanel?.togglePanel()">
-				<p class="text-base">?</p>
-			</button>
+			<template v-if="why">
+				<div class="divider divider-horizontal m-0 w-px before:bg-base-200 after:bg-base-200" />
+				<button class="btn btn-circle btn-xs mx-2 border-0 bg-neutral/20 text-neutral" @click="whyPanel?.togglePanel()">
+					<p class="text-base">?</p>
+				</button>
+			</template>
 		</div>
 		<div v-if="sender === 'bot'" class="chat-footer mt-1 flex gap-1">
 			<div class="tooltip tooltip-bottom" data-tip="Copy">

src/models/Message.ts

@@ -14,7 +14,7 @@ export interface MessageBase {
  */
 export interface BotMessage extends MessageBase {
 	readonly sender: 'bot'
-	readonly why: any
+	why: any
 }
 
 /**

src/stores/useMessages.ts

@@ -87,6 +87,7 @@ export const useMessages = defineStore('messages', () => {
 						if (currentState.generating) {
 							const index = currentState.messages.findIndex(m => m.id === currentState.generating)
 							currentState.messages[index].text = content
+							if (currentState.messages[index].sender === 'bot') currentState.messages[index].why = why
 							currentState.generating = undefined
 						} else {
 							addMessage({
@@ -173,6 +174,7 @@ export const useMessages = defineStore('messages', () => {
 
 	return {
 		currentState,
+		history,
 		addMessage,
 		selectRandomDefaultMessages,
 		dispatchMessage,

src/views/HomeView.vue

@@ -170,7 +170,10 @@ const generatePlaceholder = (isLoading: boolean, isRecording: boolean, error?: s
 
 const wipeHistory = async () => {
 	const res = await wipeConversation()
-	if (res) messagesState.value.messages = []
+	if (res) {
+		messagesState.value.messages = []
+		messagesStore.history = []
+	}
 }
 
 const scrollToBottom = () => {