@tencentcloud/chat-uikit-react 2.3.1-beta.0 → 3.0.0

package/.eslintrc.cjs

@@ -0,0 +1,49 @@
+module.exports = {
+  root: true,
+  extends: [
+    '@tencentcloud/eslint-config-hybrid/react',
+    'plugin:storybook/recommended',
+  ],
+  parserOptions: {
+    project: [
+      `${__dirname}/tsconfig.json`,
+      `${__dirname}/tsconfig.app.json`,
+      `${__dirname}/tsconfig.node.json`,
+      `${__dirname}/.storybook/tsconfig.eslint.json`,
+    ],
+  },
+  rules: {
+    "@typescript-eslint/naming-convention": [
+      "warn",
+      {
+        "selector": "interface",
+        "format": ["PascalCase"],
+        "custom": {
+          "regex": "^(?!I)[A-Z][a-zA-Z0-9]*$",
+          "match": true
+        }
+      },
+      {
+        "selector": "typeLike",
+        "format": ["PascalCase"]
+      },
+      {
+        "selector": "typeParameter",
+        "format": ["PascalCase"],
+        "prefix": ["T", "K"]
+      },
+      {
+        "selector": "enumMember",
+        "format": ["UPPER_CASE"]
+      }
+    ],
+  },
+  ignorePatterns: [
+    'node_modules',
+    'public',
+    'dist',
+    '*.d.ts',
+    '!.*.cjs',
+    '!.storybook',
+  ],
+};

package/.stylelintrc.cjs

@@ -0,0 +1,19 @@
+module.exports = {
+  extends: [
+    'stylelint-config-standard',
+    'stylelint-config-recommended-scss',
+    '@stylistic/stylelint-config',
+  ],
+  rules: {
+    'declaration-block-no-redundant-longhand-properties': [
+      true,
+      {
+        ignoreShorthands: ['inset'],
+      },
+    ],
+    'color-function-notation': 'legacy',
+    'property-no-vendor-prefix': null,
+    'import-notation': null,
+    'selector-class-pattern': null,
+  },
+};

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [3.0.0] (2025-01-08)
+
+#### feat
+* feat: Architecture refactoring - Introduce tuikit-atomicx-react as the underlying component library.
+* feat: Support global search (Search) with three search modes (STANDARD, EMBEDDED, MINI).
+* feat: Support read receipts.
+* feat: Support conversation management (ChatSetting).
+* feat: Support AppBuilder configuration for themes and component features.
+
+#### chore
+* chore: Optimize message list scrolling experience.
+* chore: Optimize mouse hover state management.
+* chore: Optimize conversation operations and message operations user experience.
+
 ## [2.3.1] (2024-11-18)
 
 #### feat

package/README.md

@@ -21,6 +21,9 @@
 </tr>
 </table>
 
+## Integrating chat-uikit-react
+This tutorial shows how you can build a chat application in just 10 minutes by integrating chat-uikit-react
+[<img src="https://web.sdk.qcloud.com/im/assets/images/build_react_chat.png" width="800"/>](https://www.youtube.com/watch?v=o0PcxpGl66Y)
 
 ## Core Capabilities
 

package/ci/install-nvm-node18.sh

@@ -0,0 +1,117 @@
+#!/bin/bash
+
+# 定义颜色代码
+GREEN="\033[32m"
+NC="\033[0m"  # No Color
+
+# 更通用的格式化输出函数
+print_msg() {
+    local message=$1
+    local value=$2
+    echo -e "${GREEN}>>>${NC} ${message} ${GREEN}${value}${NC}"
+}
+
+# demo 使用通用函数
+print_msg "initial nvm node18"
+print_msg "initial dir" "`pwd`"
+print_msg "node version" "`node -v`"
+print_msg "npm version" "`npm -v`"
+print_msg "pnpm version" "`pnpm -v`"
+
+# -------------------------------------------------------------
+# |       重写 pnpm-workspace.yaml
+# |       1. 要求当前处于 chat/packages/chat-uikit-react
+# |       2. 重写 pnpm-workspace.yaml 文件 仅安装 react 相关依赖
+# |       3. 安装 nvm 和 node18
+# |       4. pnpm install
+# |       5. 构建前置项目依赖
+# |         1. base/packages/eslint-config-hybrid
+# |         2. base/packages/uikit-base-component-react
+# -------------------------------------------------------------
+
+cd ../../
+
+#  -------------------------------------------------------------
+# |       重写 pnpm-workspace.yaml 文件 仅安装 react 相关依赖
+#  -------------------------------------------------------------
+
+cat > ./pnpm-workspace.yaml << 'EOF'
+packages:
+  # hybrid common packages
+  - '../base/packages/uikit-base-component-react'
+  - '../base/packages/eslint-config-hybrid'
+
+  # ui packages
+  - 'packages/chat-uikit-react'
+
+  # react demo packages
+  - 'demos/react/*'
+EOF
+
+cd packages/chat-uikit-react
+
+# -------------------------------------------------------------
+# |       安装 nvm 和 node18
+# -------------------------------------------------------------
+# 检查是否已安装 nvm
+if [ -d "$HOME/.nvm" ]; then
+    print_msg "nvm is already installed"
+else
+    # 安装 nvm
+    print_msg "nvm not installed, installing nvm..."
+    wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
+fi
+
+# 添加 nvm 配置到 .bashrc（如果不存在）
+if ! grep -q "NVM_DIR" ~/.bashrc; then
+    print_msg "Adding nvm configuration to .bashrc..."
+    echo 'export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"' >> ~/.bashrc
+    echo '[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm' >> ~/.bashrc
+fi
+
+# 重新加载 .bashrc
+source ~/.bashrc
+
+# 检查 nvm 命令是否存在
+if ! command -v nvm &> /dev/null; then
+    print_msg "Error: nvm is not installed."
+    exit 1
+fi
+
+# 安装 Node.js 18 并设置为默认版本
+print_msg "Installing Node.js 18..."
+nvm install 18
+nvm alias default 18
+nvm use 18
+
+# 验证安装
+print_msg "validating environment..."
+print_msg "Node.js version:" "`node -v`"
+print_msg "npm version:" "`npm -v`"
+print_msg "pnpm version:" "`pnpm -v`"
+
+# 检查 node 版本是否为 18.x
+node_version=$(node -v | cut -d'v' -f2 | cut -d'.' -f1)
+if [ "$node_version" != "18" ]; then
+    print_msg ">>> Error: Required node version 18.x, but got $(node -v)"
+    exit 1
+fi
+
+print_msg "Setup nvm and node18 environment completed successfully!"
+
+
+# -------------------------------------------------------------
+# |       安装依赖
+# -------------------------------------------------------------
+
+pnpm install
+
+# -------------------------------------------------------------
+# |       构建前置项目依赖
+# -------------------------------------------------------------
+
+cd ../../../base/packages/uikit-base-component-react
+pnpm run build
+
+cd ../../../chat/packages/chat-uikit-react
+pnpm run build