11<template >
2- <div
3- class =" chat-container"
4- :class =" { 'empty-chat': messages.length === 0 }"
5- :data-status =" status"
6- >
2+ <div class =" chat-container" :class =" { 'empty-chat': messages.length === 0 }" :data-status =" status" >
73 <div class =" scroll-container" ref =" scrollContainerRef" >
84 <div class =" header" >
95 <button class =" btn btn-flat-2 settings-btn" @click =" $emit('open-configuration')" >
2016 </p >
2117 </div >
2218 <div class =" chat-messages" >
23- <message
24- v-for =" (message, index) in messages"
25- :key =" message.id"
26- :message =" message"
27- :pending-tool-call-ids =" pendingToolCallIds"
28- :status =" index === messages.length - 1 ? (status === 'ready' || status === 'error' ? 'ready' : 'processing') : 'ready'"
29- @accept-permission =" acceptPermission"
30- @reject-permission =" rejectPermission"
31- />
32- <div
33- class =" message error"
34- v-if =" isUnexpectedError"
35- >
19+ <template v-for =" (message , index ) in messages " :key =" message .id " >
20+ <message
21+ v-if ="
22+ !(message.role === 'assistant' && message.parts.find((p) => p.type === 'data-userEditedToolCall'))
23+ && !(message.role === 'user' && message.parts.find((p) => p.type === 'data-editedQuery'))
24+ "
25+ :message =" message"
26+ :pending-tool-call-ids =" pendingToolCallIds"
27+ :status =" index === messages.length - 1 ? (status === 'ready' || status === 'error' ? 'ready' : 'processing') : 'ready'"
28+ @accept-permission =" acceptPermission" @reject-permission =" handleRejectPermission" />
29+ </template >
30+ <div class =" message error" v-if =" isUnexpectedError" >
3631 <div class =" message-content" >
3732 Something went wrong.
3833 <div v-if =" isOllamaToolError" class =" error-hint" >
39- 💡 <strong >Hint:</strong > This might be because your Ollama model doesn't support tools. Try using a different model, or switch to a different provider.
34+ 💡 <strong >Hint:</strong > This might be because your Ollama model doesn't support tools. Try using a
35+ different model, or switch to a different provider.
4036 </div >
4137 <pre v-if =" !isErrorTruncated || showFullError" v-text =" error" />
4238 <pre v-else v-text =" truncatedError" />
43- <button
44- v-if =" isErrorTruncated"
45- @click =" showFullError = !showFullError"
46- class =" btn show-more-btn"
47- >
39+ <button v-if =" isErrorTruncated" @click =" showFullError = !showFullError" class =" btn show-more-btn" >
4840 {{ showFullError ? "Show less" : "Show more" }}
4941 </button >
5042 <button class =" btn" @click =" () => reload()" >
5345 </button >
5446 </div >
5547 </div >
56- <div
57- class =" message error"
58- v-if =" noModelError"
59- >
48+ <div class =" message error" v-if =" noModelError" >
6049 <div class =" message-content" >No model selected</div >
6150 </div >
62- <div
63- class =" spinner-container"
64- :style =" { visibility: showSpinner ? 'visible' : 'hidden' }"
65- >
51+ <div class =" spinner-container" :style =" { visibility: showSpinner ? 'visible' : 'hidden' }" >
6652 <span class =" spinner" />
6753 </div >
6854 </div >
69- <button
70- v-if =" !isAtBottom"
71- @click =" scrollToBottom({ smooth: true })"
72- class =" btn scroll-down-btn"
73- title =" Scroll to bottom"
74- >
55+ <button v-if =" !isAtBottom" @click =" scrollToBottom({ smooth: true })" class =" btn scroll-down-btn"
56+ title =" Scroll to bottom" >
7557 <span class =" material-symbols-outlined" >keyboard_arrow_down</span >
7658 </button >
7759 </div >
7860 <div class =" chat-input-container-container" >
7961 <PromptInput ref =" promptInput" storage-key =" inputHistory" :processing =" processing" :selected-model =" model"
80- @select-model =" selectModel" @manage-models =" $emit('manage-models')" @submit =" submit" @stop =" stop" />
62+ @select-model =" selectModel" @manage-models =" $emit('manage-models')" @submit =" submit" @stop =" stop" />
8163 </div >
8264 </div >
8365</template >
@@ -88,9 +70,9 @@ import { useChatStore, Model } from "@/stores/chat";
8870import _ from " lodash" ;
8971import Markdown from " @/components/messages/Markdown.vue" ;
9072import Message from " @/components/messages/Message.vue" ;
91- import { Message as MessageType } from " ai" ;
73+ import type { UIMessage } from " ai" ;
9274import { PropType } from " vue" ;
93- import { mapActions , mapGetters , mapState , mapWritableState } from " pinia" ;
75+ import { mapActions , mapGetters , mapWritableState } from " pinia" ;
9476import { RootBinding } from " @/plugins/appEvent" ;
9577import { useInternalDataStore } from " @/stores/internalData" ;
9678import BaseInput from " @/components/common/BaseInput.vue" ;
@@ -113,12 +95,9 @@ export default {
11395
11496 props: {
11597 initialMessages: {
116- type: Array as PropType <MessageType []>,
98+ type: Array as PropType <UIMessage []>,
11799 required: true ,
118100 },
119- anthropicApiKey: String ,
120- openaiApiKey: String ,
121- googleApiKey: String ,
122101 },
123102
124103 setup(props ) {
@@ -148,7 +127,7 @@ export default {
148127 },
149128
150129 computed: {
151- ... mapGetters (useChatStore , [" systemPrompt" ]),
130+ ... mapGetters (useChatStore , [" systemPrompt" , " sendOptions " ]),
152131 ... mapWritableState (useChatStore , [" model" ]),
153132 processing() {
154133 if (this .askingPermission ) return false ;
@@ -238,8 +217,8 @@ export default {
238217 // Calculate if we're near bottom (within 50px of bottom)
239218 const isNearBottom =
240219 scrollContainer .scrollHeight -
241- scrollContainer .scrollTop -
242- scrollContainer .clientHeight <
220+ scrollContainer .scrollTop -
221+ scrollContainer .clientHeight <
243222 50 ;
244223
245224 this .isAtBottom = isNearBottom ;
@@ -265,11 +244,11 @@ export default {
265244 this .rejectPermission ();
266245 }
267246
268- this .send (input , this .getSendOptions () );
247+ this .send (input , this .sendOptions );
269248 },
270249
271250 async reload() {
272- await this .retry (this .getSendOptions () );
251+ await this .retry (this .sendOptions );
273252 },
274253
275254 stop() {
@@ -300,17 +279,15 @@ export default {
300279 this .model = model ;
301280 },
302281
303- getSendOptions() {
304- if (! this .model ) {
305- throw new Error (" No model selected" );
306- }
307-
308- return {
309- modelId: this .model .id ,
310- providerId: this .model .provider ,
311- systemPrompt: this .systemPrompt ,
312- }
313- }
282+ handleRejectPermission(options : {
283+ toolCallId: string ;
284+ editedQuery? : string ;
285+ }) {
286+ this .rejectPermission ({
287+ ... options ,
288+ sendOptions: this .sendOptions ,
289+ });
290+ },
314291 },
315292};
316293 </script >
0 commit comments