Init project

.eslintignore

@@ -0,0 +1 @@
+src/utils

.eslintrc.js

@@ -0,0 +1,58 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended-requiring-type-checking",
+    "plugin:prettier/recommended",
+  ],
+  overrides: [],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    project: ["./tsconfig.json"],
+  },
+  plugins: [
+    "react",
+    "react-hooks",
+    "@typescript-eslint",
+    "prettier",
+    "simple-import-sort",
+  ],
+  rules: {
+    eqeqeq: "error",
+    "no-else-return": "error",
+    "no-implicit-coercion": ["error", { disallowTemplateShorthand: true }],
+    "no-unneeded-ternary": "error",
+    "no-useless-call": "error",
+    "no-useless-computed-key": "error",
+    "no-useless-concat": "error",
+    "prefer-arrow-callback": "error",
+    "prefer-const": "error",
+    "prefer-rest-params": "error",
+    "prefer-spread": "error",
+    "prefer-template": "error",
+    radix: ["error", "always"],
+    "simple-import-sort/imports": "error",
+    "simple-import-sort/exports": "error",
+    "prettier/prettier": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "react/display-name": "off",
+    "@typescript-eslint/restrict-template-expressions": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/no-floating-promises": "off",
+    "@typescript-eslint/no-unsafe-assignment": "warn",
+    "@typescript-eslint/no-unsafe-member-access": "warn",
+    "@typescript-eslint/no-unsafe-call": "warn",
+    "react-hooks/exhaustive-deps": "warn",
+    "react/no-danger-with-children": "warn",
+    "@typescript-eslint/no-misused-promises": "warn",
+  },
+};

.github/workflows/auto-invite-comment.yml

