11<template >
22 <div v-if =" !showEditor" class =" chat-view" >
33 <div class =" messages" v-if =" chatMessages?.length" ref =" messagesContainer" @scroll =" onScroll" >
4- <ChatMessage v-for =" (msg, idx) in chatMessages" :key =" msg._id ?? cyrb53(msg.content)" :msg =" msg" :idx = " idx "
5- :isFirstInGroup =" isFirstInAiGroup(idx)" :isLastInGroup =" isLastInAiGroup(idx)"
4+ <ChatMessage v-for =" (msg, idx) in chatMessages" :key =" msg._id ?? cyrb53(msg.content + msg.thinking )" :msg =" msg"
5+ :idx = " idx " : isFirstInGroup =" isFirstInAiGroup(idx)" :isLastInGroup =" isLastInAiGroup(idx)"
66 :firstInGroupIdx =" getFirstInGroupIdx(idx)" @retry-send =" retrySend" @edit-message =" onEditMessage"
77 @inline-buttons =" onInlineButtons" @delete-message =" deleteMessage" />
88
2323
2424 <!-- Empty placeholder shown when there are no chat messages -->
2525 <div class =" messages placeholder" v-else >
26+ <div v-if =" recentChats.length > 0" class =" recent-chats" >
27+ <p class =" recent-chats-title" >Recent chats:</p >
28+ <div class =" recent-chats-list" >
29+ <div v-for =" chat in recentChats" :key =" chat.id" class =" recent-chat-item" @click =" switchToChat(chat.id)" >
30+ <span class =" recent-chat-title" >{{ chat.title + ': ' + (chat.messages[0]?.content ?? 'Empty') }}</span >
31+ </div >
32+ </div >
33+ </div >
34+
2635 <div class =" placeholder-content" >
2736 <p class =" empty-title" >No messages</p >
2837 <p class =" empty-sub" >Please enter your message in the box below.</p >
108117</template >
109118
110119<script setup lang="ts">
111- import { ref , onMounted , nextTick , watch , onActivated , onUnmounted } from ' vue' ;
120+ import { ref , onMounted , nextTick , watch , onActivated , onUnmounted , computed } from ' vue' ;
112121import useChat from ' ../../composables/useChat' ;
113122import Icon from ' ../shared/Icon.vue' ;
114123import IconButton from ' ../shared/IconButton.vue' ;
@@ -121,6 +130,7 @@ import ErrorBanner from '../shared/ErrorBanner.vue';
121130import Timer from ' ../shared/Timer.vue' ;
122131import ChatMessage from ' ./ChatMessage.vue' ;
123132import { cyrb53 } from ' ../../utils/hash' ;
133+ import { useChatHistoryStore } from ' ../../stores/chat-history-store' ;
124134import BlockDiagramEditor from ' ../block-diagram/BlockDiagramEditor.vue' ;
125135import BlockDiagramHistory from ' ../block-diagram/BlockDiagramHistory.vue' ;
126136import ContextMenu from ' ../shared/ContextMenu.vue' ;
@@ -131,6 +141,12 @@ import { formatFileSize } from '../../utils/file-size';
131141
132142const settingsStore = useSettingsStore ();
133143const blockDiagramHistoryStore = useBlockDiagramHistoryStore ();
144+ const chatHistoryStore = useChatHistoryStore ();
145+
146+ const recentChats = computed (() => {
147+ const allChats = chatHistoryStore .getAllChats ();
148+ return allChats .slice (1 , 4 );
149+ });
134150
135151const {
136152 chatMessages,
@@ -217,6 +233,10 @@ function toggleHistoryPanel() {
217233 showHistoryPanel .value = ! showHistoryPanel .value ;
218234}
219235
236+ function switchToChat(id : string ) {
237+ chatHistoryStore .switchToChat (id );
238+ }
239+
220240function scrollToBottom() {
221241 const container = messagesContainer .value ;
222242 if (container ) {
@@ -337,14 +357,49 @@ defineExpose({
337357/* Placeholder styles when there are no messages */
338358.messages.placeholder {
339359 align-items : center ;
340- justify-content : center ;
360+ /* justify-content: center; */
341361 padding : 2rem ;
342362}
343363
344364.placeholder-content {
345365 text-align : center ;
346366 color : var (--color-text-muted );
347367 max-width : 420px ;
368+ margin : auto ;
369+ }
370+
371+ .recent-chats {
372+ margin-bottom : 1.5rem ;
373+ text-align : left ;
374+ width : 100% ;
375+ }
376+
377+ .recent-chats-title {
378+ font-size : 0.85rem ;
379+ color : var (--color-text-muted );
380+ margin-bottom : 0.5rem ;
381+ }
382+
383+ .recent-chats-list {
384+ display : flex ;
385+ flex-direction : column ;
386+ gap : 0.25rem ;
387+ }
388+
389+ .recent-chat-item {
390+ display : flex ;
391+ align-items : center ;
392+ gap : 0.5rem ;
393+ padding : 0.5rem 0rem ;
394+ cursor : pointer ;
395+ }
396+
397+ .recent-chat-title {
398+ font-size : 0.875rem ;
399+ color : var (--color-text );
400+ overflow : hidden ;
401+ text-overflow : ellipsis ;
402+ white-space : nowrap ;
348403}
349404
350405.empty-title {
0 commit comments