@nebulars/sseengine 1.0.0 → 1.3.44

package/src/components/sse-enter/index.vue

@@ -0,0 +1,210 @@
+<style lang="less" scoped>
+.fqa-enter {
+  & {
+    background-color: @color-input;
+  }
+
+  &-prompt {
+    color: @color-text;
+    border-color: transparent !important;
+    background-color: transparent !important;
+    box-shadow: none !important;
+    resize: none !important;
+    transition: all @flash;
+
+    &::placeholder {
+      color: lighten(@color-text, 40%);
+    }
+
+    &:focus {
+      &::placeholder {
+        color: lighten(@color-text, 50%);
+      }
+    }
+  }
+
+  &-bar {
+    flex-direction: row-reverse;
+  }
+
+  &-menus {
+    color: darken(@color-text, 5%) !important;
+    border-color: @color-line !important;
+
+    &:hover {
+      color: @color-text !important;
+      border-color: lighten(@color-line, 10%) !important;
+    }
+  }
+}
+</style>
+
+<template>
+  <!-- As -->
+  <a-form class="fqa-enter" layout="horizontal" :model="formic" @finish="onSubmit">
+    <!-- Prompt -->
+    <a-form-item name="content">
+      <a-textarea class="fqa-enter-prompt" ref="input" :auto-size="{ minRows: 1, maxRows: 10 }" :placeholder="$t('prompt.placeholder')" v-model:value="sseengine.prompt" @press-enter="enterHandler" />
+    </a-form-item>
+
+    <!-- Bar -->
+    <a-flex class="fqa-enter-bar" justify="space-between" align="middle">
+      <!-- Expantion -->
+      <a-space class="fqa-enter-expantion">
+        <sse-submit @click="onSubmit" />
+      </a-space>
+
+      <!-- Extension -->
+      <a-space class="fqa-enter-extension">
+        <a-tooltip v-if="false">
+          <template #title>上传文件（未开发）</template>
+          <fqa-button class="fqa-enter-menus" :radius="100" :size="36">
+            <fqa-icon icon="CloudUploadOutlined" size="20" />
+          </fqa-button>
+        </a-tooltip>
+
+        <a-switch class="fqa-enter-switch" v-model:checked="sseengine.rag" checked-children="深度思考" un-checked-children="常规问答" v-if="false" />
+
+        <a-dropdown class="fqa-enter-dropdown" placement="topRight" @click.prevent trigger="click" overlay-class-name="fqa-enter-dropdown-overlay">
+          <template #overlay>
+            <a-menu @click="onRagChange">
+              <a-menu-item key="false">
+                <span>{{ $t(`prompt.rag_false`) }}</span>
+              </a-menu-item>
+              <a-menu-item key="true">
+                <span>{{ $t(`prompt.rag_true`) }}</span>
+              </a-menu-item>
+            </a-menu>
+          </template>
+
+          <a-button>
+            {{ $t(`prompt.rag_${sseengine.rag}`) }}
+            <CaretUpOutlined />
+          </a-button>
+        </a-dropdown>
+
+        <div class="fqa-enter-presets">
+          <template v-if="sseengine.presets?.length" v-for="(param, index) in sseengine.presets">
+            <fqa-selection class="fqa-enter-selection" v-bind="param" v-if="param.field_name === 'data_sources'" v-model="sseengine.options[param.field_name]" :label="false" />
+          </template>
+        </div>
+      </a-space>
+    </a-flex>
+  </a-form>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      // 询问入口（锁）
+      entry: true,
+
+      // 伪数据
+      formic: {},
+    };
+  },
+
+  computed: {
+    info() {
+      return this.sseengine.info;
+    },
+
+    dom() {
+      return document.querySelector('#FinQAChat');
+    },
+  },
+
+  watch: {
+    'sseengine.info': {
+      handler(info) {
+        console.log(info);
+      },
+
+      deep: true,
+      immediate: true,
+    },
+
+    'sseengine.focus': {
+      handler(value) {
+        if (value) {
+          this.$nextTick(() => {
+            this.$refs.input.focus();
+            this.$store.dispatch('sseengine/FOCUS_OFF');
+          });
+        }
+      },
+
+      deep: true,
+      immediate: true,
+    },
+  },
+
+  methods: {
+    async onSubmit() {
+      const { produce, prompt: value } = this.sseengine;
+
+      if (produce) {
+        return;
+      }
+
+      if (!value) {
+        return;
+      }
+
+      // Another
+      const title = value;
+
+      // Cache Stream
+      await this.$store.dispatch('sseengine/STREAM_CACHE', value);
+
+      // Clean Prompt
+      await this.$store.dispatch('sseengine/PROMPT_UPDATE');
+
+      // No ID as New
+      if (!this.app.id) {
+        // Reset Menu Page
+        await this.$store.dispatch('sseengine/STATE_UPDATE', { menus: { page: 0 } });
+
+        // Create Chat
+        const { session_id } = await this.$store.dispatch('sseengine/ID_CREATE', title);
+
+        // For Web
+        this.$util.message.send({ id: session_id }, () => {
+          // For MNP
+          this.$router.push({ name: 'chat', query: { c: session_id } });
+        });
+
+        // Stop
+        return;
+      }
+
+      // Get ID from History
+      const { id: parent } = this.$util.last(this.sseengine.info.history);
+
+      // Start SSE
+      await this.$store.dispatch('sseengine/SSE_CONNECT', { session_id: this.app.id, parent });
+
+      // Clean Stream
+      await this.$store.dispatch('sseengine/STREAM_CACHE', null);
+
+      // Scrolling
+      await this.$store.dispatch('sseengine/SCROLLING');
+    },
+
+    // Enter for Textarea
+    enterHandler(event) {
+      if (event.shiftKey) {
+        return false;
+      }
+      this.onSubmit();
+      event.preventDefault();
+    },
+
+    // On Rag Change
+    onRagChange({ key: rag }) {
+      this.$store.dispatch('sseengine/RAG_UPDATE', rag);
+    },
+  },
+};
+</script>

