feat: Add session page.

Signed-off-by: IRONICBo <47499836+IRONICBo@users.noreply.github.com>
openimsdk · Aug 8, 2023 · 24073d3 · 24073d3
1 parent 2a9e006
commit 24073d3
Show file tree

Hide file tree

Showing 8 changed files with 434 additions and 3 deletions.
diff --git a/web/.eslintrc.js b/web/.eslintrc.js
@@ -47,5 +47,6 @@ module.exports = {
         '@typescript-eslint/ban-types': 'off',
         'vue/multi-word-component-names': 'off',
         'vue/comment-directive': 'off',
+        'no-async-promise-executor': 'off',
     },
 };
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -21,6 +21,7 @@
         "tdesign-icons-vue-next": "^0.1.11",
         "tdesign-vue-next": "^1.3.10",
         "tvision-color": "^1.6.0",
+        "uuid": "^9.0.0",
         "vite-svg-loader": "^4.0.0",
         "vue": "^3.3.4",
         "vue-router": "^4.2.2"

diff --git a/web/src/style/reset-tdesign.less b/web/src/style/reset-tdesign.less
@@ -1,15 +1,54 @@
 // reset for openkf
+.t-textarea__inner {
+  border-radius: var(--td-radius-large);
+  height: var(--td-comp-size-xxxxxl);
+  padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-l);
+  resize: none;
+}
+
 .t-menu__logo {
   min-height: var(--td-comp-size-xxxxxl);
 }
 
+.kf-session-input {
+  .t-input {
+    border-radius: var(--td-radius-large);
+    width: 180px;
+  }
+}
+
 .kf-config-input {
   .t-input {
     border-radius: var(--td-radius-large);
     width: 180px;
   }
 }
 