@@ -0,0 +1,39 @@
+name: Invite users to join OpenIM Community.
+on:
+  issue_comment:
+    types:
+      - created
+jobs:
+  issue_comment:
+    name: Invite users to join OpenIM Community
+    if: ${{ github.event.comment.body == '/invite' || github.event.comment.body == '/close' || github.event.comment.body == '/comment' }}
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+    steps:
+
+      - name: Invite user to join OpenIM Community
+        uses: peter-evans/create-or-update-comment@v4
+        with:
+          token: ${{ secrets.BOT_GITHUB_TOKEN }}
+          issue-number: ${{ github.event.issue.number }}
+          body: |
+            We value close connections with our users, developers, and contributors here at Open-IM-Server. With a large community and maintainer team, we're always here to help and support you. Whether you're looking to join our community or have any questions or suggestions, we welcome you to get in touch with us.
+
+            Our most recommended way to get in touch is through [Slack](https://join.slack.com/t/openimsdk/shared_invite/zt-22720d66b-o_FvKxMTGXtcnnnHiMqe9Q). Even if you're in China, Slack is usually not blocked by firewalls, making it an easy way to connect with us. Our Slack community is the ideal place to discuss and share ideas and suggestions with other users and developers of Open-IM-Server. You can ask technical questions, seek help, or share your experiences with other users of Open-IM-Server.
+            
+            In addition to Slack, we also offer the following ways to get in touch:
+            
+            + <a href="https://join.slack.com/t/openimsdk/shared_invite/zt-22720d66b-o_FvKxMTGXtcnnnHiMqe9Q" target="_blank"><img src="https://img.shields.io/badge/Slack-OpenIM%2B-blueviolet?logo=slack&amp;logoColor=white"></a> We also have Slack channels for you to communicate and discuss. To join, visit https://slack.com/ and join our [👀 Open-IM-Server slack](https://join.slack.com/t/openimsdk/shared_invite/zt-22720d66b-o_FvKxMTGXtcnnnHiMqe9Q) team channel.
+            + <a href="https://mail.google.com/mail/u/0/?fs=1&tf=cm&to=info@openim.io" target="_blank"><img src="https://img.shields.io/badge/gmail-%40OOpenIMSDKCore?style=social&logo=gmail"></a> Get in touch with us on [Gmail](https://mail.google.com/mail/u/0/?fs=1&tf=cm&to=winxu81@gmail.com). If you have any questions or issues that need resolving, or any suggestions and feedback for our open source projects, please feel free to contact us via email.
+            + <a href="https://doc.rentsoft.cn/" target="_blank"><img src="https://img.shields.io/badge/%E5%8D%9A%E5%AE%A2-%40OpenIMSDKCore-blue?style=social&logo=Octopus%20Deploy"></a> Read our [blog](https://doc.rentsoft.cn/). Our blog is a great place to stay up-to-date with Open-IM-Server projects and trends. On the blog, we share our latest developments, tech trends, and other interesting information.
+            + <a href="https://github.com/OpenIMSDK/OpenIM-Docs/blob/main/docs/images/WechatIMG20.jpeg" target="_blank"><img src="https://img.shields.io/badge/%E5%BE%AE%E4%BF%A1-OpenIMSDKCore-brightgreen?logo=wechat&style=flat-square"></a> Add [Wechat](https://github.com/OpenIMSDK/OpenIM-Docs/blob/main/docs/images/WechatIMG20.jpeg) and indicate that you are a user or developer of Open-IM-Server. We will process your request as soon as possible.
+
+      # - name: Close Issue
+      #   uses: peter-evans/close-issue@v3
+      #   with:
+      #     token: ${{ secrets.BOT_GITHUB_TOKEN }}
+      #     issue-number: ${{ github.event.issue.number }}
+      #     comment: 🤖 Auto-closing issue, if you still need help please reopen the issue or ask for help in the community above
+      #     labels: |
+      #       accepted

.github/workflows/cla-assistant.yml

@@ -0,0 +1,40 @@
+name: CLA Assistant
+on:
+  issue_comment:
+    types: [created]
+  pull_request_target:
+    types: [opened,closed,synchronize]
+
+# explicitly configure permissions, in case your GITHUB_TOKEN workflow permissions are set to read-only in repository settings
+permissions:
+  actions: write
+  contents: write # this can be 'read' if the signatures are in remote repository
+  pull-requests: write
+  statuses: write
+
+jobs:
+  CLA-Assistant:
+    runs-on: ubuntu-latest
+    steps:
+      - name: "CLA Assistant"
+        if: (github.event.comment.body == 'recheck' || github.event.comment.body == 'I have read the CLA Document and I hereby sign the CLA') || github.event_name == 'pull_request_target'
+        uses: contributor-assistant/github-action@v2.4.0
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          PERSONAL_ACCESS_TOKEN: ${{ secrets.BOT_TOKEN }}
+        with:
+          path-to-signatures: 'signatures/cla.json'
+          path-to-document: 'https://github.com/OpenIM-Robot/cla/blob/main/README.md' # e.g. a CLA or a DCO document
+          branch: 'main'
+          allowlist: 'bot*,*bot,OpenIM-Robot'
+
+         # the followings are the optional inputs - If the optional inputs are not given, then default values will be taken
+          remote-organization-name: OpenIM-Robot
+          remote-repository-name: cla
+          create-file-commit-message: 'Creating file for storing CLA Signatures'
+          # signed-commit-message: '$contributorName has signed the CLA in $owner/$repo#$pullRequestNo'
+          custom-notsigned-prcomment: '💕 Thank you for your contribution and please kindly read and sign our CLA. [CLA Docs](https://github.com/OpenIM-Robot/cla/blob/main/README.md)'
+          custom-pr-sign-comment: 'I have read the CLA Document and I hereby sign the CLA'
+          custom-allsigned-prcomment: '🤖 All Contributors have signed the [CLA](https://github.com/OpenIM-Robot/cla/blob/main/README.md).<br> The signed information is recorded [**here**](https://github.com/OpenIM-Robot/cla/blob/main/signatures/cla.json)'
+          #lock-pullrequest-aftermerge: false - if you don't want this bot to automatically lock the pull request after merging (default - true)
+          #use-dco-flag: true - If you are using DCO instead of CLA

.github/workflows/comment-check.yml

@@ -0,0 +1,51 @@
+name: Non-English Comments Check
+
+on:
+  pull_request:
+    branches:
+      - main
+  workflow_dispatch:
+
+jobs:
+  non-english-comments-check:
+    runs-on: ubuntu-latest
+
+    env:
+      # need ignore Dirs
+      EXCLUDE_DIRS: ".git docs tests scripts assets node_modules build"
+      # need ignore Files
+      EXCLUDE_FILES: "*.md *.txt *.html *.css *.min.js *.mdx"
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Search for Non-English comments
+        run: |
+          set -e
+          # Define the regex pattern to match Chinese characters
+          pattern='[\p{Han}]'
+
+          # Process the directories to be excluded
+          exclude_dirs=""
+          for dir in $EXCLUDE_DIRS; do
+            exclude_dirs="$exclude_dirs --exclude-dir=$dir"
+          done
+
+          # Process the file types to be excluded
+          exclude_files=""
+          for file in $EXCLUDE_FILES; do
+            exclude_files="$exclude_files --exclude=$file"
+          done
+
+          # Use grep to find all comments containing Non-English characters and save to file
+          grep -Pnr "$pattern" . $exclude_dirs $exclude_files > non_english_comments.txt || true
+
+      - name: Output non-English comments are found
+        run: |
+          if [ -s non_english_comments.txt ]; then
+            echo "Non-English comments found in the following locations:"
+            cat non_english_comments.txt
+            exit 1  # terminate the workflow
+          else
+            echo "No Non_English comments found."
+          fi

.github/workflows/help-comment-issue.yml

@@ -0,0 +1,22 @@
+name: Good frist issue add comment
+on:
+  issues:
+    types:
+      - labeled
+
+jobs:
+  add-comment:
+    if: github.event.label.name == 'help wanted' || github.event.label.name == 'good first issue'
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+    steps:
+      - name: Add comment
+        uses: peter-evans/create-or-update-comment@v4
+        with:
+          issue-number: ${{ github.event.issue.number }}
+          token: ${{ secrets.BOT_TOKEN }}
+          body: |
+            This issue is available for anyone to work on. **Make sure to reference this issue in your pull request.** :sparkles: Thank you for your contribution! :sparkles:
+            [Join slack 🤖](https://join.slack.com/t/openimsdk/shared_invite/zt-22720d66b-o_FvKxMTGXtcnnnHiMqe9Q) to connect and communicate with our developers.
+            If you wish to accept this assignment, please leave a comment in the comments section: `/accept`.🎯

.github/workflows/issue-translator.yml

@@ -0,0 +1,19 @@
+name: 'issue-translator'
+on: 
+  issue_comment: 
+    types: [created]
+  issues: 
+    types: [opened]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: usthe/issues-translate-action@v2.7
+        with:
+          BOT_GITHUB_TOKEN: ${{ secrets.BOT_TOKEN }} 
+          IS_MODIFY_TITLE: true
+          # not require, default false, . Decide whether to modify the issue title
+          # if true, the robot account @Issues-translate-bot must have modification permissions, invite @Issues-translate-bot to your project or use your custom bot.
+          CUSTOM_BOT_NOTE: Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿
+          # not require. Customize the translation robot prefix message.

.gitignore

@@ -0,0 +1,34 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+dist-electron
+package
+release
+*.local
+
+# Editor directories and files
+.vscode/.debug.env
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+#lockfile
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
+/test-results/
+/playwright-report/
+/playwright/.cache/

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no-install commitlint --edit ""

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged

.npmrc

@@ -0,0 +1,2 @@
+shamefully-hoist=true
+ELECTRON_MIRROR="https://npmmirror.com/mirrors/electron/"

.prettierignore

@@ -0,0 +1,2 @@
+src/utils/@openim/wasm-client-sdk
+public

.prettierrc.json

@@ -0,0 +1,11 @@
+{
+  "semi": true,
+  "trailingComma": "all",
+  "printWidth": 88,
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": false,
+  "endOfLine": "lf",
+  "arrowParens": "always",
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

.vscode/.debug.script.mjs

@@ -0,0 +1,23 @@
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { createRequire } from "node:module";
+import { spawn } from "node:child_process";
+
+const pkg = createRequire(import.meta.url)("../package.json");
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+// write .debug.env
+const envContent = Object.entries(pkg.debug.env).map(([key, val]) => `${key}=${val}`);
+fs.writeFileSync(path.join(__dirname, ".debug.env"), envContent.join("\n"));
+
+// bootstrap
+spawn(
+  // TODO: terminate `npm run dev` when Debug exits.
+  process.platform === "win32" ? "npm.cmd" : "npm",
+  ["run", "dev"],
+  {
+    stdio: "inherit",
+    env: Object.assign(process.env, { VSCODE_DEBUG: "true" }),
+  },
+);

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  // See http://go.microsoft.com/fwlink/?LinkId=827846
+  // for the documentation about the extensions.json format
+  "recommendations": ["mrmlnc.vscode-json5"]
+}

.vscode/launch.json

@@ -0,0 +1,47 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "compounds": [
+    {
+      "name": "Debug App",
+      "preLaunchTask": "Before Debug",
+      "configurations": ["Debug Main Process", "Debug Renderer Process"],
+      "presentation": {
+        "hidden": false,
+        "group": "",
+        "order": 1
+      },
+      "stopAll": true
+    }
+  ],
+  "configurations": [
+    {
+      "name": "Debug Main Process",
+      "type": "node",
+      "request": "launch",
+      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
+      "windows": {
+        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
+      },
+      "runtimeArgs": ["--no-sandbox", "--remote-debugging-port=9229", "."],
+      "envFile": "${workspaceFolder}/.vscode/.debug.env",
+      "console": "integratedTerminal"
+    },
+    {
+      "name": "Debug Renderer Process",
+      "port": 9229,
+      "request": "attach",
+      "type": "chrome",
+      "timeout": 60000,
+      "skipFiles": [
+        "<node_internals>/**",
+        "${workspaceRoot}/node_modules/**",
+        "${workspaceRoot}/dist-electron/**",
+        // Skip files in host(VITE_DEV_SERVER_URL)
+        "http://127.0.0.1:7777/**"
+      ]
+    }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.tsc.autoDetect": "off",
+  "json.schemas": [
+    {
+      "fileMatch": ["/*electron-builder.json5", "/*electron-builder.json"],
+      "url": "https://json.schemastore.org/electron-builder"
+    }
+  ]
+}

.vscode/tasks.json

@@ -0,0 +1,31 @@
+{
+  // See https://go.microsoft.com/fwlink/?LinkId=733558
+  // for the documentation about the tasks.json format
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "Before Debug",
+      "type": "shell",
+      "command": "node .vscode/.debug.script.mjs",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "fileLocation": "relative",
+        "pattern": {
+          // TODO: correct "regexp"
+          "regexp": "^([a-zA-Z]\\:/?([\\w\\-]/?)+\\.\\w+):(\\d+):(\\d+): (ERROR|WARNING)\\: (.*)$",
+          "file": 1,
+          "line": 3,
+          "column": 4,
+          "code": 5,
+          "message": 6
+        },
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": "^.*VITE v.*  ready in \\d* ms.*$",
+          "endsPattern": "^.*\\[startup\\] Electron App.*$"
+        }
+      }
+    }
+  ]
+}

LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

README.md

@@ -0,0 +1,101 @@
+<p align="center">
+    <a href="https://www.openim.online">
+        <img src="./docs/images/openim-logo.gif" width="60%" height="30%"/>
+    </a>
+</p>
+
+# OpenIM Electron Demo 💬💻
+
+<p>
+  <a href="https://docs.openim.io/">OpenIM Docs</a>
+  •
+  <a href="https://github.com/openimsdk/open-im-server">OpenIM Server</a>
+  •
+  <a href="https://github.com/openimsdk/open-im-sdk-web-wasm">openim-sdk-wasm</a>
+  •
+  <a href="https://github.com/openimsdk/openim-sdk-core">openim-sdk-core</a>
+</p>
+
+<br>
+
+OpenIM Electron Demo is an open-source instant messaging application built on OpenIM SDK Wasm, OpenIM Server, and Electron. It demonstrates how to quickly integrate instant messaging capabilities into any web app using OpenIM.
+
+## Tech Stack 🛠️
+
+- This is a [`Electron`](https://www.electronjs.org/) project bootstrapped with [`Vite`](https://vitejs.dev/).
+- App is built with [openim-sdk-wasm](https://github.com/openimsdk/open-im-sdk-web-wasm) library.
+
+## Live Demo 🌐
+
+Give it a try at [https://web-enterprise.rentsoft.cn](https://web-enterprise.rentsoft.cn).
+
+## Dev Setup 🛠️
+
+> It is recommended to use node version 16.x-18.x.
+
+Follow these steps to set up a local development environment:
+
+1. Run `npm install` to install all dependencies.
+2. Modify the request address to your own OpenIM Server IP in the following files:
+   > Note: You need to [deploy](https://docs.openim.io/guides/gettingStarted/dockerCompose) OpenIM Server first, the default port of OpenIM Server is 10001, 10002, 10008.
+   - `src/config/index.ts`
+     ```js
+     export const WS_URL = "ws://your-server-ip:10001";
+     export const API_URL = "http://your-server-ip:10002";
+     export const USER_URL = "http://your-server-ip:10008";
+     ```
+3. Run `npm run dev` to start the development server. Visit [http://localhost:5173](http://localhost:5173) to see the result. An Electron application will be launched by default.
+4. Start development! 🎉
+
+## Build 🚀
+
+> This project allows building web applications and Electron applications separately, but there will be some differences during the build process.
+
+### Web Application
+
+1. Run the following command to build the web application:
+   ```bash
+   npm run build
+   ```
+2. The build result will be located in the `dist` folder.
+
+### Electron Application
+
+1. Replace the contents of the `package_electron.json` file with `package.json`, keeping only the dependencies required for Electron to function. This significantly reduces the package size. Also, modify the packaging script.
+2. Run one of the following commands to build the Electron application:
+   - macOS:
+     ```bash
+     npm run build:mac
+     ```
+   - Windows:
+     ```bash
+     npm run build:win
+     ```
+   - Linux:
+     ```bash
+     npm run build:linux
+     ```
+3. The build result will be located in the `package` folder.
+
+## Community :busts_in_silhouette:
+
+- 📚 [OpenIM Community](https://github.com/OpenIMSDK/community)
+- 💕 [OpenIM Interest Group](https://github.com/Openim-sigs)
+- 🚀 [Join our Slack community](https://join.slack.com/t/openimsdk/shared_invite/zt-2ijy1ys1f-O0aEDCr7ExRZ7mwsHAVg9A)
+- :eyes: [Join our wechat (微信群)](https://openim-1253691595.cos.ap-nanjing.myqcloud.com/WechatIMG20.jpeg)
+
+## Community Meetings :calendar:
+
+We want anyone to get involved in our community and contributing code, we offer gifts and rewards, and we welcome you to join us every Thursday night.
+
+Our conference is in the [OpenIM Slack](https://join.slack.com/t/openimsdk/shared_invite/zt-2ijy1ys1f-O0aEDCr7ExRZ7mwsHAVg9A) 🎯, then you can search the Open-IM-Server pipeline to join
+
+We take notes of each [biweekly meeting](https://github.com/orgs/OpenIMSDK/discussions/categories/meeting) in [GitHub discussions](https://github.com/openimsdk/open-im-server/discussions/categories/meeting), Our historical meeting notes, as well as replays of the meetings are available at [Google Docs :bookmark_tabs:](https://docs.google.com/document/d/1nx8MDpuG74NASx081JcCpxPgDITNTpIIos0DS6Vr9GU/edit?usp=sharing).
+
+## Who are using OpenIM :eyes:
+
+Check out our [user case studies](https://github.com/OpenIMSDK/community/blob/main/ADOPTERS.md) page for a list of the project users. Don't hesitate to leave a [📝comment](https://github.com/openimsdk/open-im-server/issues/379) and share your use case.
+
+## License :page_facing_up:
+
+OpenIM is licensed under the Apache 2.0 license. See [LICENSE](https://github.com/openimsdk/open-im-server/tree/main/LICENSE) for the full license text.

README.zh-CN.md

@@ -0,0 +1,105 @@
+<p align="center">
+    <a href="https://www.openim.online">
+        <img src="./docs/images/openim-logo.gif" width="60%" height="30%"/>
+    </a>
+</p>
+
+# OpenIM Electron Demo 💬💻
+
+<p>
+  <a href="https://docs.openim.io/">OpenIM Docs</a>
+  •
+  <a href="https://github.com/openimsdk/open-im-server">OpenIM Server</a>
+  •
+  <a href="https://github.com/openimsdk/open-im-sdk-web-wasm">openim-sdk-wasm</a>
+  •
+  <a href="https://github.com/openimsdk/openim-sdk-core">openim-sdk-core</a>
+</p>
+
+<br>
+
+OpenIM Electron Demo 是一个基于`openim-sdk-wasm`、`openim-server`和`Electron`构建的开源即时通讯应用程序。它演示了如何使用 OpenIM 快速的将即时通讯功能集成到任何 Web 应用程序中。
+
+## 技术栈 🛠️
+
+- 这是一个使用 [`Electron`](https://www.electronjs.org/) 和 [`Vite`](https://vitejs.dev/) 构建的项目。
+- 应用程序使用了 [openim-sdk-wasm](https://github.com/openimsdk/open-im-sdk-web-wasm) 库构建。
+
+## 在线演示 🌐
+
+在 [https://web-enterprise.rentsoft.cn](https://web-enterprise.rentsoft.cn) 上体验一下。
+
+## 开发设置 🛠️
+
+> 建议使用 node 版本 16.x-18.x。
+
+按照以下步骤设置本地开发环境：
+
+1. 运行 `npm install` 来安装所有依赖项。
+2. 在以下文件中将请求地址修改为您自己的 OpenIM 服务器 IP：
+   > 注意：您需要先[部署](https://docs.openim.io/zh-Hans/guides/gettingStarted/dockerCompose) OpenIM 服务器，默认端口为 10001、10002、10008。
+   - `src/config/index.ts`
+     ```js
+     export const WS_URL = "ws://your-server-ip:10001";
+     export const API_URL = "http://your-server-ip:10002";
+     export const USER_URL = "http://your-server-ip:10008";
+     ```
+3. 运行 `npm run dev` 来启动开发服务器。访问 [http://localhost:5173](http://localhost:5173) 查看结果。默认情况下将启动 Electron 应用程序。
+4. 开始开发！ 🎉
+
+## 构建 🚀
+
+> 该项目允许分别构建 Web 应用程序和 Electron 应用程序，但在构建过程中会有一些差异。
+
+### Web 应用程序
+
+1. 运行以下命令来构建 Web 应用程序：
+   ```bash
+   npm run build
+   ```
+2. 构建结果将位于 `dist` 文件夹中。
+
+### Electron 应用程序
+
+1. 使用 `package.json` 替换 `package_electron.json` 文件的内容，只保留 Electron 运行所需的依赖项。这将显著减小包的大小。同时，修改打包脚本。
+2. 运行以下命令之一来构建 Electron 应用程序：
+   - macOS:
+     ```bash
+     npm run build:mac
+     ```
+   - Windows:
+     ```bash
+     npm run build:win
+     ```
+   - Linux:
+     ```bash
+     npm run build:linux
+     ```
+3. 构建结果将位于 `package` 文件夹中。
+
+## 社区 :busts_in_silhouette:
+
+- 📚 [OpenIM 社区](https://github.com/OpenIMSDK/community)
+- 💕 [OpenIM 兴趣小组](https://github.com/Openim-sigs)
+- 🚀 [加入我们的 Slack 社区](https://join.slack.com/t/openimsdk/shared_invite/zt-22720d66b-o_FvKxMTGXtcnnnHiMqe9Q)
+- :eyes: [加入我们的微信群](https://openim-1253691595.cos.ap-nanjing.myqcloud.com/WechatIMG20.jpeg)
+
+## 社区会议 :calendar:
+
+我们希望任何人都能参与我们的社区并贡献代码，我们提供礼品和奖励，并欢迎您每个星期四晚上加入我们。
+
+我们的会议在 [OpenIM Slack](https://join.slack.com/t/openimsdk/shared_invite/zt-22720d66b-o_FvKxMTGXtcnnnHiMqe9Q) 🎯，然后您可以搜索 Open-IM-Server 管道加入
+
+我们在[GitHub discussions](https://github.com/openimsdk/open-im-server/discussions/categories/meeting)中记录了每一次[双周会议](https://github.com/orgs/OpenIMSDK/discussions/categories/meeting)的内容，我们的历史会议记录以及会议的回放都可以在[Google Docs :bookmark_tabs:](https://docs.google.com/document/d/1nx8MDpuG74NASx081JcCpxPgDITNTpIIos0DS6Vr9GU/edit?usp=sharing)中找到。
+
+## 谁在使用 OpenIM :eyes:
+
+查看我们的[用户案例](https://github.com/OpenIMSDK/community/blob/main/ADOPTERS.md)页面，以获取正在使用改项目用户的列表。不要犹豫留下[📝 评论](https://github.com/openimsdk/open-im-server/issues/379)并分享您的使用情况。
+
+## LICENSE :page_facing_up:
+
+OpenIM 在 Apache 2.0 许可下发布。查看[LICENSE](https://github.com/openimsdk/open-im-server/tree/main/LICENSE)以获取完整的信息。
+
+```
+
+```

commitlint.config.js

@@ -0,0 +1,132 @@
+module.exports = {
+  parserPreset: "conventional-changelog-conventionalcommits",
+  rules: {
+    "body-leading-blank": [1, "always"],
+    "body-max-line-length": [2, "always", 100],
+    "footer-leading-blank": [1, "always"],
+    "footer-max-line-length": [2, "always", 100],
+    "header-max-length": [2, "always", 100],
+    "subject-case": [
+      2,
+      "never",
+      ["sentence-case", "start-case", "pascal-case", "upper-case"],
+    ],
+    "subject-empty": [2, "never"],
+    "subject-full-stop": [2, "never", "."],
+    "type-case": [2, "always", "lower-case"],
+    "type-empty": [2, "never"],
+    "type-enum": [
+      2,
+      "always",
+      [
+        "build",
+        "chore",
+        "ci",
+        "docs",
+        "feat",
+        "fix",
+        "perf",
+        "refactor",
+        "revert",
+        "style",
+        "test",
+      ],
+    ],
+  },
+  prompt: {
+    questions: {
+      type: {
+        description: "Select the type of change that you're committing",
+        enum: {
+          feat: {
+            description: "A new feature",
+            title: "Features",
+            emoji: "✨",
+          },
+          fix: {
+            description: "A bug fix",
+            title: "Bug Fixes",
+            emoji: "🐛",
+          },
+          docs: {
+            description: "Documentation only changes",
+            title: "Documentation",
+            emoji: "📚",
+          },
+          style: {
+            description:
+              "Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)",
+            title: "Styles",
+            emoji: "💎",
+          },
+          refactor: {
+            description: "A code change that neither fixes a bug nor adds a feature",
+            title: "Code Refactoring",
+            emoji: "📦",
+          },
+          perf: {
+            description: "A code change that improves performance",
+            title: "Performance Improvements",
+            emoji: "🚀",
+          },
+          test: {
+            description: "Adding missing tests or correcting existing tests",
+            title: "Tests",
+            emoji: "🚨",
+          },
+          build: {
+            description:
+              "Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)",
+            title: "Builds",
+            emoji: "🛠",
+          },
+          ci: {
+            description:
+              "Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)",
+            title: "Continuous Integrations",
+            emoji: "⚙️",
+          },
+          chore: {
+            description: "Other changes that don't modify src or test files",
+            title: "Chores",
+            emoji: "♻️",
+          },
+          revert: {
+            description: "Reverts a previous commit",
+            title: "Reverts",
+            emoji: "🗑",
+          },
+        },
+      },
+      scope: {
+        description: "What is the scope of this change (e.g. component or file name)",
+      },
+      subject: {
+        description: "Write a short, imperative tense description of the change",
+      },
+      body: {
+        description: "Provide a longer description of the change",
+      },
+      isBreaking: {
+        description: "Are there any breaking changes?",
+      },
+      breakingBody: {
+        description:
+          "A BREAKING CHANGE commit requires a body. Please enter a longer description of the commit itself",
+      },
+      breaking: {
+        description: "Describe the breaking changes",
+      },
+      isIssueAffected: {
+        description: "Does this change affect any open issues?",
+      },
+      issuesBody: {
+        description:
+          "If issues are closed, the commit requires a body. Please enter a longer description of the commit itself",
+      },
+      issues: {
+        description: 'Add issue references (e.g. "fix #123", "re #123".)',
+      },
+    },
+  },
+};

e2e/example.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect, _electron as electron } from "@playwright/test";
+
+test("homepage has title and links to intro page", async () => {
+  const app = await electron.launch({ args: [".", "--no-sandbox"] });
+  const page = await app.firstWindow();
+  expect(await page.title()).toBe("OpenIM");
+  await page.screenshot({ path: "e2e/screenshots/example.png" });
+});

electron-builder.json5

@@ -0,0 +1,44 @@
+/**
+ * @see https://www.electron.build/configuration/configuration
+ */
+{
+  appId: "io.openim.desktop.demo",
+  asar: true,
+  extends: null,
+  directories: {
+    output: "release/Demo/${version}",
+  },
+  files: ["dist-electron", "dist"],
+  productName: "OpenIM-Demo",
+  mac: {
+    artifactName: "${productName}_${version}_${arch}.${ext}",
+    target: ["dmg"],
+    icon: "./dist/icons/mac_icon.png",
+  },
+  win: {
+    target: [
+      {
+        target: "nsis",
+        arch: ["x64"],
+      },
+    ],
+    artifactName: "${productName}_${version}.${ext}",
+    icon: "./dist/icons/icon.ico",
+  },
+  linux: {
+    icon: "./dist/icons/icon.png",
+    target: "deb",
+    maintainer: "openim-demo",
+    artifactName: "${productName}_${version}_${arch}.${ext}",
+  },
+  nsis: {
+    oneClick: false,
+    perMachine: true,
+    allowElevation: true,
+    allowToChangeInstallationDirectory: true,
+    createDesktopShortcut: true,
+    createStartMenuShortcut: true,
+    deleteAppDataOnUninstall: true,
+    shortcutName: "OpenIM-Demo",
+  },
+}

electron/constants/index.ts

@@ -0,0 +1,9 @@
+export const IpcRenderToMain = {
+  minimizeWindow: "minimizeWindow",
+  maxmizeWindow: "maxmizeWindow",
+  closeWindow: "closeWindow",
+  setKeyStore: "setKeyStore",
+  getKeyStore: "getKeyStore",
+  getKeyStoreSync: "getKeyStoreSync",
+  getDataPath: "getDataPath",
+};

electron/electron-env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite-electron-plugin/electron-env" />
+
+declare namespace NodeJS {
+  interface ProcessEnv {
+    VSCODE_DEBUG?: "true";
+  }
+}

electron/i18n/index.ts

@@ -0,0 +1,37 @@
+import i18n from "i18next";
+
+import { getStore } from "../main/storeManage";
+import { app } from "electron";
+
+import translation_en from "./resources/en-US";
+import translation_zh from "./resources/zh-CN";
+
+const store = getStore();
+
+export const initI18n = () => {
+  const systemLanguage = app.getLocale();
+  const language = store.get("language", systemLanguage) as string;
+
+  const resources = {
+    "en-US": {
+      translation: translation_en,
+    },
+    "zh-CN": {
+      translation: translation_zh,
+    },
+  };
+
+  i18n.init(
+    {
+      resources,
+      lng: language,
+      fallbackLng: "en-US",
+    },
+    (err) => {
+      if (err) return console.error("Error loading i18n resources:", err);
+      console.log("i18n resources loaded successfully");
+    },
+  );
+};
+
+export const changeLanguage = i18n.changeLanguage;

electron/i18n/resources/en-US.ts

@@ -0,0 +1,21 @@
+export default {
+  system: {
+    showWindow: "ShowWindow",
+    hideWindow: "HideWindow",
+    hide: "Hide",
+    about: "About",
+    quit: "Quit",
+    window: "Window",
+    toggleDevTools: "ToggleDevTools",
+    minimize: "Minimize",
+    close: "Close",
+    copy: "Copy",
+    paste: "Paste",
+    cut: "Cut",
+    undo: "Undo",
+    redo: "Redo",
+    selectAll: "SelectAll",
+    fastKeys: "FastKeys",
+    magnifier_position_label:"Position"
+  },
+};

electron/i18n/resources/zh-CN.ts

@@ -0,0 +1,21 @@
+export default {
+  system: {
+    showWindow: "显示",
+    hideWindow: "隐藏",
+    hide: "隐藏",
+    about: "关于",
+    quit: "退出",
+    window: "窗口",
+    toggleDevTools: "调试",
+    minimize: "最小化",
+    close: "关闭",
+    copy: "复制",
+    paste: "粘贴",
+    cut: "剪切",
+    undo: "撤销",
+    redo: "重做",
+    selectAll: "全选",
+    fastKeys: "快键键",
+    magnifier_position_label: "坐标",
+  },
+};

electron/main/appManage.ts

@@ -0,0 +1,78 @@
+import { app, shell } from "electron";
+import { isExistMainWindow, showWindow } from "./windowManage";
+import { join } from "node:path";
+import { release } from "node:os";
+import { isMac, isProd, isWin } from "../utils";
+import { getStore } from "./storeManage";
+
+const store = getStore();
+
+export const setSingleInstance = () => {
+  if (!app.requestSingleInstanceLock()) {
+    app.quit();
+    process.exit(0);
+  }
+
+  app.on("second-instance", () => {
+    showWindow();
+  });
+};
+
+export const setAppListener = (startApp: () => void) => {
+  app.on("web-contents-created", (event, contents) => {
+    contents.setWindowOpenHandler(({ url }) => {
+      if (!/^devtools/.test(url) && /^https?:\/\//.test(url)) {
+        shell.openExternal(url);
+      }
+      return { action: "deny" };
+    });
+  });
+
+  app.on("activate", () => {
+    if (isExistMainWindow()) {
+      showWindow();
+    } else {
+      startApp();
+    }
+  });
+
+  app.on("window-all-closed", () => {
+    if (isMac && !getIsForceQuit()) return;
+
+    app.quit();
+  });
+};
+
+export const performAppStartup = () => {
+  app.setAppUserModelId(app.getName());
+
+  app.commandLine.appendSwitch("--autoplay-policy", "no-user-gesture-required");
+  app.commandLine.appendSwitch(
+    "disable-features",
+    "HardwareMediaKeyHandling,MediaSessionService",
+  );
+
+  // Disable GPU Acceleration for Windows 7
+  if (release().startsWith("6.1")) app.disableHardwareAcceleration();
+};
+
+export const setAppGlobalData = () => {
+  const electronDistPath = join(__dirname, "../");
+  const distPath = join(electronDistPath, "../dist");
+  const publicPath = isProd ? distPath : join(electronDistPath, "../public");
+  const asarPath = join(distPath, "/../..");
+
+  global.pathConfig = {
+    electronDistPath,
+    distPath,
+    publicPath,
+    asarPath,
+    trayIcon: join(publicPath, `/icons/${isWin ? "icon.ico" : "tray.png"}`),
+    indexHtml: join(distPath, "index.html"),
+    splashHtml: join(distPath, "splash.html"),
+    preload: join(__dirname, "../preload/index.js"),
+  };
+};
+
+export const getIsForceQuit = () =>
+  store.get("closeAction") === "quit" || global.forceQuit;

electron/main/index.ts

@@ -0,0 +1,30 @@
+import { app } from "electron";
+import { createMainWindow } from "./windowManage";
+import { createTray } from "./trayManage";
+import { setIpcMainListener } from "./ipcHandlerManage";
+import {
+  performAppStartup,
+  setAppGlobalData,
+  setAppListener,
+  setSingleInstance,
+} from "./appManage";
+import createAppMenu from "./menuManage";
+import { isLinux } from "../utils";
+import { initI18n } from "../i18n";
+
+const init = () => {
+  initI18n();
+  createMainWindow();
+  createAppMenu();
+  createTray();
+};
+
+setAppGlobalData();
+performAppStartup();
+setIpcMainListener();
+setSingleInstance();
+setAppListener(init);
+
+app.whenReady().then(() => {
+  isLinux ? setTimeout(init, 300) : init();
+});

electron/main/ipcHandlerManage.ts

@@ -0,0 +1,49 @@
+import { app, ipcMain } from "electron";
+import { closeWindow, minimize, splashEnd, updateMaximize } from "./windowManage";
+import { IpcRenderToMain } from "../constants";
+import { getStore } from "./storeManage";
+import { changeLanguage } from "../i18n";
+
+const store = getStore();
+
+export const setIpcMainListener = () => {
+  // window manage
+  ipcMain.handle("changeLanguage", (_, locale) => {
+    store.set("language", locale);
+    changeLanguage(locale).then(() => {
+      app.relaunch();
+      app.exit(0);
+    });
+  });
+  ipcMain.handle("main-win-ready", () => {
+    splashEnd();
+  });
+  ipcMain.handle(IpcRenderToMain.minimizeWindow, () => {
+    minimize();
+  });
+  ipcMain.handle(IpcRenderToMain.maxmizeWindow, () => {
+    updateMaximize();
+  });
+  ipcMain.handle(IpcRenderToMain.closeWindow, () => {
+    closeWindow();
+  });
+  ipcMain.handle(IpcRenderToMain.setKeyStore, (_, { key, data }) => {
+    store.set(key, data);
+  });
+  ipcMain.handle(IpcRenderToMain.getKeyStore, (_, { key }) => {
+    return store.get(key);
+  });
+  ipcMain.on(IpcRenderToMain.getKeyStoreSync, (e, { key }) => {
+    e.returnValue = store.get(key);
+  });
+  ipcMain.on(IpcRenderToMain.getDataPath, (e, key: string) => {
+    switch (key) {
+      case "public":
+        e.returnValue = global.pathConfig.publicPath;
+        break;
+      default:
+        e.returnValue = global.pathConfig.publicPath;
+        break;
+    }
+  });
+};

electron/main/menuManage.ts

@@ -0,0 +1,55 @@
+import { app, Menu } from "electron";
+import { t } from "i18next";
+import { isMac } from "../utils";
+
+const createAppMenu = () => {
+  if (isMac) {
+    const template: Electron.MenuItemConstructorOptions[] = [
+      {
+        label: app.getName(),
+        submenu: [
+          { label: t("system.about"), role: "about" },
+          { type: "separator" },
+          { label: t("system.hide"), role: "hide" },
+          { type: "separator" },
+          {
+            label: t("system.quit"),
+            click: () => {
+              global.forceQuit = true;
+              app.quit();
+            },
+          },
+        ],
+      },
+      {
+        label: t("system.fastKeys"),
+        submenu: [
+          { label: t("system.copy"), role: "copy", accelerator: "CmdOrCtrl+C" },
+          { label: t("system.paste"), role: "paste", accelerator: "CmdOrCtrl+V" },
+          { label: t("system.cut"), role: "cut", accelerator: "CmdOrCtrl+X" },
+          { label: t("system.undo"), role: "undo", accelerator: "CmdOrCtrl+Z" },
+          { label: t("system.redo"), role: "redo", accelerator: "CmdOrCtrl+Y" },
+          {
+            label: t("system.selectAll"),
+            role: "selectAll",
+            accelerator: "CmdOrCtrl+A",
+          },
+        ],
+      },
+      {
+        label: t("system.window"),
+        role: "window",
+        submenu: [
+          { label: t("system.minimize"), role: "minimize", accelerator: "CmdOrCtrl+W" },
+          { label: t("system.close"), role: "close" },
+        ],
+      },
+    ];
+
+    Menu.setApplicationMenu(Menu.buildFromTemplate(template));
+  } else {
+    Menu.setApplicationMenu(null);
+  }
+};
+
+export default createAppMenu;

electron/main/shortcutManage.ts

@@ -0,0 +1,10 @@
+import { globalShortcut } from "electron";
+import { toggleDevTools } from "./windowManage";
+
+export const registerShortcuts = () => {
+  globalShortcut.register("CmdOrCtrl+F12", toggleDevTools);
+};
+
+export const unregisterShortcuts = () => {
+  globalShortcut.unregisterAll();
+};

electron/main/storeManage.ts

@@ -0,0 +1,12 @@
+import Store from "electron-store";
+
+let store: Store;
+
+export const getStore = () => {
+  if (!store) {
+    store = new Store();
+  }
+  return store;
+};
+
+export { Store };

electron/main/trayManage.ts

@@ -0,0 +1,41 @@
+import { app, Menu, Tray } from "electron";
+import { t } from "i18next";
+import { hideWindow, showWindow } from "./windowManage";
+
+let appTray: Tray;
+
+export const createTray = () => {
+  const trayMenu = Menu.buildFromTemplate([
+    {
+      label: t("system.showWindow"),
+      click: showWindow,
+    },
+    {
+      label: t("system.hideWindow"),
+      click: hideWindow,
+    },
+    {
+      label: t("system.toggleDevTools"),
+      role: "toggleDevTools",
+    },
+    {
+      label: t("system.quit"),
+      click: () => {
+        global.forceQuit = true;
+        app.quit();
+      },
+    },
+  ]);
+  appTray = new Tray(global.pathConfig.trayIcon);
+  appTray.setToolTip(app.getName());
+  appTray.setIgnoreDoubleClickEvents(true);
+  appTray.on("click", showWindow);
+
+  appTray.setContextMenu(trayMenu);
+};
+
+export const destroyTray = () => {
+  if (!appTray || appTray.isDestroyed()) return;
+  appTray.destroy();
+  appTray = null;
+};

electron/main/windowManage.ts

@@ -0,0 +1,191 @@
+import { join } from "node:path";
+import { BrowserWindow, shell } from "electron";
+import { isLinux, isMac, isWin } from "../utils";
+import { destroyTray } from "./trayManage";
+import { getStore } from "./storeManage";
+import { getIsForceQuit } from "./appManage";
+import { registerShortcuts, unregisterShortcuts } from "./shortcutManage";
+
+const url = process.env.VITE_DEV_SERVER_URL;
+let mainWindow: BrowserWindow | null = null;
+let splashWindow: BrowserWindow | null = null;
+
+const store = getStore();
+
+function createSplashWindow() {
+  splashWindow = new BrowserWindow({
+    frame: false,
+    width: 200,
+    height: 200,
+    resizable: false,
+    transparent: true,
+  });
+  splashWindow.loadFile(global.pathConfig.splashHtml);
+  splashWindow.on("closed", () => {
+    splashWindow = null;
+  });
+}
+
+export function createMainWindow() {
+  createSplashWindow();
+  mainWindow = new BrowserWindow({
+    title: "OpenIM",
+    icon: join(global.pathConfig.publicPath, "favicon.ico"),
+    frame: false,
+    show: false,
+    minWidth: 680,
+    minHeight: 550,
+    titleBarStyle: "hiddenInset",
+    webPreferences: {
+      preload: global.pathConfig.preload,
+      // Warning: Enable nodeIntegration and disable contextIsolation is not secure in production
+      // Consider using contextBridge.exposeInMainWorld
+      // Read more on https://www.electronjs.org/docs/latest/tutorial/context-isolation
+      nodeIntegration: false,
+      contextIsolation: true,
+      sandbox: false,
+      devTools: true,
+      webSecurity: false,
+    },
+  });
+
+  if (process.env.VITE_DEV_SERVER_URL) {
+    // Open devTool if the app is not packaged
+    mainWindow.loadURL(url);
+  } else {
+    mainWindow.loadFile(global.pathConfig.indexHtml);
+  }
+
+  // // Make all links open with the browser, not with the application
+  mainWindow.webContents.setWindowOpenHandler(({ url }) => {
+    if (url.startsWith("https:")) shell.openExternal(url);
+    return { action: "deny" };
+  });
+
+  mainWindow.on("focus", () => {
+    mainWindow?.flashFrame(false);
+    registerShortcuts();
+  });
+
+  mainWindow.on("blur", () => {
+    unregisterShortcuts();
+  });
+
+  mainWindow.on("close", (e) => {
+    if (
+      getIsForceQuit() ||
+      !mainWindow.isVisible() ||
+      store.get("closeAction") === "quit"
+    ) {
+      mainWindow = null;
+      destroyTray();
+    } else {
+      e.preventDefault();
+      if (isMac && mainWindow.isFullScreen()) {
+        mainWindow.setFullScreen(false);
+      }
+      mainWindow?.hide();
+    }
+  });
+  return mainWindow;
+}
+
+export function splashEnd() {
+  splashWindow?.close();
+  mainWindow?.show();
+}
+
+// utils
+export const isExistMainWindow = (): boolean =>
+  !!mainWindow && !mainWindow?.isDestroyed();
+export const isShowMainWindow = (): boolean => {
+  if (!mainWindow) return false;
+  return mainWindow.isVisible() && (isWin ? true : mainWindow.isFocused());
+};
+
+export const closeWindow = () => {
+  if (!mainWindow) return;
+  mainWindow.close();
+};
+
+export const sendEvent = (name: string, ...args: any[]) => {
+  if (!mainWindow) return;
+  mainWindow.webContents.send(name, ...args);
+};
+
+export const minimize = () => {
+  if (!mainWindow) return;
+  mainWindow.minimize();
+};
+export const updateMaximize = () => {
+  if (!mainWindow) return;
+  if (mainWindow.isMaximized()) {
+    mainWindow.unmaximize();
+  } else {
+    mainWindow.maximize();
+  }
+};
+export const toggleHide = () => {
+  if (!mainWindow) return;
+  mainWindow.isVisible() ? mainWindow.hide() : mainWindow.show();
+};
+export const toggleMinimize = () => {
+  if (!mainWindow) return;
+  if (mainWindow.isMinimized()) {
+    if (!mainWindow.isVisible()) {
+      mainWindow.show();
+    }
+    mainWindow.restore();
+    mainWindow.focus();
+  } else {
+    mainWindow.minimize();
+  }
+};
+export const showWindow = () => {
+  if (!mainWindow) return;
+  if (mainWindow.isMinimized()) {
+    mainWindow.restore();
+  }
+  if (mainWindow.isVisible()) {
+    mainWindow.focus();
+  } else {
+    mainWindow.show();
+  }
+};
+export const hideWindow = () => {
+  if (!mainWindow) return;
+  mainWindow.hide();
+};
+
+export const setFullScreen = (isFullscreen: boolean): boolean => {
+  if (!mainWindow) return false;
+  if (isLinux) {
+    // linux It needs to be resizable before it can be full screen
+    if (isFullscreen) {
+      mainWindow.setResizable(isFullscreen);
+      mainWindow.setFullScreen(isFullscreen);
+    } else {
+      mainWindow.setFullScreen(isFullscreen);
+      mainWindow.setResizable(isFullscreen);
+    }
+  } else {
+    mainWindow.setFullScreen(isFullscreen);
+  }
+  return isFullscreen;
+};
+
+export const getWebContents = (): Electron.WebContents => {
+  if (!mainWindow) throw new Error("main window is undefined");
+  return mainWindow.webContents;
+};
+
+export const toggleDevTools = () => {
+  if (!mainWindow) return;
+  if (mainWindow.webContents.isDevToolsOpened()) {
+    mainWindow.webContents.closeDevTools();
+  } else {
+    mainWindow.webContents.openDevTools({
+      mode: "detach",
+    });
+  }
+};

electron/preload/index.ts

@@ -0,0 +1,83 @@
+import fs from "fs";
+import path from "path";
+import os from "os";
+import { DataPath, IElectronAPI } from "./../../src/types/globalExpose.d";
+import { contextBridge, ipcRenderer, shell } from "electron";
+import { isProd } from "../utils";
+
+const getPlatform = () => {
+  if (process.platform === "darwin") {
+    return 4;
+  }
+  if (process.platform === "win32") {
+    return 3;
+  }
+  return 7;
+};
+
+const getDataPath = (key: DataPath) => {
+  switch (key) {
+    case "public":
+      return isProd ? ipcRenderer.sendSync("getDataPath", "public") : "";
+    default:
+      return "";
+  }
+};
+
+const subscribe = (channel: string, callback: (...args: any[]) => void) => {
+  const subscription = (_, ...args) => callback(...args);
+  ipcRenderer.on(channel, subscription);
+  return () => ipcRenderer.removeListener(channel, subscription);
+};
+
+const subscribeOnce = (channel: string, callback: (...args: any[]) => void) => {
+  ipcRenderer.once(channel, (_, ...args) => callback(...args));
+};
+
+const unsubscribeAll = (channel: string) => {
+  ipcRenderer.removeAllListeners(channel);
+};
+
+const ipcInvoke = (channel: string, ...arg: any) => {
+  return ipcRenderer.invoke(channel, ...arg);
+};
+
+const ipcSendSync = (channel: string, ...arg: any) => {
+  return ipcRenderer.sendSync(channel, ...arg);
+};
+
+const saveFileToDisk = async ({
+  file,
+  sync,
+}: {
+  file: File;
+  sync?: boolean;
+}): Promise<string> => {
+  const arrayBuffer = await file.arrayBuffer();
+  const saveDir = ipcRenderer.sendSync("getDataPath", "userData");
+  const savePath = path.join(saveDir, file.name);
+  if (!fs.existsSync(saveDir)) {
+    fs.mkdirSync(saveDir, { recursive: true });
+  }
+  if (sync) {
+    await fs.promises.writeFile(savePath, Buffer.from(arrayBuffer));
+  } else {
+    fs.promises.writeFile(savePath, Buffer.from(arrayBuffer));
+  }
+  return savePath;
+};
+
+const Api: IElectronAPI = {
+  getDataPath,
+  getVersion: () => process.version,
+  getPlatform,
+  getSystemVersion: process.getSystemVersion,
+  subscribe,
+  subscribeOnce,
+  unsubscribeAll,
+  ipcInvoke,
+  ipcSendSync,
+  saveFileToDisk,
+};
+
+contextBridge.exposeInMainWorld("electronAPI", Api);

electron/utils/index.ts

@@ -0,0 +1,4 @@
+export const isLinux = process.platform == "linux";
+export const isWin = process.platform == "win32";
+export const isMac = process.platform == "darwin";
+export const isProd = !process.env.VITE_DEV_SERVER_URL;

index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- <meta
+      http-equiv="Content-Security-Policy"
+      content="script-src 'self' 'unsafe-inline';"
+    /> -->
+    <title>OpenIM-Demo</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+    <script src="./wasm_exec.js"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,115 @@
+{
+  "name": "OpenIM-Demo",
+  "version": "1.0.0",
+  "main": "dist-electron/main/index.js",
+  "description": "OpenIM Electron Demo.",
+  "author": "blooming",
+  "private": true,
+  "debug": {
+    "env": {
+      "VITE_DEV_SERVER_URL": "http://127.0.0.1:7777/"
+    }
+  },
+  "scripts": {
+    "dev": "vite --force --host",
+    "build": "tsc && vite build && electron-builder",
+    "preview": "vite preview",
+    "build:mac": "vite build  &&  electron-builder --macos --x64",
+    "build:mac-arm": "vite build  &&  electron-builder --macos --arm64",
+    "build:win": "vite build  &&  electron-builder --win --x64",
+    "build:win-arm": "vite build  &&  electron-builder --win --arm64",
+    "build:linux": "vite build  &&  electron-builder --linux --x64",
+    "build:linux-arm": "vite build  &&  electron-builder --linux --arm64",
+    "pree2e": "vite build --mode=test",
+    "e2e": "playwright test",
+    "format": "prettier --write .",
+    "lint": "eslint --ext .js,.jsx,.ts,.tsx src",
+    "lint:fix": "eslint --ext .js,.jsx,.ts,.tsx --fix --quiet src",
+    "prepare": "husky install"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^17.4.4",
+    "@commitlint/config-conventional": "^17.4.4",
+    "@playwright/test": "^1.31.0",
+    "@types/md5": "^2.3.2",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@types/uuid": "^9.0.1",
+    "@typescript-eslint/eslint-plugin": "^5.53.0",
+    "@typescript-eslint/parser": "^5.53.0",
+    "@vitejs/plugin-legacy": "^4.1.0",
+    "@vitejs/plugin-react": "^3.1.0",
+    "autoprefixer": "^10.4.13",
+    "electron": "^22.3.27",
+    "electron-builder": "^23.6.0",
+    "eslint": "^8.34.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.1.2",
+    "patch-package": "^8.0.0",
+    "postcss": "^8.4.21",
+    "postcss-nesting": "^12.0.2",
+    "prettier": "^2.8.4",
+    "prettier-plugin-tailwindcss": "^0.2.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sass": "^1.58.3",
+    "tailwindcss": "^3.2.7",
+    "terser": "^5.19.0",
+    "typescript": "^4.9.5",
+    "vite": "^4.1.4",
+    "vite-electron-plugin": "^0.8.2",
+    "vite-plugin-electron": "^0.11.1"
+  },
+  "engines": {
+    "node": "^14.18.0 || >=16.0.0"
+  },
+  "lint-staged": {
+    "src/**/*.{tsx,ts}": [
+      "prettier --write",
+      "eslint --fix"
+    ],
+    "*.{json,html,css,scss,xml,md}": [
+      "prettier --write"
+    ]
+  },
+  "dependencies": {
+    "@ant-design/icons": "^5.1.4",
+    "@ckeditor/ckeditor5-react": "^8.0.0",
+    "@livekit/components-react": "^2.3.1",
+    "@livekit/components-styles": "^1.0.12",
+    "@openim/wasm-client-sdk": "^3.8.2",
+    "ahooks": "^3.7.7",
+    "antd": "5.10.0",
+    "axios": "^1.4.0",
+    "ckeditor5": "^43.0.0",
+    "clsx": "^1.2.1",
+    "date-fns": "^2.30.0",
+    "dayjs": "^1.11.7",
+    "electron-store": "^8.1.0",
+    "emoji-picker-element": "^1.21.3",
+    "i18next": "^22.5.0",
+    "i18next-browser-languagedetector": "^7.0.2",
+    "i18next-fs-backend": "^2.2.0",
+    "livekit-client": "^2.1.5",
+    "localforage": "^1.10.0",
+    "md5": "^2.3.0",
+    "mitt": "^3.0.0",
+    "react-draggable": "^4.4.5",
+    "react-i18next": "^12.3.1",
+    "react-image-file-resizer": "^0.4.8",
+    "react-query": "^3.39.3",
+    "react-resizable-panels": "^2.0.2",
+    "react-router-dom": "^6.11.1",
+    "react-use": "^17.4.0",
+    "react-virtuoso": "4.3.8",
+    "twemoji": "14.0.1",
+    "uuid": "^9.0.1",
+    "xgplayer": "^3.0.5",
+    "zustand": "^4.3.3"
+  }
+}

package_electron.json

@@ -0,0 +1,42 @@
+{
+  "name": "OpenIM-Demo",
+  "version": "3.5.1",
+  "main": "dist-electron/main/index.js",
+  "description": "OpenIM Electron Demo.",
+  "author": "blooming",
+  "private": true,
+  "debug": {
+    "env": {
+      "VITE_DEV_SERVER_URL": "http://127.0.0.1:7777/"
+    }
+  },
+  "scripts": {
+    "dev": "vite --host",
+    "build": "tsc && vite build && electron-builder",
+    "preview": "vite preview",
+    "build:mac": "vite build  &&  electron-builder --macos --x64",
+    "build:mac-arm": "vite build  &&  electron-builder --macos --arm64",
+    "build:win": "vite build  &&  electron-builder --win --x64",
+    "build:win-arm": "vite build  &&  electron-builder --win --arm64",
+    "build:linux": "vite build  &&  electron-builder --linux --x64",
+    "build:linux-arm": "vite build  &&  electron-builder --linux --arm64",
+    "pree2e": "vite build --mode=test",
+    "e2e": "playwright test",
+    "format": "prettier --write .",
+    "lint": "eslint --ext .js,.jsx,.ts,.tsx src",
+    "lint:fix": "eslint --ext .js,.jsx,.ts,.tsx --fix --quiet src",
+    "prepare": "husky install"
+  },
+  "engines": {
+    "node": "^14.18.0 || >=16.0.0"
+  },
+  "lint-staged": {
+    "src/**/*.{tsx,ts}": ["prettier --write", "eslint --fix"],
+    "*.{json,html,css,scss,xml,md}": ["prettier --write"]
+  },
+  "dependencies": {
+    "electron-store": "^8.1.0",
+    "i18next": "^22.5.0",
+    "i18next-fs-backend": "^2.2.0"
+  }
+}

patches/@ckeditor+ckeditor5-ui+43.0.0.patch

@@ -0,0 +1,42 @@
+diff --git a/node_modules/@ckeditor/ckeditor5-ui/src/editorui/poweredby.js b/node_modules/@ckeditor/ckeditor5-ui/src/editorui/poweredby.js
+index 191aba1..324f6d2 100644
+--- a/node_modules/@ckeditor/ckeditor5-ui/src/editorui/poweredby.js
++++ b/node_modules/@ckeditor/ckeditor5-ui/src/editorui/poweredby.js
+@@ -112,12 +112,9 @@ export default class PoweredBy extends /* #__PURE__ */ DomEmitterMixin() {
+             if (!this._balloonView) {
+                 this._createBalloonView();
+             }
+-            this._balloonView.pin(attachOptions);
++            // this._balloonView.pin(attachOptions);
+         }
+     }
+-    /**
+-     * Hides the "powered by" balloon if already visible.
+-     */
+     _hideBalloon() {
+         if (this._balloonView) {
+             this._balloonView.unpin();
+diff --git a/node_modules/@ckeditor/ckeditor5-ui/src/icon/iconview.js b/node_modules/@ckeditor/ckeditor5-ui/src/icon/iconview.js
+index dd6d2ed..7af8e61 100644
+--- a/node_modules/@ckeditor/ckeditor5-ui/src/icon/iconview.js
++++ b/node_modules/@ckeditor/ckeditor5-ui/src/icon/iconview.js
+@@ -42,17 +42,14 @@ class IconView extends View {
+             }
+         });
+     }
+-    /**
+-     * @inheritDoc
+-     */
+     render() {
+         super.render();
+-        this._updateXMLContent();
++        // this._updateXMLContent();
+         this._colorFillPaths();
+         // This is a hack for lack of innerHTML binding.
+         // See: https://github.com/ckeditor/ckeditor5-ui/issues/99.
+         this.on('change:content', () => {
+-            this._updateXMLContent();
++            // this._updateXMLContent();
+             this._colorFillPaths();
+         });
+         this.on('change:fillColor', () => {

playwright.config.ts

@@ -0,0 +1,54 @@
+import type { PlaywrightTestConfig } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+const config: PlaywrightTestConfig = {
+  testDir: "./e2e",
+  /* Maximum time one test can run for. */
+  timeout: 30 * 1000,
+  expect: {
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 5000,
+  },
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: "html",
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+    actionTimeout: 0,
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://localhost:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+  },
+
+  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
+  // outputDir: 'test-results/',
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   port: 3000,
+  // },
+};
+
+export default config;

postcss.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  plugins: {
+    'tailwindcss/nesting': 'postcss-nesting',
+    tailwindcss: {},
+    autoprefixer: {}
+  },
+};
+  

public/splash.html

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      body {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100vh;
+        margin: 0;
+        padding: 0;
+        font-family: Arial, sans-serif;
+        cursor: default;
+      }
+
+      .logo {
+        font-size: 32px;
+        font-weight: bold;
+        text-transform: uppercase;
+      }
+
+      .letter {
+        opacity: 0;
+        color: lightgreen;
+      }
+
+      .fade-in-animation {
+        animation: fade-in 4s infinite;
+      }
+
+      @keyframes fade-in {
+        0% {
+          opacity: 0;
+          color: lightgreen;
+        }
+        50% {
+          opacity: 1;
+          color: lightblue;
+        }
+        100% {
+          opacity: 0;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="logo">
+      <span class="letter">O</span>
+      <span class="letter">p</span>
+      <span class="letter">e</span>
+      <span class="letter">n</span>
+      <span class="letter">I</span>
+      <span class="letter">M</span>
+    </div>
+
+    <script>
+      const letters = document.querySelectorAll(".letter");
+
+      function animateLetters() {
+        letters.forEach((letter, index) => {
+          setTimeout(() => {
+            letter.classList.add("fade-in-animation");
+          }, index * 300);
+        });
+      }
+
+      animateLetters();
+    </script>
+  </body>
+</html>

public/wasm_exec.js

@@ -0,0 +1,561 @@
+// Copyright 2018 The Go Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+"use strict";
+
+(() => {
+	const enosys = () => {
+		const err = new Error("not implemented");
+		err.code = "ENOSYS";
+		return err;
+	};
+
+	if (!globalThis.fs) {
+		let outputBuf = "";
+		globalThis.fs = {
+			constants: { O_WRONLY: -1, O_RDWR: -1, O_CREAT: -1, O_TRUNC: -1, O_APPEND: -1, O_EXCL: -1 }, // unused
+			writeSync(fd, buf) {
+				outputBuf += decoder.decode(buf);
+				const nl = outputBuf.lastIndexOf("\n");
+				if (nl != -1) {
+					console.log(outputBuf.substring(0, nl));
+					outputBuf = outputBuf.substring(nl + 1);
+				}
+				return buf.length;
+			},
+			write(fd, buf, offset, length, position, callback) {
+				if (offset !== 0 || length !== buf.length || position !== null) {
+					callback(enosys());
+					return;
+				}
+				const n = this.writeSync(fd, buf);
+				callback(null, n);
+			},
+			chmod(path, mode, callback) { callback(enosys()); },
+			chown(path, uid, gid, callback) { callback(enosys()); },
+			close(fd, callback) { callback(enosys()); },
+			fchmod(fd, mode, callback) { callback(enosys()); },
+			fchown(fd, uid, gid, callback) { callback(enosys()); },
+			fstat(fd, callback) { callback(enosys()); },
+			fsync(fd, callback) { callback(null); },
+			ftruncate(fd, length, callback) { callback(enosys()); },
+			lchown(path, uid, gid, callback) { callback(enosys()); },
+			link(path, link, callback) { callback(enosys()); },
+			lstat(path, callback) { callback(enosys()); },
+			mkdir(path, perm, callback) { callback(enosys()); },
+			open(path, flags, mode, callback) { callback(enosys()); },
+			read(fd, buffer, offset, length, position, callback) { callback(enosys()); },
+			readdir(path, callback) { callback(enosys()); },
+			readlink(path, callback) { callback(enosys()); },
+			rename(from, to, callback) { callback(enosys()); },
+			rmdir(path, callback) { callback(enosys()); },
+			stat(path, callback) { callback(enosys()); },
+			symlink(path, link, callback) { callback(enosys()); },
+			truncate(path, length, callback) { callback(enosys()); },
+			unlink(path, callback) { callback(enosys()); },
+			utimes(path, atime, mtime, callback) { callback(enosys()); },
+		};
+	}
+
+	if (!globalThis.process) {
+		globalThis.process = {
+			getuid() { return -1; },
+			getgid() { return -1; },
+			geteuid() { return -1; },
+			getegid() { return -1; },
+			getgroups() { throw enosys(); },
+			pid: -1,
+			ppid: -1,
+			umask() { throw enosys(); },
+			cwd() { throw enosys(); },
+			chdir() { throw enosys(); },
+		}
+	}
+
+	if (!globalThis.crypto) {
+		throw new Error("globalThis.crypto is not available, polyfill required (crypto.getRandomValues only)");
+	}
+
+	if (!globalThis.performance) {
+		throw new Error("globalThis.performance is not available, polyfill required (performance.now only)");
+	}
+
+	if (!globalThis.TextEncoder) {
+		throw new Error("globalThis.TextEncoder is not available, polyfill required");
+	}
+
+	if (!globalThis.TextDecoder) {
+		throw new Error("globalThis.TextDecoder is not available, polyfill required");
+	}
+
+	const encoder = new TextEncoder("utf-8");
+	const decoder = new TextDecoder("utf-8");
+
+	globalThis.Go = class {
+		constructor() {
+			this.argv = ["js"];
+			this.env = {};
+			this.exit = (code) => {
+				if (code !== 0) {
+					console.warn("exit code:", code);
+				}
+			};
+			this._exitPromise = new Promise((resolve) => {
+				this._resolveExitPromise = resolve;
+			});
+			this._pendingEvent = null;
+			this._scheduledTimeouts = new Map();
+			this._nextCallbackTimeoutID = 1;
+
+			const setInt64 = (addr, v) => {
+				this.mem.setUint32(addr + 0, v, true);
+				this.mem.setUint32(addr + 4, Math.floor(v / 4294967296), true);
+			}
+
+			const setInt32 = (addr, v) => {
+				this.mem.setUint32(addr + 0, v, true);
+			}
+
+			const getInt64 = (addr) => {
+				const low = this.mem.getUint32(addr + 0, true);
+				const high = this.mem.getInt32(addr + 4, true);
+				return low + high * 4294967296;
+			}
+
+			const loadValue = (addr) => {
+				const f = this.mem.getFloat64(addr, true);
+				if (f === 0) {
+					return undefined;
+				}
+				if (!isNaN(f)) {
+					return f;
+				}
+
+				const id = this.mem.getUint32(addr, true);
+				return this._values[id];
+			}
+
+			const storeValue = (addr, v) => {
+				const nanHead = 0x7FF80000;
+
+				if (typeof v === "number" && v !== 0) {
+					if (isNaN(v)) {
+						this.mem.setUint32(addr + 4, nanHead, true);
+						this.mem.setUint32(addr, 0, true);
+						return;
+					}
+					this.mem.setFloat64(addr, v, true);
+					return;
+				}
+
+				if (v === undefined) {
+					this.mem.setFloat64(addr, 0, true);
+					return;
+				}
+
+				let id = this._ids.get(v);
+				if (id === undefined) {
+					id = this._idPool.pop();
+					if (id === undefined) {
+						id = this._values.length;
+					}
+					this._values[id] = v;
+					this._goRefCounts[id] = 0;
+					this._ids.set(v, id);
+				}
+				this._goRefCounts[id]++;
+				let typeFlag = 0;
+				switch (typeof v) {
+					case "object":
+						if (v !== null) {
+							typeFlag = 1;
+						}
+						break;
+					case "string":
+						typeFlag = 2;
+						break;
+					case "symbol":
+						typeFlag = 3;
+						break;
+					case "function":
+						typeFlag = 4;
+						break;
+				}
+				this.mem.setUint32(addr + 4, nanHead | typeFlag, true);
+				this.mem.setUint32(addr, id, true);
+			}
+
+			const loadSlice = (addr) => {
+				const array = getInt64(addr + 0);
+				const len = getInt64(addr + 8);
+				return new Uint8Array(this._inst.exports.mem.buffer, array, len);
+			}
+
+			const loadSliceOfValues = (addr) => {
+				const array = getInt64(addr + 0);
+				const len = getInt64(addr + 8);
+				const a = new Array(len);
+				for (let i = 0; i < len; i++) {
+					a[i] = loadValue(array + i * 8);
+				}
+				return a;
+			}
+
+			const loadString = (addr) => {
+				const saddr = getInt64(addr + 0);
+				const len = getInt64(addr + 8);
+				return decoder.decode(new DataView(this._inst.exports.mem.buffer, saddr, len));
+			}
+
+			const timeOrigin = Date.now() - performance.now();
+			this.importObject = {
+				_gotest: {
+					add: (a, b) => a + b,
+				},
+				gojs: {
+					// Go's SP does not change as long as no Go code is running. Some operations (e.g. calls, getters and setters)
+					// may synchronously trigger a Go event handler. This makes Go code get executed in the middle of the imported
+					// function. A goroutine can switch to a new stack if the current stack is too small (see morestack function).
+					// This changes the SP, thus we have to update the SP used by the imported function.
+
+					// func wasmExit(code int32)
+					"runtime.wasmExit": (sp) => {
+						sp >>>= 0;
+						const code = this.mem.getInt32(sp + 8, true);
+						this.exited = true;
+						delete this._inst;
+						delete this._values;
+						delete this._goRefCounts;
+						delete this._ids;
+						delete this._idPool;
+						this.exit(code);
+					},
+
+					// func wasmWrite(fd uintptr, p unsafe.Pointer, n int32)
+					"runtime.wasmWrite": (sp) => {
+						sp >>>= 0;
+						const fd = getInt64(sp + 8);
+						const p = getInt64(sp + 16);
+						const n = this.mem.getInt32(sp + 24, true);
+						fs.writeSync(fd, new Uint8Array(this._inst.exports.mem.buffer, p, n));
+					},
+
+					// func resetMemoryDataView()
+					"runtime.resetMemoryDataView": (sp) => {
+						sp >>>= 0;
+						this.mem = new DataView(this._inst.exports.mem.buffer);
+					},
+
+					// func nanotime1() int64
+					"runtime.nanotime1": (sp) => {
+						sp >>>= 0;
+						setInt64(sp + 8, (timeOrigin + performance.now()) * 1000000);
+					},
+
+					// func walltime() (sec int64, nsec int32)
+					"runtime.walltime": (sp) => {
+						sp >>>= 0;
+						const msec = (new Date).getTime();
+						setInt64(sp + 8, msec / 1000);
+						this.mem.setInt32(sp + 16, (msec % 1000) * 1000000, true);
+					},
+
+					// func scheduleTimeoutEvent(delay int64) int32
+					"runtime.scheduleTimeoutEvent": (sp) => {
+						sp >>>= 0;
+						const id = this._nextCallbackTimeoutID;
+						this._nextCallbackTimeoutID++;
+						this._scheduledTimeouts.set(id, setTimeout(
+							() => {
+								this._resume();
+								while (this._scheduledTimeouts.has(id)) {
+									// for some reason Go failed to register the timeout event, log and try again
+									// (temporary workaround for https://github.com/golang/go/issues/28975)
+									console.warn("scheduleTimeoutEvent: missed timeout event");
+									this._resume();
+								}
+							},
+							getInt64(sp + 8),
+						));
+						this.mem.setInt32(sp + 16, id, true);
+					},
+
+					// func clearTimeoutEvent(id int32)
+					"runtime.clearTimeoutEvent": (sp) => {
+						sp >>>= 0;
+						const id = this.mem.getInt32(sp + 8, true);
+						clearTimeout(this._scheduledTimeouts.get(id));
+						this._scheduledTimeouts.delete(id);
+					},
+
+					// func getRandomData(r []byte)
+					"runtime.getRandomData": (sp) => {
+						sp >>>= 0;
+						crypto.getRandomValues(loadSlice(sp + 8));
+					},
+
+					// func finalizeRef(v ref)
+					"syscall/js.finalizeRef": (sp) => {
+						sp >>>= 0;
+						const id = this.mem.getUint32(sp + 8, true);
+						this._goRefCounts[id]--;
+						if (this._goRefCounts[id] === 0) {
+							const v = this._values[id];
+							this._values[id] = null;
+							this._ids.delete(v);
+							this._idPool.push(id);
+						}
+					},
+
+					// func stringVal(value string) ref
+					"syscall/js.stringVal": (sp) => {
+						sp >>>= 0;
+						storeValue(sp + 24, loadString(sp + 8));
+					},
+
+					// func valueGet(v ref, p string) ref
+					"syscall/js.valueGet": (sp) => {
+						sp >>>= 0;
+						const result = Reflect.get(loadValue(sp + 8), loadString(sp + 16));
+						sp = this._inst.exports.getsp() >>> 0; // see comment above
+						storeValue(sp + 32, result);
+					},
+
+					// func valueSet(v ref, p string, x ref)
+					"syscall/js.valueSet": (sp) => {
+						sp >>>= 0;
+						Reflect.set(loadValue(sp + 8), loadString(sp + 16), loadValue(sp + 32));
+					},
+
+					// func valueDelete(v ref, p string)
+					"syscall/js.valueDelete": (sp) => {
+						sp >>>= 0;
+						Reflect.deleteProperty(loadValue(sp + 8), loadString(sp + 16));
+					},
+
+					// func valueIndex(v ref, i int) ref
+					"syscall/js.valueIndex": (sp) => {
+						sp >>>= 0;
+						storeValue(sp + 24, Reflect.get(loadValue(sp + 8), getInt64(sp + 16)));
+					},
+
+					// valueSetIndex(v ref, i int, x ref)
+					"syscall/js.valueSetIndex": (sp) => {
+						sp >>>= 0;
+						Reflect.set(loadValue(sp + 8), getInt64(sp + 16), loadValue(sp + 24));
+					},
+
+					// func valueCall(v ref, m string, args []ref) (ref, bool)
+					"syscall/js.valueCall": (sp) => {
+						sp >>>= 0;
+						try {
+							const v = loadValue(sp + 8);
+							const m = Reflect.get(v, loadString(sp + 16));
+							const args = loadSliceOfValues(sp + 32);
+							const result = Reflect.apply(m, v, args);
+							sp = this._inst.exports.getsp() >>> 0; // see comment above
+							storeValue(sp + 56, result);
+							this.mem.setUint8(sp + 64, 1);
+						} catch (err) {
+							sp = this._inst.exports.getsp() >>> 0; // see comment above
+							storeValue(sp + 56, err);
+							this.mem.setUint8(sp + 64, 0);
+						}
+					},
+
+					// func valueInvoke(v ref, args []ref) (ref, bool)
+					"syscall/js.valueInvoke": (sp) => {
+						sp >>>= 0;
+						try {
+							const v = loadValue(sp + 8);
+							const args = loadSliceOfValues(sp + 16);
+							const result = Reflect.apply(v, undefined, args);
+							sp = this._inst.exports.getsp() >>> 0; // see comment above
+							storeValue(sp + 40, result);
+							this.mem.setUint8(sp + 48, 1);
+						} catch (err) {
+							sp = this._inst.exports.getsp() >>> 0; // see comment above
+							storeValue(sp + 40, err);
+							this.mem.setUint8(sp + 48, 0);
+						}
+					},
+
+					// func valueNew(v ref, args []ref) (ref, bool)
+					"syscall/js.valueNew": (sp) => {
+						sp >>>= 0;
+						try {
+							const v = loadValue(sp + 8);
+							const args = loadSliceOfValues(sp + 16);
+							const result = Reflect.construct(v, args);
+							sp = this._inst.exports.getsp() >>> 0; // see comment above
+							storeValue(sp + 40, result);
+							this.mem.setUint8(sp + 48, 1);
+						} catch (err) {
+							sp = this._inst.exports.getsp() >>> 0; // see comment above
+							storeValue(sp + 40, err);
+							this.mem.setUint8(sp + 48, 0);
+						}
+					},
+
+					// func valueLength(v ref) int
+					"syscall/js.valueLength": (sp) => {
+						sp >>>= 0;
+						setInt64(sp + 16, parseInt(loadValue(sp + 8).length));
+					},
+
+					// valuePrepareString(v ref) (ref, int)
+					"syscall/js.valuePrepareString": (sp) => {
+						sp >>>= 0;
+						const str = encoder.encode(String(loadValue(sp + 8)));
+						storeValue(sp + 16, str);
+						setInt64(sp + 24, str.length);
+					},
+
+					// valueLoadString(v ref, b []byte)
+					"syscall/js.valueLoadString": (sp) => {
+						sp >>>= 0;
+						const str = loadValue(sp + 8);
+						loadSlice(sp + 16).set(str);
+					},
+
+					// func valueInstanceOf(v ref, t ref) bool
+					"syscall/js.valueInstanceOf": (sp) => {
+						sp >>>= 0;
+						this.mem.setUint8(sp + 24, (loadValue(sp + 8) instanceof loadValue(sp + 16)) ? 1 : 0);
+					},
+
+					// func copyBytesToGo(dst []byte, src ref) (int, bool)
+					"syscall/js.copyBytesToGo": (sp) => {
+						sp >>>= 0;
+						const dst = loadSlice(sp + 8);
+						const src = loadValue(sp + 32);
+						if (!(src instanceof Uint8Array || src instanceof Uint8ClampedArray)) {
+							this.mem.setUint8(sp + 48, 0);
+							return;
+						}
+						const toCopy = src.subarray(0, dst.length);
+						dst.set(toCopy);
+						setInt64(sp + 40, toCopy.length);
+						this.mem.setUint8(sp + 48, 1);
+					},
+
+					// func copyBytesToJS(dst ref, src []byte) (int, bool)
+					"syscall/js.copyBytesToJS": (sp) => {
+						sp >>>= 0;
+						const dst = loadValue(sp + 8);
+						const src = loadSlice(sp + 16);
+						if (!(dst instanceof Uint8Array || dst instanceof Uint8ClampedArray)) {
+							this.mem.setUint8(sp + 48, 0);
+							return;
+						}
+						const toCopy = src.subarray(0, dst.length);
+						dst.set(toCopy);
+						setInt64(sp + 40, toCopy.length);
+						this.mem.setUint8(sp + 48, 1);
+					},
+
+					"debug": (value) => {
+						console.log(value);
+					},
+				}
+			};
+		}
+
+		async run(instance) {
+			if (!(instance instanceof WebAssembly.Instance)) {
+				throw new Error("Go.run: WebAssembly.Instance expected");
+			}
+			this._inst = instance;
+			this.mem = new DataView(this._inst.exports.mem.buffer);
+			this._values = [ // JS values that Go currently has references to, indexed by reference id
+				NaN,
+				0,
+				null,
+				true,
+				false,
+				globalThis,
+				this,
+			];
+			this._goRefCounts = new Array(this._values.length).fill(Infinity); // number of references that Go has to a JS value, indexed by reference id
+			this._ids = new Map([ // mapping from JS values to reference ids
+				[0, 1],
+				[null, 2],
+				[true, 3],
+				[false, 4],
+				[globalThis, 5],
+				[this, 6],
+			]);
+			this._idPool = [];   // unused ids that have been garbage collected
+			this.exited = false; // whether the Go program has exited
+
+			// Pass command line arguments and environment variables to WebAssembly by writing them to the linear memory.
+			let offset = 4096;
+
+			const strPtr = (str) => {
+				const ptr = offset;
+				const bytes = encoder.encode(str + "\0");
+				new Uint8Array(this.mem.buffer, offset, bytes.length).set(bytes);
+				offset += bytes.length;
+				if (offset % 8 !== 0) {
+					offset += 8 - (offset % 8);
+				}
+				return ptr;
+			};
+
+			const argc = this.argv.length;
+
+			const argvPtrs = [];
+			this.argv.forEach((arg) => {
+				argvPtrs.push(strPtr(arg));
+			});
+			argvPtrs.push(0);
+
+			const keys = Object.keys(this.env).sort();
+			keys.forEach((key) => {
+				argvPtrs.push(strPtr(`${key}=${this.env[key]}`));
+			});
+			argvPtrs.push(0);
+
+			const argv = offset;
+			argvPtrs.forEach((ptr) => {
+				this.mem.setUint32(offset, ptr, true);
+				this.mem.setUint32(offset + 4, 0, true);
+				offset += 8;
+			});
+
+			// The linker guarantees global data starts from at least wasmMinDataAddr.
+			// Keep in sync with cmd/link/internal/ld/data.go:wasmMinDataAddr.
+			const wasmMinDataAddr = 4096 + 8192;
+			if (offset >= wasmMinDataAddr) {
+				throw new Error("total length of command line and environment variables exceeds limit");
+			}
+
+			this._inst.exports.run(argc, argv);
+			if (this.exited) {
+				this._resolveExitPromise();
+			}
+			await this._exitPromise;
+		}
+
+		_resume() {
+			if (this.exited) {
+				throw new Error("Go program has already exited");
+			}
+			this._inst.exports.resume();
+			if (this.exited) {
+				this._resolveExitPromise();
+			}
+		}
+
+		_makeFuncWrapper(id) {
+			const go = this;
+			return function () {
+				const event = { id: id, this: this, args: arguments };
+				go._pendingEvent = event;
+				go._resume();
+				return event.result;
+			};
+		}
+	}
+})();

src/AntdGlobalComp.tsx

@@ -0,0 +1,18 @@
+import { App } from "antd";
+import type { MessageInstance } from "antd/es/message/interface";
+import type { ModalStaticFunctions } from "antd/es/modal/confirm";
+import type { NotificationInstance } from "antd/es/notification/interface";
+
+let message: MessageInstance;
+let notification: NotificationInstance;
+let modal: Omit<ModalStaticFunctions, "warn">;
+
+export default () => {
+  const staticFunction = App.useApp();
+  message = staticFunction.message;
+  modal = staticFunction.modal;
+  notification = staticFunction.notification;
+  return null;
+};
+
+export { message, modal, notification };

src/App.tsx

@@ -0,0 +1,44 @@
+import { App as AntdApp, ConfigProvider } from "antd";
+import enUS from "antd/locale/en_US";
+import zhCN from "antd/locale/zh_CN";
+import { Suspense } from "react";
+import { QueryClient, QueryClientProvider } from "react-query";
+import { ReactQueryDevtools } from "react-query/devtools";
+import { RouterProvider } from "react-router-dom";
+
+import AntdGlobalComp from "./AntdGlobalComp";
+import router from "./routes";
+import { useUserStore } from "./store";
+
+function App() {
+  const locale = useUserStore((state) => state.appSettings.locale);
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        refetchOnWindowFocus: false,
+      },
+    },
+  });
+
+  return (
+    <ConfigProvider
+      button={{ autoInsertSpace: false }}
+      locale={locale === "zh-CN" ? zhCN : enUS}
+      theme={{
+        token: { colorPrimary: "#0089FF" },
+      }}
+    >
+      <QueryClientProvider client={queryClient}>
+        <Suspense fallback={<div>loading...</div>}>
+          <AntdApp>
+            <AntdGlobalComp />
+            <RouterProvider router={router} />
+          </AntdApp>
+        </Suspense>
+        <ReactQueryDevtools initialIsOpen={false} />
+      </QueryClientProvider>
+    </ConfigProvider>
+  );
+}
+
+export default App;

src/api/errorHandle.ts

@@ -0,0 +1,14 @@
+import { message } from "@/AntdGlobalComp";
+import { ErrCodeMap } from "@/constants";
+
+interface ErrorData {
+  errCode: number;
+  errMsg?: string;
+}
+
+export const errorHandle = (err: unknown) => {
+  const errData = err as ErrorData;
+  if (errData.errMsg) {
+    message.error(ErrCodeMap[errData.errCode] || errData.errMsg);
+  }
+};

src/api/imApi.ts

@@ -0,0 +1,24 @@
+import { v4 as uuidv4 } from "uuid";
+
+import { getChatUrl } from "@/config";
+import createAxiosInstance from "@/utils/request";
+import { getChatToken } from "@/utils/storage";
+
+const request = createAxiosInstance(getChatUrl());
+
+export const getRtcConnectData = async (room: string, identity: string) => {
+  const token = (await getChatToken()) as string;
+  return request.post<{ serverUrl: string; token: string }>(
+    "/user/rtc/get_token",
+    {
+      room,
+      identity,
+    },
+    {
+      headers: {
+        token,
+        operationID: uuidv4(),
+      },
+    },
+  );
+};

src/api/login.ts

@@ -0,0 +1,251 @@
+import type { MessageReceiveOptType } from "@openim/wasm-client-sdk";
+import { useMutation, useQuery } from "react-query";
+import { v4 as uuidv4 } from "uuid";
+
+import { getChatUrl } from "@/config";
+import { useUserStore } from "@/store";
+import { AppConfig } from "@/store/type";
+import createAxiosInstance from "@/utils/request";
+import { getChatToken } from "@/utils/storage";
+
+import { errorHandle } from "./errorHandle";
+
+const request = createAxiosInstance(getChatUrl());
+
+const platform = window.electronAPI?.getPlatform() ?? 5;
+
+const getAreaCode = (code?: string) =>
+  code ? (code.includes("+") ? code : `+${code}`) : code;
+
+// Send verification code
+export const useSendSms = () => {
+  return useMutation(
+    (params: API.Login.SendSmsParams) =>
+      request.post(
+        "/account/code/send",
+        {
+          ...params,
+        },
+        {
+          headers: {
+            operationID: uuidv4(),
+          },
+        },
+      ),
+    {
+      onError: errorHandle,
+    },
+  );
+};
+
+// Verify mobile phone number
+export const useVerifyCode = () => {
+  return useMutation(
+    (params: API.Login.VerifyCodeParams) =>
+      request.post(
+        "/account/code/verify",
+        {
+          ...params,
+          areaCode: getAreaCode(params.areaCode),
+        },
+        {
+          headers: {
+            operationID: uuidv4(),
+          },
+        },
+      ),
+    {
+      onError: errorHandle,
+    },
+  );
+};
+
+// register
+export const useRegister = () => {
+  return useMutation(
+    (params: API.Login.DemoRegisterType) =>
+      request.post<{ chatToken: string; imToken: string; userID: string }>(
+        "/account/register",
+        {
+          ...params,
+          user: {
+            ...params.user,
+            areaCode: getAreaCode(params.user.areaCode),
+          },
+          platform,
+        },
+        {
+          headers: {
+            operationID: uuidv4(),
+          },
+        },
+      ),
+    {
+      onError: errorHandle,
+    },
+  );
+};
+
+// reset passwords
+export const useReset = () => {
+  return useMutation(
+    (params: API.Login.ResetParams) =>
+      request.post(
+        "/account/password/reset",
+        {
+          ...params,
+          areaCode: getAreaCode(params.areaCode),
+        },
+        {
+          headers: {
+            operationID: uuidv4(),
+          },
+        },
+      ),
+    {
+      onError: errorHandle,
+    },
+  );
+};
+
+// change password
+export const modifyPassword = async (params: API.Login.ModifyParams) => {
+  const token = (await getChatToken()) as string;
+  return request.post(
+    "/account/password/change",
+    {
+      ...params,
+    },
+    {
+      headers: {
+        token,
+        operationID: uuidv4(),
+      },
+    },
+  );
+};
+
+// log in
+export const useLogin = () => {
+  return useMutation(
+    (params: API.Login.LoginParams) =>
+      request.post<{ chatToken: string; imToken: string; userID: string }>(
+        "/account/login",
+        {
+          ...params,
+          platform,
+          areaCode: getAreaCode(params.areaCode),
+        },
+        {
+          headers: {
+            operationID: uuidv4(),
+          },
+        },
+      ),
+    {
+      onError: errorHandle,
+    },
+  );
+};
+
+// Get user information
+export interface BusinessUserInfo {
+  userID: string;
+  password: string;
+  account: string;
+  phoneNumber: string;
+  areaCode: string;
+  email: string;
+  nickname: string;
+  faceURL: string;
+  gender: number;
+  level: number;
+  birth: number;
+  allowAddFriend: BusinessAllowType;
+  allowBeep: BusinessAllowType;
+  allowVibration: BusinessAllowType;
+  globalRecvMsgOpt: MessageReceiveOptType;
+}
+
+export enum BusinessAllowType {
+  Allow = 1,
+  NotAllow = 2,
+}
+
+export const getBusinessUserInfo = async (userIDs: string[]) => {
+  const token = (await getChatToken()) as string;
+  return request.post<{ users: BusinessUserInfo[] }>(
+    "/user/find/full",
+    {
+      userIDs,
+    },
+    {
+      headers: {
+        operationID: uuidv4(),
+        token,
+      },
+    },
+  );
+};
+
+export const searchBusinessUserInfo = async (keyword: string) => {
+  const token = (await getChatToken()) as string;
+  return request.post<{ total: number; users: BusinessUserInfo[] }>(
+    "/user/search/full",
+    {
+      keyword,
+      pagination: {
+        pageNumber: 1,
+        showNumber: 1,
+      },
+    },
+    {
+      headers: {
+        operationID: uuidv4(),
+        token,
+      },
+    },
+  );
+};
+
+interface UpdateBusinessUserInfoParams {
+  email: string;
+  nickname: string;
+  faceURL: string;
+  gender: number;
+  birth: number;
+  allowAddFriend: number;
+  allowBeep: number;
+  allowVibration: number;
+  globalRecvMsgOpt: number;
+}
+
+export const updateBusinessUserInfo = async (
+  params: Partial<UpdateBusinessUserInfoParams>,
+) => {
+  const token = (await getChatToken()) as string;
+  return request.post<unknown>(
+    "/user/update",
+    {
+      ...params,
+      userID: useUserStore.getState().selfInfo?.userID,
+    },
+    {
+      headers: {
+        operationID: uuidv4(),
+        token,
+      },
+    },
+  );
+};
+
+export const getAppConfig = () =>
+  request.post<{ config: AppConfig }>(
+    "/client_config/get",
+    {},
+    {
+      headers: {
+        operationID: uuidv4(),
+      },
+    },
+  );

src/api/typings.d.ts

@@ -0,0 +1,63 @@
+declare namespace API {
+  declare namespace Login {
+    enum UsedFor {
+      Register = 1,
+      Modify = 2,
+      Login = 3,
+    }
+    type RegisterUserInfo = {
+      nickname: string;
+      faceURL: string;
+      birth?: number;
+      gender?: number;
+      email?: string;
+      account?: string;
+      areaCode: string;
+      phoneNumber?: string;
+      password: string;
+    };
+    type DemoRegisterType = {
+      invitationCode?: string;
+      verifyCode: string;
+      deviceID?: string;
+      autoLogin?: boolean;
+      user: RegisterUserInfo;
+    };
+    type LoginParams = {
+      email?: string;
+      verifyCode: string;
+      deviceID?: string;
+      phoneNumber?: string;
+      areaCode: string;
+      account?: string;
+      password: string;
+    };
+    type ModifyParams = {
+      userID: string;
+      currentPassword: string;
+      newPassword: string;
+    };
+    type ResetParams = {
+      email?: string;
+      phoneNumber?: string;
+      areaCode: string;
+      verifyCode: string;
+      password: string;
+    };
+    type VerifyCodeParams = {
+      email?: string;
+      phoneNumber?: string;
+      areaCode: string;
+      verifyCode: string;
+      usedFor: UsedFor;
+    };
+    type SendSmsParams = {
+      email?: string;
+      phoneNumber?: string;
+      areaCode: string;
+      deviceID?: string;
+      usedFor: UsedFor;
+      invitationCode?: string;
+    };
+  }
+}