feat: channel alpha

coaidev · Dec 1, 2023 · db7acee · db7acee
1 parent 7e7798d
commit db7acee
Show file tree

Hide file tree

Showing 25 changed files with 1,815 additions and 80 deletions.
diff --git a/app/package.json b/app/package.json
@@ -17,6 +17,7 @@
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-progress": "^1.0.3",
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-select": "^2.0.0",
@@ -31,6 +32,7 @@
     "chart.js": "^4.4.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
+    "cmdk": "^0.2.0",
     "i18next": "^23.4.6",
     "localforage": "^1.10.0",
     "lucide-react": "^0.289.0",

diff --git a/app/pnpm-lock.yaml b/app/pnpm-lock.yaml
diff --git a/app/src/admin/channel.ts b/app/src/admin/channel.ts
@@ -0,0 +1,177 @@
+export type Channel = {
+  id: number;
+  name: string;
+  type: string;
+  models: string[];
+  priority: number;
+  weight: number;
+  retry: number;
+  secret: string;
+  endpoint: string;
+  mapper: string;
+  state: boolean;
+};
+
+export type ChannelEditProps = {
+  type: string;
+  name: string;
+  models: string[];
+  priority: number;
+  weight: number;
+  retry: number;
+  secret: string;
+  endpoint: string;
+  mapper: string;
+};
+
+export type ChannelInfo = {
+  id: number;
+  description?: string;
+  endpoint: string;
+  format: string;
+  models: string[];
+};
+
+export const ChannelTypes: Record<string, string> = {
+  openai: "OpenAI",
+  claude: "Claude",
+  slack: "Slack",
+  sparkdesk: "讯飞星火",
+  chatglm: "智谱 ChatGLM",
+  qwen: "通义千问",
+  hunyuan: "腾讯混元",
+  zhinao: "360 智脑",
+  baichuan: "百川 AI",
+  skylark: "火山方舟",
+  bing: "New Bing",
+  palm: "Google PaLM2",
+  midjourney: "Midjourney",
+  oneapi: "One API",
+};
+
+export const ChannelInfos: Record<string, ChannelInfo> = {
+  openai: {
+    id: 0,
+    endpoint: "https://api.openai.com",
+    format: "<api-key>",
+    models: [
+      "gpt-3.5-turbo",
+      "gpt-3.5-turbo-instruct",
+      "gpt-3.5-turbo-0613",
+      "gpt-3.5-turbo-0301",
+      "gpt-3.5-turbo-1106",
+      "gpt-3.5-turbo-16k",
+      "gpt-3.5-turbo-16k-0613",
+      "gpt-3.5-turbo-16k-0301",
+      "gpt-4",
+      "gpt-4-0314",
+      "gpt-4-0613",
+      "gpt-4-1106-preview",
+      "gpt-4-vision-preview",
+      "gpt-4-32k",
+      "gpt-4-32k-0314",
+      "gpt-4-32k-0613",
+      "dall-e-2",
+      "dall-e-3",
+    ],
+  },
+  claude: {
+    id: 1,
+    endpoint: "https://api.anthropic.com",
+    format: "<x-api-key>",
+    models: ["claude-instant-1", "claude-2"],
+  },
+  slack: {
+    id: 2,
+    endpoint: "your-channel",
+    format: "<bot-id>|<xoxp-token>",
+    models: ["claude-slack"],
+  },
+  sparkdesk: {
+    id: 3,
+    endpoint: "wss://spark-api.xf-yun.com",
+    format: "<app-id>|<app-secret>|<api-key>",
+    models: ["spark-desk-v1.5", "spark-desk-v2", "spark-desk-v3"],
+  },
+  chatglm: {
+    id: 4,
+    endpoint: "https://open.bigmodel.cn",
+    format: "<api-key>",
+    models: [
+      "zhipu-chatglm-turbo",
+      "zhipu-chatglm-pro",
+      "zhipu-chatglm-std",
+      "zhipu-chatglm-lite",
+    ],
+  },
+  qwen: {
+    id: 5,
+    endpoint: "https://dashscope.aliyuncs.com",
+    format: "<api-key>",
+    models: ["qwen-turbo", "qwen-plus", "qwen-turbo-net", "qwen-plus-net"],
+  },
+  hunyuan: {
+    id: 6,
+    endpoint: "https://hunyuan.cloud.tencent.com",
+    format: "<app-id>|<secret-id>|<secret-key>",
+    models: ["hunyuan"],
+    // endpoint
+  },
+  zhinao: {
+    id: 7,
+    endpoint: "https://api.360.cn",
+    format: "<api-key>",
+    models: ["360-gpt-v9"],
+  },
+  baichuan: {
+    id: 8,
+    endpoint: "https://api.baichuan-ai.com",
+    format: "<api-key>",
+    models: ["baichuan-53b"],
+  },
+  skylark: {
+    id: 9,
+    endpoint: "https://maas-api.ml-platform-cn-beijing.volces.com",
+    format: "<access-key>|<secret-key>",
+    models: [
+      "skylark-lite-public",
+      "skylark-plus-public",
+      "skylark-pro-public",
+      "skylark-chat",
+    ],
+  },
+  bing: {
+    id: 10,
+    endpoint: "wss://your.bing.service",
+    format: "<secret>",
+    models: ["bing-creative", "bing-balanced", "bing-precise"],
+    description:
+      "> Bing 服务需要自行搭建，详情请参考 [chatnio-bing-service](https://github.com/Deeptrain-Community/chatnio-bing-service) （如为 bing2api 可直接使用 OpenAI 格式映射）",
+  },
+  palm: {
+    id: 11,
+    endpoint: "https://generativelanguage.googleapis.com",
+    format: "<api-key>",
+    models: ["chat-bison-001"],
+  },
+  midjourney: {
+    id: 12,
+    endpoint: "https://your.midjourney.proxy",
+    format: "<mj-api-secret>|<white-list>",
+    models: ["midjourney", "midjourney-fast", "midjourney-turbo"],
+    description:
+      "> 请参考 [midjourney-proxy](https://github.com/novicezk/midjourney-proxy) 项目填入参数，可设置白名单 *white-list* 以限制回调 IP \n" +
+      "> 密钥举例： password|localhost,127.0.0.1,196.128.0.31\n" +
+      "> 注意：**请在系统设置中设置后端的公网 IP / 域名，否则无法接收回调**",
+  },
+  oneapi: {
+    id: 13,
+    endpoint: "https://openai.justsong.cn/api",
+    format: "<api-key>",
+    models: [],
+  },
+};
+
+export const ChannelModels: string[] = Object.values(ChannelInfos).flatMap(
+  (info) => info.models,
+);
diff --git a/app/src/assets/admin/all.less b/app/src/assets/admin/all.less
@@ -2,6 +2,7 @@
 @import "dashboard";
 @import "management";
 @import "broadcast";
