update dialog

src/components/chat/Sidebar.vue

@@ -1,38 +1,120 @@
 <template>
   <div class="sidebar">
-
+    <el-skeleton v-if="loading" />
+    <div v-else class="conversations">
+      <div
+        v-for="(conversation, conversationIndex) in conversations"
+        :key="conversationIndex"
+        class="conversation"
+        @click="onClick(conversation.id)"
+      >
+        <div class="icons">
+          <font-awesome-icon icon="fa-regular fa-comment" class="icon" />
+        </div>
+        <div class="title">
+          <span>{{ conversation.title }}</span>
+        </div>
+        <div class="operations">
+          <font-awesome-icon icon="fa-solid fa-edit" class="icon icon-edit" />
+          <font-awesome-icon icon="fa-solid fa-trash" class="icon icon-delete" />
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { ElTooltip, ElButton } from 'element-plus';
+import { ElTooltip, ElButton, ElSkeleton } from 'element-plus';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import { ROUTE_CHAT_INDEX } from '@/router/constants';
+import { ROUTE_CHAT_CONVERSATION, ROUTE_CHAT_INDEX } from '@/router/constants';
+import { apiUsageOperator, midjourneyOperator, MidjourneyImagineState, IApplication } from '@/operators';
+import { chatgptOperator } from '@/operators/api/chatgpt/operator';
+import { IConversation } from '@/operators/conversation/models';
+
+interface IData {
+  loading: boolean;
+  conversations: IConversation[];
+}
 
 export default defineComponent({
   name: 'Sidebar',
   components: {
     ElButton,
-    FontAwesomeIcon
+    FontAwesomeIcon,
+    ElSkeleton
+  },
+  props: {
+    application: {
+      type: Object as () => IApplication | undefined,
+      required: true
+    }
   },
-  data() {
+  emits: ['click'],
+  data(): IData {
     return {
-      links: [
-        {
-          route: {
-            name: ROUTE_CHAT_INDEX
-          },
-          icon: 'fa-question'
-        },
-        {
-          route: {
-            name: 'midjourney-index'
-          },
-          icon: 'fa-question'
-        }
-      ]
+      loading: false,
+      conversations: []
     };
+  },
+  mounted() {
+    this.onFetchAllConversations();
+  },
+  methods: {
+    async onFetchAllConversations() {
+      // applicationOperator.getAll()
+      console.log('srtart to load');
+      this.loading = true;
+      const {
+        data: { items: apiUsages }
+      } = await apiUsageOperator.getAll({
+        user_id: this.$store.state.user.id,
+        application_id: this.application?.id,
+        offset: 0,
+        limit: 20,
+        ordering: '-created_at'
+      });
+      this.loading = false;
+
+      // de duplicate conversations using id
+      const conversationIds: string[] = [];
+      const uniqueApiUsages = apiUsages.filter((apiUsage) => {
+        const conversationId = apiUsage.metadata?.conversation_id;
+        if (!conversationId) {
+          return false;
+        }
+        if (conversationIds.includes(conversationId)) {
+          return false;
+        }
+        conversationIds.push(conversationId);
+        return true;
+      });
+
+      const conversations = await Promise.all(
+        uniqueApiUsages.map(async (apiUsage) => {
+          // const taskId = apiUsage.metadata?.task_id;
+          // console.log('taskid', taskId);
+          return {
+            id: apiUsage.metadata?.conversation_id,
+            title: 'dsdsd'
+          } as IConversation;
+        })
+      );
+      this.conversations = conversations;
+      // this.historyTasks = tasks.filter((task) => task && task?.response);
+    },
+    onClick(id: string) {
+      if (!id) {
+        return;
+      }
+      this.$router.push({
+        name: ROUTE_CHAT_CONVERSATION,
+        params: {
+          id
+        }
+      });
+      this.$emit('click', id);
+    }
   }
 });
 </script>
@@ -42,13 +124,45 @@ export default defineComponent({
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  .top {
-    display: flex;
-    flex-direction: column;
-  }
-  .bottom {
+  padding: 15px;
+  .conversations {
+    flex: 1;
     display: flex;
     flex-direction: column;
+    align-items: center;
+    .conversation {
+      width: 100%;
+      height: 50px;
+      display: flex;
+      flex-direction: row;
+      padding: 10px;
+      margin-bottom: 5px;
+      border: 1px dashed hsl(0, 0%, 93%);
+      line-height: 30px;
+      border-radius: 10px;
+      color: #666;
+      cursor: pointer;
+
+      .icons {
+        width: 30px;
+        padding-left: 10px;
+        .icon {
+          font-size: 14px;
+        }
+      }
+      .title {
+        flex: 1;
+        font-size: 14px;
+      }
+      .operations {
+        width: 45px;
+        .icon {
+          cursor: pointer;
+          font-size: 14px;
+          margin-right: 8px;
+        }
+      }
+    }
   }
 }
 </style>

src/components/midjourney/FinalPrompt.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="mb-4">
+    <h2 class="title">最终绘图指令</h2>
+    <el-alert :title="modelValue" :closable="false" />
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import { ElAlert } from 'element-plus';
+export default defineComponent({
+  name: 'FinalPrompt',
+  components: {
+    ElAlert
+  },
+  props: {
+    modelValue: {
+      type: String,
+      default: undefined
+    }
+  },
+  data() {},
+  mounted() {}
+});
+</script>
+
+<style lang="scss" scoped>
+.title {
+  font-size: 14px;
+  margin-bottom: 0;
+  width: 30%;
+}
+.prompt {
+  color: #333;
+  font-size: 16px;
+  flex: 1;
+}
+</style>

src/pages/chat/Conversation.vue

@@ -1,17 +1,20 @@
 <template>
   <div class="page">
-    <model-selector v-model="model" class="model-selector" @select="onSelectModel" />
-    <api-status :application="application" />
+    <sidebar class="left" :application="application" @click="onFetchHistory" />
     <div class="main">
-      <introduction v-if="messages && messages.length === 0" />
-      <div v-else class="messages">
-        <div v-for="(message, messageIndex) in messages" :key="messageIndex">
-          <message :message="message" class="message" />
+      <model-selector v-model="model" class="model-selector" @select="onSelectModel" />
+      <api-status :application="application" />
+      <div class="dialogue">
+        <introduction v-if="messages && messages.length === 0" />
+        <div v-else class="messages">
+          <div v-for="(message, messageIndex) in messages" :key="messageIndex">
+            <message :message="message" class="message" />
+          </div>
         </div>
       </div>
-    </div>
-    <div class="bottom">
-      <input-box v-model="question" @submit="onSubmitQuestion" />
+      <div class="bottom">
+        <input-box v-model="question" @submit="onSubmitQuestion" />
+      </div>
     </div>
   </div>
 </template>
@@ -38,6 +41,7 @@ import { ERROR_CODE_CANCELED, ERROR_CODE_UNKNOWN } from '@/constants/errorCode';
 import axios from 'axios';
 import ApiStatus from '@/components/common/ApiStatus.vue';
 import { ROUTE_CHAT_CONVERSATION, ROUTE_CHAT_CONVERSATION_NEW } from '@/router';
+import Sidebar from '@/components/chat/Sidebar.vue';
 
 export interface IData {
   messages: IChatMessage[];
@@ -55,7 +59,8 @@ export default defineComponent({
     InputBox,
     ModelSelector,
     Message,
-    ApiStatus
+    ApiStatus,
+    Sidebar
   },
   data(): IData {
     return {
@@ -110,10 +115,7 @@ export default defineComponent({
       this.question = '';
       await this.onFetchAnswer();
     },
-    async onFetchHistory() {
-      if (!this.conversationId) {
-        return;
-      }
+    async onFetchHistory(id?: string) {
       const endpoint = this.application?.api?.endpoint;
       const path = this.application?.api?.path;
       console.log(endpoint, path);
@@ -124,7 +126,7 @@ export default defineComponent({
       const { data: data } = await chatOperator.conversations(
         {
           action: IChatConversationAction.RETRIEVE,
-          id: this.conversationId
+          id: id || this.conversationId
         },
         {
           endpoint,
@@ -208,20 +210,40 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .page {
-  padding: 15px;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   align-items: center;
   width: 100%;
   height: 100%;
+
+  .left {
+    display: block;
+    width: 300px;
+    height: 100%;
+    border-right: 1px solid #eee;
+    overflow-y: scroll;
+  }
+
   .main {
     flex: 1;
     width: 100%;
     overflow-y: scroll;
     padding: 15px;
-    .messages {
-      .message {
-        margin-bottom: 15px;
+    height: 100%;
+    flex-direction: column;
+    display: flex;
+
+    .model-selector {
+      width: max-content;
+      margin: auto;
+    }
+
+    .dialogue {
+      flex: 1;
+      .messages {
+        .message {
+          margin-bottom: 15px;
+        }
       }
     }
   }