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')"
139 </div >
1410 <h1 class =" plugin-title" h1 >
1511 <div class =" chat-messages"
16- <message
17- v-for =" (message, index) in messages"
18- :key =" message.id"
19- :message =" message"
12+ <message v-for =" (message, index) in messages" :key =" message.id" :message =" message"
2013 :pending-tool-call-ids =" pendingToolCallIds"
2114 :status =" index === messages.length - 1 ? (status === 'ready' || status === 'error' ? 'ready' : 'processing') : 'ready'"
22- @accept-permission =" acceptPermission"
23- @reject-permission =" rejectPermission"
24- />
25- <div
26- class =" message error"
27- v-if =" isUnexpectedError"
28- >
15+ @accept-permission =" acceptPermission" @reject-permission =" handleRejectPermission"
16+ <div class =" message error" v-if =" isUnexpectedError"
2917 <div class =" message-content"
3018 Something went wrong.
3119 <div v-if =" isOllamaToolError" class =" error-hint"
32- 💡 <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.
20+ 💡 <strong >Hint:</strong > This might be because your Ollama model doesn't support tools. Try using a
21+ different model, or switch to a different provider.
3322 </div >
3423 <pre v-if =" !isErrorTruncated || showFullError" v-text =" error"
3524 <pre v-else v-text =" truncatedError"
36- <button
37- v-if =" isErrorTruncated"
38- @click =" showFullError = !showFullError"
39- class =" btn show-more-btn"
40- >
25+ <button v-if =" isErrorTruncated" @click =" showFullError = !showFullError" class =" btn show-more-btn"
4126 {{ showFullError ? "Show less" : "Show more" }}
4227 </button >
4328 <button class =" btn" @click =" () => reload()"
4631 </button >
4732 </div >
4833 </div >
49- <div
50- class =" message error"
51- v-if =" noModelError"
52- >
34+ <div class =" message error" v-if =" noModelError"
5335 <div class =" message-content" div >
5436 </div >
55- <div
56- class =" spinner-container"
57- :style =" { visibility: showSpinner ? 'visible' : 'hidden' }"
58- >
37+ <div class =" spinner-container" :style =" { visibility: showSpinner ? 'visible' : 'hidden' }"
5938 <span class =" spinner"
6039 </div >
6140 </div >
62- <button
63- v-if =" !isAtBottom"
64- @click =" scrollToBottom({ smooth: true })"
65- class =" btn scroll-down-btn"
66- title =" Scroll to bottom"
67- >
41+ <button v-if =" !isAtBottom" @click =" scrollToBottom({ smooth: true })" class =" btn scroll-down-btn"
42+ title =" Scroll to bottom"
6843 <span class =" material-symbols-outlined" span >
6944 </button >
7045 </div >
7146 <div class =" chat-input-container-container"
7247 <PromptInput ref =" promptInput" storage-key =" inputHistory" :processing =" processing" :selected-model =" model"
73- @select-model =" selectModel" @manage-models =" $emit('manage-models')" @submit =" submit" @stop =" stop" />
48+ @select-model =" selectModel" @manage-models =" $emit('manage-models')" @submit =" submit" @stop =" stop"
7449 </div >
7550 </div >
7651</template >
@@ -81,9 +56,9 @@ import { useChatStore, Model } from "@/stores/chat";
8156import _ from " lodash"
8257import Markdown from " @/components/messages/Markdown.vue"
8358import Message from " @/components/messages/Message.vue"
84- import { Message as MessageType } from " ai"
59+ import type { UIMessage } from " ai"
8560import { PropType } from " vue"
86- import { mapActions , mapGetters , mapState , mapWritableState } from " pinia"
61+ import { mapActions , mapGetters , mapWritableState } from " pinia"
8762import { RootBinding } from " @/plugins/appEvent"
8863import { useInternalDataStore } from " @/stores/internalData"
8964import BaseInput from " @/components/common/BaseInput.vue"
@@ -103,12 +78,9 @@ export default {
10378
10479 props: {
10580 initialMessages: {
106- type: Array as PropType <MessageType []>,
81+ type: Array as PropType <UIMessage []>,
10782 required: true ,
10883 },
109- anthropicApiKey: String ,
110- openaiApiKey: String ,
111- googleApiKey: String ,
11284 },
11385
11486 setup(props ) {
@@ -137,7 +109,7 @@ export default {
137109 },
138110
139111 computed: {
140- ... mapGetters (useChatStore , [" systemPrompt"
112+ ... mapGetters (useChatStore , [" systemPrompt" , " sendOptions "
141113 ... mapWritableState (useChatStore , [" model"
142114 processing() {
143115 if (this .askingPermission ) return false ;
@@ -219,8 +191,8 @@ export default {
219191 // Calculate if we're near bottom (within 50px of bottom)
220192 const =
221193 scrollContainer .scrollHeight -
222- scrollContainer .scrollTop -
223- scrollContainer .clientHeight <
194+ scrollContainer .scrollTop -
195+ scrollContainer .clientHeight <
224196 50 ;
225197
226198 this .isAtBottom = isNearBottom ;
@@ -246,11 +218,11 @@ export default {
246218 this .rejectPermission ();
247219 }
248220
249- this .send (input , this .getSendOptions () );
221+ this .send (input , this .sendOptions );
250222 },
251223
252224 async reload() {
253- await this .retry (this .getSendOptions () );
225+ await this .retry (this .sendOptions );
254226 },
255227
256228 stop() {
@@ -281,17 +253,15 @@ export default {
281253 this .model = model ;
282254 },
283255
284- getSendOptions() {
285- if (! this .model ) {
286- throw new Error (" No model selected"
287- }
288-
289- return {
290- modelId: this .model .id ,
291- providerId: this .model .provider ,
292- systemPrompt: this .systemPrompt ,
293- }
294- }
256+ handleRejectPermission(options : {
257+ toolCallId: string ;
258+ userEdittedCode? : string ;
259+ }) {
260+ this .rejectPermission ({
261+ ... options ,
262+ sendOptions: this .sendOptions ,
263+ });
264+ },
295265 },
296266};
297267script >
0 commit comments