+@import "channel";
 
 .admin-page {
   position: relative;

diff --git a/app/src/assets/admin/channel.less b/app/src/assets/admin/channel.less
@@ -0,0 +1,98 @@
+.channel {
+  width: 100%;
+  height: 100%;
+  padding: 2rem;
+  display: flex;
+  flex-direction: column;
+
+  .channel-card {
+    width: 100%;
+    height: 100%;
+    min-height: 20vh;
+  }
+}
+
+.channel-wrapper {
+  display: flex;
+  flex-direction: column;
+  margin-top: 0.5rem;
+  margin-bottom: 2rem;
+
+  & > * {
+    margin-bottom: 1rem;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .channel-row {
+    display: flex;
+    flex-direction: column;
+    user-select: none;
+    white-space: nowrap;
+
+    .channel-content {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      margin-left: 0.25rem;
+      margin-bottom: 0.5rem;
+    }
+  }
+}
+
+.channel-model-wrapper {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  height: max-content;
+  width: 100%;
+  border-radius: var(--radius);
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--background));
+  padding: 1rem;
+  min-height: 5rem;
+
+  .channel-model-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0.25rem 0.5rem;
+    border: 1px solid hsl(var(--border));
+    border-radius: var(--radius);
+    transition: .25s;
+    height: max-content;
+
+    &:hover {
+      border-color: hsl(var(--border-hover));
+    }
+
+    .remove-action {
+      width: 0.75rem;
+      height: 0.75rem;
+      cursor: pointer;
+      margin-left: 0.5rem;
+      color: hsl(var(--text-secondary));
+      transition: .25s;
+
+      &:hover {
+        color: hsl(var(--text-primary));
+      }
+    }
+  }
+}
+
+.channel-model-action {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.channel-description {
+  white-space: break-spaces;
+  line-height: 1em;
+}
diff --git a/app/src/assets/pages/settings.less b/app/src/assets/pages/settings.less
@@ -62,7 +62,7 @@
 
     input {
       text-align: center;
-      max-width: 3.5rem;
+      max-width: 4rem;
       max-height: 1.75rem;
     }
 

diff --git a/app/src/assets/ui.less b/app/src/assets/ui.less
@@ -72,7 +72,54 @@
   }
 }
 
-.model-select-group {
-  transform: translateX(-26px) !important;
-  width: calc(100vw - 72px) !important;
+.no-scrollbar {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: transparent;
+  }
+}
+
+.thin-scrollbar {
+  scrollbar-width: thin;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+}
+
+input[type="number"] {
+  -webkit-appearance: textfield;
+  margin: 0;
+
+  &::-webkit-inner-spin-button,
+  &::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+  }
+
+  &::after {
+    content: '>';
+    position: absolute;
+    right: 5px;
+    top: 2px;
+    transform: rotate(-45deg);
+  }
+
+  &::before {
+    content: '<';
+    position: absolute;
+    right: 5px;
+    top: 20px;
+    transform: rotate(135deg);
+  }
 }