feat: web ui update (#198)

playground/package.json

@@ -19,9 +19,11 @@
     "@reduxjs/toolkit": "^2.2.3",
     "antd": "^5.15.3",
     "@ant-design/icons": "^5.3.7",
-    "agora-rtc-sdk-ng": "^4.21.0"
+    "agora-rtc-sdk-ng": "^4.21.0",
+    "react-colorful": "^5.6.1"
   },
   "devDependencies": {
+    "@minko-fe/postcss-pxtoviewport": "^1.3.2",
     "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
@@ -34,5 +36,6 @@
     "sass": "^1.77.5",
     "@svgr/webpack": "^8.1.0",
     "protobufjs-cli": "^1.1.2"
-  }
+  },
+  "packageManager": "[email protected]+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
 }

playground/postcss.config.js

@@ -1,5 +1,10 @@
 module.exports = {
   plugins: {
     autoprefixer: {},
+    "@minko-fe/postcss-pxtoviewport": {
+      viewportWidth: 375,
+      exclude: /node_modules/,
+      include: /\/src\/platform\/mobile\//,
+    }
   },
 }

playground/src/css/globals.css → playground/src/app/global.css

@@ -8,9 +8,6 @@ html,
 body {
   background-color: #0F0F11;
   font-family: "PingFang SC";
-  width: 100vw;
-  height: 100vh;
-  overflow: auto;
 }
 
 a {
@@ -51,3 +48,18 @@ a {
   color: var(--Grey-300, #EAECF0) !important;
 }
 
+
+.ant-popover-inner {
+  /* width: 260px !important; */
+  background: #1E2025 !important;
+}
+
+
+.ant-select-selection-placeholder {
+  color: var(--Grey-600, #667085) !important;
+}
+
+
+.ant-empty-description {
+  color: var(--Grey-600, #667085) !important;
+}

playground/src/app/home/page.tsx

@@ -1,84 +1,23 @@
 "use client"
 
-import { useMemo, useState, useRef, useEffect } from "react"
-import dynamic from "next/dynamic";
-import Chat from "@/components/chat"
-import Setting from "@/components/setting"
 import AuthInitializer from "@/components/authInitializer"
-import Menu from "@/components/menu"
-const Rtc = dynamic(() => import("@/components/rtc"), {
+import { isMobile } from "@/common"
+import dynamic from 'next/dynamic'
+
+const PCEntry = dynamic(() => import('@/platform/pc/entry'), {
   ssr: false,
-});
-const Header = dynamic(() => import("@/components/header"), {
+})
+
+const MobileEntry = dynamic(() => import('@/platform/mobile/entry'), {
   ssr: false,
-});
-import { useSmallScreen, useAppSelector } from "@/common"
-import styles from "./index.module.scss"
+})
 
 export default function Home() {
-  const chatItems = useAppSelector(state => state.global.chatItems)
-  const wrapperRef = useRef<HTMLDivElement | null>(null)
-  const [activeMenu, setActiveMenu] = useState("Settings")
-  const { isSmallScreen } = useSmallScreen()
-
-  useEffect(() => {
-    if (!wrapperRef.current) {
-      return
-    }
-    if (!isSmallScreen) {
-      return
-    }
-    wrapperRef.current.scrollTop = wrapperRef.current.scrollHeight
-  }, [isSmallScreen, chatItems])
-
-  const onMenuChange = (item: string) => {
-    setActiveMenu(item)
-  }
 
   return (
     <AuthInitializer>
-      <main className={styles.home} style={{
-        minHeight: isSmallScreen ? "auto" : "830px"
-      }}>
-        <Header></Header>
-        {isSmallScreen ?
-          <div className={styles.smallScreen}>
-            <div className={styles.menuWrapper}>
-              <Menu onChange={onMenuChange}></Menu>
-            </div>
-            <div className={styles.bodyWrapper}>
-              <div className={styles.item} style={{
-                visibility: activeMenu == "Agent" ? "visible" : "hidden",
-                zIndex: activeMenu == "Agent" ? 1 : -1
-              }}>
-                <Rtc></Rtc>
-              </div>
-              <div className={styles.item}
-                ref={wrapperRef}
-                style={{
-                  visibility: activeMenu == "Chat" ? "visible" : "hidden",
-                  zIndex: activeMenu == "Chat" ? 1 : -1
-                }}>
-                <Chat></Chat>
-              </div>
-              <div className={styles.item} style={{
-                visibility: activeMenu == "Settings" ? "visible" : "hidden",
-                zIndex: activeMenu == "Settings" ? 1 : -1
-              }}>
-                <Setting></Setting>
-              </div>
-            </div>
-          </div>
-          :
-          <div className={styles.content} suppressHydrationWarning={true}>
-            <Rtc></Rtc>
-            <Chat></Chat>
-            <Setting></Setting>
-          </div>
-        }
-      </main>
+      {isMobile() ? <MobileEntry></MobileEntry> : <PCEntry></PCEntry>}
     </AuthInitializer >
-
   );
 }
 

playground/src/app/index.module.scss

@@ -14,7 +14,9 @@ $shadows-big: multiple-box-shadow(100);
 
 
 .login {
-    position: relative;
+    position: absolute;
+    left: 0;
+    top: 0;
     width: 100%;
     height: 100%;
     overflow: hidden;

playground/src/app/layout.tsx

@@ -1,8 +1,9 @@
 import { ConfigProvider } from "antd"
 import { StoreProvider } from "@/store";
-import "@/css/globals.css";
 import type { Metadata, Viewport } from "next";
 
+import './global.css'
+
 
 export const metadata: Metadata = {
   title: "Ai Agent",