+.kf-session-list-card {
+  margin-bottom: var(--td-comp-margin-m);
+
+  .t-card {
+    border-radius: var(--td-radius-large);
+    background-color: var(--td-font-white-1);
+  }
+
+  .t-card__header {
+    padding: var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-l);
+    padding-top: var(--td-comp-paddingTB-m);
+
+    .t-card__title {
+      font-weight: 500;
+    }
+  }
+
+  .t-card__body {
+    padding: var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-l);
+    padding-bottom: var(--td-comp-paddingTB-m);
+    font-size: var(--td-font-size-body-small);
+    color: var(--td-text-color-secondary);
+  }
+}
+
 .kf-config-list-card {
   margin-bottom: var(--td-comp-margin-m);
 

diff --git a/web/src/views/session/components/SessionList.vue b/web/src/views/session/components/SessionList.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const isDark = ref(false);
+const cardList = [
+    {
+        title: 'System',
+        description: 'Customize your OpenKF system.',
+    },
+    {
+        title: 'System',
+        description: 'Customize your OpenKF system.',
+    },
+    {
+        title: 'System',
+        description: 'Customize your OpenKF system.',
+    },
+    {
+        title: 'System',
+        description: 'Customize your OpenKF system.',
+    },
+    {
+        title: 'System',
+        description: 'Customize your OpenKF system.',
+    },
+    {
+        title: 'Personal',
+        description: 'Update your personal information.',
+    },
+    {
+        title: 'Community',
+        description: 'Update your community information.',
+    },
+    {
+        title: 'Group',
+        description: 'Manage your customer service staff.',
+    },
+    {
+        title: 'Bot',
+        description: 'Manage LLM Bots.',
+    },
+    {
+        title: 'KnowledgeBase',
+        description: 'Manage local knowledge base.',
+    },
+];
+</script>
+
+<template>
+    <div :class="[isDark ? 'dark' : 'light', 'session-list-wrapper']">
+        <div class="session-title">
+            <h2 class="welcome">OpenKF session</h2>
+            <h3 class="sub-title">Start your custom service session.</h3>
+        </div>
+        <div
+            v-for="item in cardList"
+            :key="item.title"
+            class="kf-session-list-card"
+        >
+            <t-card :title="item.title" hover-shadow>
+                {{ item.description }}
+                <template #actions>
+                    <t-button
+                        shape="circle"
+                        theme="default"
+                        size="small"
+                        variant="outline"
+                        ghost
+                        ><t-icon name="close"
+                    /></t-button>
+                </template>
+            </t-card>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'SessionList',
+};
+</script>
+
+<style lang="less" scoped>
+@import url('../index.less');
+</style>
diff --git a/web/src/views/session/components/SessionWindow.vue b/web/src/views/session/components/SessionWindow.vue
@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import { ErrorCodes, reactive, ref } from 'vue';
+import { MessagePlugin } from 'tdesign-vue-next';
+import { Icon } from 'tdesign-icons-vue-next';
+import { getMyInfo, updateUserInfo } from '@/api/index/user';
+import { getMyCommunityInfo, updateCommunityInfo } from '@/api/index/community';
+import { updateStaffEnableStatus, deleteStaff } from '@/api/index/admin';
+import { UpdateUserInfoParam } from '@/api/request/userModel';
+import { UpdateCommunityParam } from '@/api/request/communityModel';
+import { onMounted, computed } from 'vue';
+import { getAvatarString } from '@/utils/common/string';
+import { OpenIM } from '@/api/openim';
+import { MessageItem } from "@/utils/open-im-sdk-wasm/types/entity";
+
+const isDark = ref(false);
+const messageContent = ref('');
+
+const customInfo = reactive({
+  uuid: '57daf388-1316-46ac-9523-737e82dc0d2b',
+  email: '',
+  nickname: '',
+  avatar: '',
+  description: '',
+  is_enable: false,
+  is_admin: false,
+  created_at: '',
+});
+
+const sendMessage = async () => {
+
+  const msg = await OpenIM.createTextMessage(messageContent.value)<MessageItem>
+
+  console.log(msg.data);
+  const content = msg.data
+
+  const options = {
+    recvID:  customInfo.uuid,
+    groupID: "",
+    message: msg.data,
+  };
+
+  OpenIM.sendMessage(options).then((res) => {
+    console.log(res);
+  }).catch(({ ErrorCodes, errMsg }) => {
+    console.log(ErrorCodes, errMsg);
+    MessagePlugin.error({
+      content: errMsg,
+    });
+  }),
+  console.log(messageContent.value);
+};
+
+
+const messages = ref([
+  {
+    isSender: true,
+    content: 'Hello, I am a rob生生世世生生世世生生世世生生世世生生世世生生世世生生世世生生世世生生世世生生世世时尚高腰裤高速度尬哭都要尬哭一段关于大股东挂上看到顾客御史大夫告诉卡给发u说ot.',
+    nickname: 'Robot',
+    avatar: '',
+  },
+  {
+    isSender: true,
+    content: 'Hello, I am a rob生生世世生生世世生生世世生生世世生生世世生生世世生生世世生生世世生生世世生生世世时尚高腰裤高速度尬哭都要尬哭一段关于大股东挂上看到顾客御史大夫告诉卡给发u说ot.',
+    nickname: 'Robot',
+    avatar: '',
+  },
+  {
+    isSender: false,
+    content: 'Hello, I am a rob生生世世生生世世生生世世生生世世生生世世生生世世生生世世生生世世生生世世生生世世时尚高腰裤高速度尬哭都要尬哭一段关于大股东挂上看到顾客御史大夫告诉卡给发u说ot.',
+    nickname: 'Robot',
+    avatar: '',
+  },
+  {
+    isSender: true,
+    content: 'Hello, I am a rob生生世世生生世世生生世世生生世世生生世世生生世世生生世世生生世世生生世世生生世世时尚高腰裤高速度尬哭都要尬哭一段关于大股东挂上看到顾客御史大夫告诉卡给发u说ot.',
+    nickname: 'Robot',
+    avatar: '',
+  },
+  {
+    isSender: false,
+    content: 'Hello, I am a rob生生世世生生世世生生世世生生世世生生世世生生世世生生世世生生世世生生世世生生世世时尚高腰裤高速度尬哭都要尬哭一段关于大股东挂上看到顾客御史大夫告诉卡给发u说ot.',
+    nickname: 'Robot',
+    avatar: '',
+  },
+]);
+
+// TODO: Add loading animation
+const dataLoading = ref(false);
+</script>
+
+<template>
+  <div :class="[isDark ? 'dark' : 'light', 'session-window-wrapper']">
+    <div class="session-header ">
+      <t-row align="middle">
+        <t-col span="11">
+          <h2 class="welcome">{{ 'zzz' }}</h2>
+          <h1 class="sub-title">
+            UUID: {{ 'zzz' }} IP: {{  'xxx' }} Device: {{ 'slack' }}
+          </h1>
+        </t-col>
+
+        <t-col span="1">
+          <t-button theme="default" shape="circle" variant="outline"><icon name="refresh" /></t-button> 
+          <t-tooltip content="Update config info"><t-button theme="default" variant="outline" shape="circle" ><icon name="close" /></t-button></t-tooltip>
+        </t-col>
+      </t-row>
+    </div>
+
+    <div class="session-body">
+      <div v-for="(item, idx) in messages" :key="idx" :class="[item.isSender ? 'send' : 'recv', 'message-card']">
+        <div class="session-avatar">
+          <t-avatar v-if="item.avatar === ''">{{ getAvatarString(item.nickname!) }}</t-avatar>
+          <t-avatar v-else :alt="getAvatarString(item.nickname!)" hide-on-load-failed="true" :image="item.avatar" />
+        </div>
+        <div class="session-content">
+          <div class="session-content-text">
+            <span>{{ item.content }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="session-input">
+      <t-space size="24px" class="tools">  
+        <t-button shape="round" variant="outline" size="small"><t-icon name="tools" /></t-button>
+      </t-space>
+      <div class="inner">
+        <t-textarea v-model="messageContent" placeholder="Enter your text here..."  autofocus />
+        <t-button class="send-button" @click="sendMessage">Send</t-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'SessionWindow',
+};
+</script>
+
+<style lang="less" scoped>
+@import url('../index.less');
+</style>