Merge pull request #13 from OVINC-CN/feat_re_generate

feat: re-generate last completion
OVINC-CN · Oct 8, 2023 · 3491634 · 3491634
2 parents c465a2e + 1f0710b
commit 3491634
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 4 deletions.
diff --git a/src/components/ChatInput.vue b/src/components/ChatInput.vue
@@ -19,7 +19,7 @@ const props = defineProps({
 });
 
 // emits
-const emits = defineEmits(['addMessage', 'setChatLoading', 'saveMessage', 'clearMessages', 'toggleUserBehavior']);
+const emits = defineEmits(['addMessage', 'setChatLoading', 'saveMessage', 'clearMessages', 'toggleUserBehavior', 'replaceMessages', 'setPromptForm']);
 
 // i18n
 const i18n = useI18n();
@@ -129,6 +129,16 @@ const doChat = async () => {
       .finally(() => emits('setChatLoading', false));
 };
 
+const reGenerate = () => {
+  if (!props.localMessages.length) {
+    return;
+  }
+  emits('setChatLoading', true);
+  emits('replaceMessages', props.localMessages.slice(0, props.localMessages.length - 2));
+  promptForm.value.content = props.localMessages[props.localMessages.length -2].content;
+  doChat();
+};
+
 //  auto submit
 const lastMeta = ref(false);
 const allowSubmitKeys = ref(['Shift', 'Alt', 'Control', 'Meta']);
@@ -144,6 +154,8 @@ const onKeydown = (event) => {
 };
 
 const showEditBox = ref(true);
+
+defineExpose({reGenerate, promptForm});
 </script>
 
 <template>
@@ -166,6 +178,7 @@ const showEditBox = ref(true);
           :auto-size="{minRows: 6, maxRows: 6}"
           :disabled="chatLoading"
           @keydown="onKeydown"
+          @input="emits('toggleUserBehavior', false); emits('setPromptForm', promptForm)"
           @focus="emits('toggleUserBehavior', false)"
         />
       </a-form-item>

diff --git a/src/components/MessageContent.vue b/src/components/MessageContent.vue
@@ -11,10 +11,16 @@ const props = defineProps({
       content: '',
     }),
   },
+  isLast: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const store = useStore();
 const user = computed(() => store.state.user);
+
+const emits = defineEmits(['reGenerate']);
 </script>
 
 <template>
@@ -54,6 +60,11 @@ const user = computed(() => store.state.user);
     >
       {{ user.nick_name }}
     </a-avatar>
+    <icon-refresh
+      @click="emits('reGenerate')"
+      v-if="isLast && message.role === Role.Assistant"
+      class="message-content-content-icon-refresh"
+    />
   </div>
 </template>
 
@@ -84,4 +95,16 @@ const user = computed(() => store.state.user);
   background: var(--color-fill-3);
   margin: 20px 0;
 }
+
+.message-content-content-icon-refresh {
+  min-width: 18px;
+  min-height: 18px;
+  margin: 6px 0 0 6px;
+  cursor: pointer;
+  color: var(--color-neutral-4);
+}
+
+.message-content-content-icon-refresh:hover {
+  color: var(--color-neutral-10);
+}
 </style>
diff --git a/src/components/MessageDisplay.vue b/src/components/MessageDisplay.vue
@@ -1,6 +1,7 @@
 <script setup>
 import MessageContent from './MessageContent.vue';
 import {onMounted, onUnmounted, watch} from 'vue';
+import {Role} from '../constants';
 
 // props
 const props = defineProps({
@@ -12,20 +13,33 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  promptForm: {
+    type: Object,
+    default: () => ({
+      content: '',
+    }),
+  },
 });
 
 // emits
-const emits = defineEmits(['toggleUserBehavior']);
+const emits = defineEmits(['toggleUserBehavior', 'reGenerate']);
 
 // scroll
-watch(() => props.localMessages, () => {
+const doScroll = () => {
   if (props.userBehavior) {
     return;
   }
   const el = document.getElementById('chat-display');
   if (el) {
     el.scrollTop = el.scrollHeight;
   }
+};
+watch(() => props.localMessages, () => {
+  doScroll();
+}
+, {deep: true, immediate: true});
+watch(() => props.promptForm.content, () => {
+  doScroll();
 }, {deep: true, immediate: true});
 onMounted(() => {
   const el = document.getElementById('chat-display');
@@ -53,9 +67,15 @@ onUnmounted(() => {
     v-show="localMessages.length > 0"
   >
     <message-content
-      v-for="message in localMessages"
+      v-for="(message, index) in localMessages"
       :key="message"
       :message="message"
+      :is-last="index === localMessages.length - 1"
+      @re-generate="emits('reGenerate')"
+    />
+    <message-content
+      v-show="promptForm.content"
+      :message="{role: Role.User, content: promptForm.content}"
     />
   </a-space>
   <div

diff --git a/src/views/Chat.vue b/src/views/Chat.vue
@@ -9,6 +9,9 @@ const localMessageKey = ref('local-message');
 const addMessage = (message) => {
   localMessages.value.push(message);
 };
+const replaceMessages = (messages) => {
+  localMessages.value = messages;
+};
 const saveMessage = () => localStorage.setItem(localMessageKey.value, JSON.stringify(localMessages.value));
 const clearMessages = () => {
   localMessages.value = [];
@@ -29,6 +32,14 @@ const setChatLoading = (status) => handleLoading(chatLoading, status);
 // scroll
 const userBehavior = ref(false);
 const toggleUserBehavior = (status) => userBehavior.value = status;
+
+// reGenerate
+const chatInputRef = ref();
+const reGenerate = () => {
+  chatInputRef.value.reGenerate();
+};
+const promptForm = ref({});
+const setPromptForm = (data) => promptForm.value = data;
 </script>
 
 <template>
@@ -37,17 +48,22 @@ const toggleUserBehavior = (status) => userBehavior.value = status;
       <message-display
         :local-messages="localMessages"
         :user-behavior="userBehavior"
+        :prompt-form="promptForm"
         @toggle-user-behavior="toggleUserBehavior"
+        @re-generate="reGenerate"
       />
       <a-divider />
       <chat-input
+        ref="chatInputRef"
         :local-messages="localMessages"
         :chat-loading="chatLoading"
         @add-message="addMessage"
         @set-chat-loading="setChatLoading"
         @save-message="saveMessage"
         @clear-messages="clearMessages"
         @toggle-user-behavior="toggleUserBehavior"
+        @replace-messages="replaceMessages"
+        @set-prompt-form="setPromptForm"
       />
     </div>
   </div>