package/src/components/sse-enter/modify.less

@@ -0,0 +1,101 @@
+.fqa-enter-extension {
+  height: auto;
+}
+
+.fqa-enter-switch {
+  & {
+    height: @size-submit;
+    line-height: @size-submit;
+    min-width: @size-submit;
+    border-radius: @size-submit;
+    padding-inline: calc(@size-submit / 5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .ant-switch-handle {
+    width: calc(@size-submit / 1.5);
+    height: calc(@size-submit / 1.5);
+    top: 50%;
+    transform: translateY(-50%);
+    inset-inline-start: 4px;
+
+    &::before {
+      border-radius: @size-submit;
+      background-color: @color-submit;
+    }
+  }
+
+  .ant-switch-inner {
+    .ant-switch-inner-unchecked {
+      margin-top: -@size-submit !important;
+    }
+  }
+
+  &.ant-switch-checked {
+    .ant-switch-handle {
+      inset-inline-start: calc(100% - 28px);
+    }
+  }
+}
+
+.fqa-enter-dropdown {
+  color: @color-text !important;
+  border-color: darken(@color-app, 4%) !important;
+  border-radius: @radiu;
+  background-color: @color-app;
+  box-shadow: none !important;
+}
+
+.fqa-enter-dropdown-overlay {
+  .ant-dropdown-menu {
+    border-color: darken(@color-app, 4%) !important;
+    background-color: @color-app;
+    box-shadow: none !important;
+  }
+
+  .ant-dropdown-menu-title-content {
+    color: @color-text !important;
+  }
+}
+
+.fqa-enter-presets {
+  & {
+    width: 120px;
+  }
+
+  .fqa-selection {
+    .ant-select {
+      &-selector {
+        color: @color-text;
+        border-color: darken(@color-app, 4%) !important;
+        background-color: @color-app;
+        box-shadow: none !important;
+
+        &,
+        &-item,
+        &-overflow,
+        &-overflow-item {
+          width: 100% !important;
+        }
+
+        &-item {
+          background: transparent !important;
+        }
+      }
+    }
+  }
+
+  .fqa-enter-selection {
+    border-radius: @radiu;
+  }
+
+  .css-dev-only-do-not-override-p1oxeb {
+    margin-bottom: 0;
+  }
+
+  .ant-form-item {
+    margin-bottom: 0 !important;
+  }
+}

package/src/components/{fqa-hub → sse-hub}/index.vue

@@ -1,17 +1,17 @@
 <template>
   <!-- Root -->
   <template v-if="item.role === 0">
-    <fqa-root :item="item" :active="active" @update:active="$emit('update:active', $event)" />
+    <sse-root :item="item" :active="active" @update:active="$emit('update:active', $event)" />
   </template>
 
   <!-- Query -->
   <template v-if="item.role === 1">
-    <fqa-query :item="item" :active="active" @update:active="$emit('update:active', $event)" />
+    <sse-query :item="item" :active="active" @update:active="$emit('update:active', $event)" />
   </template>
 
   <!-- Answer -->
   <template v-if="item.role === 2">
-    <fqa-answer :item="item" :active="active" @update:active="$emit('update:active', $event)" />
+    <sse-answer :item="item" :active="active" @update:active="$emit('update:active', $event)" />
   </template>
 </template>
 
@@ -40,7 +40,7 @@ export default {
        */
       handler(value) {
         // Get Father Node
-        const father = this.$util.deepfind(this.chat.info.history, this.item.parent);
+        const father = this.$util.deepfind(this.sseengine.info.history, this.item.parent);
 
         // Set Active
         if (father) {

package/src/components/sse-menus/index.vue

@@ -0,0 +1,288 @@
+<style lang="less" scoped>
+.fqa-menus {
+  & {
+    position: relative;
+  }
+
+  &-mask {
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 9999;
+    position: absolute;
+    background: transparent;
+  }
+
+  &-item {
+    & {
+      position: relative;
+
+      &-touch {
+        width: 80%;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        z-index: 1;
+        position: absolute;
+      }
+    }
+
+    &:hover {
+      .fqa-menus-more {
+        opacity: 1;
+        z-index: 1;
+      }
+    }
+  }
+
+  &-title {
+    max-width: calc(@size-assist - @gap * 4);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  &-input {
+    & {
+      color: @color-text;
+      border-color: @color-line;
+      background-color: transparent;
+    }
+
+    &:focus {
+      box-shadow: none;
+    }
+  }
+
+  &-more {
+    & {
+      position: absolute;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      opacity: 0;
+      z-index: -1;
+      transition: all @effect;
+    }
+
+    &.active {
+      opacity: 1;
+      z-index: 1;
+    }
+  }
+
+  &-options {
+    &-item {
+      & {
+        width: @space * 3;
+        line-height: @space;
+        padding-inline: @slit;
+        border-radius: @atom;
+        cursor: pointer;
+        transition: all @effect;
+      }
+
+      &:hover {
+        // background-color: @color-assist;
+      }
+    }
+  }
+
+  &-more,
+  &-no-more {
+    padding: @gap 0;
+    display: flex;
+    justify-content: center;
+  }
+
+  &-more {
+  }
+
+  &-no-more {
+    font-size: 1.25rem;
+    color: @color-subtext;
+  }
+}
+</style>
+
+<template>
+  <!-- Menus -->
+  <a-menu class="fqa-menus" mode="inline" v-model:openKeys="sseengine.opener" v-model:selectedKeys="sseengine.select" @select="menuHandler">
+    <!-- Menus Mask -->
+    <!-- <div class="fqa-menus-mask" v-if="sseengine.produce"></div> -->
+
+    <!-- Menus Group -->
+    <a-menu-item-group class="popover-modify" v-for="{ key, label, children } of menus" :key="key" :title="label">
+      <!-- Menus Item -->
+      <a-menu-item v-for="item of children" :key="`${item.session_id}`" :class="{ 'fqa-menus-item': true, keep: item.keep, remove: item.remove }">
+        <!-- For IOS -->
+        <div class="fqa-menus-item-touch" @touchstart="event => touchLesser(item, event)" @touchend.prevent="event => touchHandler(item, event)"></div>
+
+        <!-- Input Rename -->
+        <a-input class="fqa-menus-input" :ref="e => setRef(item.session_id, e)" v-model:value="item.title" @click.stop @blur="renameHandler($event, item)" @keyup.enter="renameHandler($event, item)" v-if="item.input" />
+
+        <!-- Title -->
+        <div class="fqa-menus-title" v-else>{{ item.title }}</div>
+
+        <!-- Menus More -->
+        <a-popover placement="rightTop" v-model:open="item.more" trigger="click">
+          <template #content>
+            <a-flex vertical class="fqa-menus-options">
+              <!-- Button Rename -->
+              <a-space class="fqa-menus-options-item" @click="() => ((item.input = true), (item.more = false), $nextTick(() => inputRefs[item.session_id].focus()))">
+                <fqa-icon icon="EditOutlined" />
+                <span>{{ $t('global.rename') }}</span>
+              </a-space>
+
+              <!-- Button Delete -->
+              <!-- <a-space class="fqa-menus-options-item" @click="() => (item.confirm = true)"> -->
+              <a-space class="fqa-menus-options-item" @click="deleteHandler($event, item)">
+                <fqa-icon icon="DeleteOutlined" />
+                <span>{{ $t('global.delete') }}</span>
+              </a-space>
+            </a-flex>
+          </template>
+
+          <!-- Button More -->
+          <fqa-button :class="{ 'fqa-menus-more': true, active: item.more }" :width="40" :height="40" @click.stop="() => (item.more = true)">
+            <fqa-icon icon="MoreOutlined" cursor="pointer" />
+          </fqa-button>
+        </a-popover>
+
+        <!-- Confirm Delete -->
+        <a-modal v-model:open="item.confirm" :title="$t('menus.title')" :ok-text="$t('global.ok')" :cancel-text="$t('global.cancel')" @ok="deleteHandler($event, item)" @cancel="() => (item.confirm = false)">
+          <p>{{ $t('menus.delete') }}</p>
+        </a-modal>
+      </a-menu-item>
+    </a-menu-item-group>
+
+    <!-- Menu Observe -->
+    <vue-view-observer @subscribe="subscribe" container=".FinQA--Assist" v-if="sseengine.menus.more">
+      <div class="fqa-menus-more">
+        <a-spin />
+      </div>
+    </vue-view-observer>
+
+    <div class="fqa-menus-no-more" v-else>没有更多了</div>
+  </a-menu>
+</template>
+
+<script>
+export default {
+  props: {
+    menus: {
+      type: Array,
+      default: [],
+    },
+  },
+
+  data() {
+    return {
+      inputRefs: {},
+      touchState: 0,
+      canObserve: true,
+    };
+  },
+
+  methods: {
+    setRef(session_id, e) {
+      this.inputRefs[session_id] = e;
+    },
+
+    async menuHandler(item) {
+      // For Web
+      this.$util.message.send({ id: item.key }, () => {
+        // For MNP
+        this.$router.push({ name: 'chat', query: { c: item.key } });
+      });
+    },
+
+    async touchLesser(item, event) {
+      this.touchState = event.touches[0].clientY;
+    },
+
+    async touchHandler(item, event) {
+      const touchMove = Math.abs(event.changedTouches[0].clientY - this.touchState);
+
+      if (touchMove > 10) {
+        return;
+      }
+
+      // Remake Item
+      item.key = item.session_id;
+      item.selectedKeys = [item.session_id];
+
+      // Trigger Menus
+      await this.menuHandler(item);
+    },
+
+    async renameHandler(e, item) {
+      // Stop Event
+      e.stopPropagation();
+
+      // Rename
+      await this.$store.dispatch('sseengine/MENUS_RENAME', item);
+
+      // Update Sync Title
+      if (this.sseengine.info.current_node === item.current_node) {
+        await this.$store.dispatch('sseengine/STATE_UPDATE', { info: { title: item.title } });
+      }
+
+      // Close Input
+      item.input = false;
+    },
+
+    async deleteHandler(e, item) {
+      // Stop Event
+      e.stopPropagation();
+
+      // Delete
+      const { success } = await this.$store.dispatch('sseengine/MENUS_DEL', item);
+
+      // Remove Item
+      if (success) {
+        item.remove = true;
+      }
+
+      // Close Popover
+      item.more = false;
+      item.confirm = false;
+
+      // Clean
+      if (item.session_id === this.app.id) {
+        // Trigger Clean
+        await this.$store.dispatch('sseengine/CLEAN');
+
+        // For Web
+        this.$util.message.send({ id: 'new' }, () => {
+          // For MNP
+          this.$router.push({ name: 'chat' });
+        });
+      }
+    },
+
+    async subscribe(intersecting) {
+      if (!intersecting) {
+        return;
+      }
+
+      if (!this.canObserve) {
+        return;
+      }
+
+      this.canObserve = false;
+
+      await this.$store.dispatch('sseengine/MENUS_UPDATE', { page: this.sseengine.menus.page + 1 });
+      await this.$store.dispatch('sseengine/MENUS_GET');
+
+      this.canObserve = true;
+    },
+  },
+
+  async mounted() {
+    await this.$util.kitchen.sleep(6);
+    await this.subscribe(true);
+  },
+};
+</script>

package/src/components/sse-menus/popover-modify.less

@@ -0,0 +1,26 @@
+.popover-modify {
+}
+
+.ant-popover {
+  &-inner {
+    background-color: darken(@color-assist, 3%) !important;
+
+    &-content {
+      color: @color-text !important;
+    }
+  }
+
+  &-arrow {
+    &:before,
+    &::after {
+      background-color: darken(@color-assist, 3%) !important;
+    }
+  }
+}
+
+.ant-menu-item-selected {
+  .fqa-menus-more {
+    opacity: 1;
+    z-index: 1;
+  }
+}