fix: improve UI

Author: hsluoyz

web/src/App.less

@@ -36,11 +36,12 @@ img {
 }
 
 .content-warp-card {
-  box-shadow: 0 1px 5px 0 rgb(51 51 51 / 14%);
+  box-shadow: 0 2px 8px 0 rgb(0 0 0 / 8%);
   flex: 1;
   align-items: stretch;
   margin: 0 3px 3px 3px !important;
-  border-radius: 4px !important;
+  border-radius: 12px !important;
+  overflow: hidden;
 }
 
 .content-warp-card-filetreeright {

web/src/ChatBox.js

@@ -340,7 +340,7 @@ class ChatBox extends React.Component {
 
     return (
       <Layout style={{display: "flex", width: "100%", height: "100%", borderRadius: "6px", ...this.props.styles?.layout}}>
-        <Card style={{display: "flex", width: "100%", height: "100%", flexDirection: "column", position: "relative", padding: "24px", ...this.props.styles?.card}}>
+        <Card variant="borderless" style={{display: "flex", width: "100%", height: "100%", flexDirection: "column", position: "relative", padding: "0", boxShadow: "none", ...this.props.styles?.card}}>
           {messages.length === 0 && !hasUrlMessage && <WelcomeHeader store={this.props.store} />}
 
           <MessageList

web/src/ChatMenu.js

@@ -271,29 +271,18 @@ class ChatMenu extends React.Component {
     const getNewChatButton = () => {
       return (
         <Button
+          type="primary"
           icon={<PlusOutlined />}
           style={{
-            width: "calc(100% - 8px)",
-            height: "40px",
-            margin: "4px",
-            borderColor: "rgb(229,229,229)",
+            width: "calc(100% - 16px)",
+            height: "38px",
+            margin: "8px",
+            borderRadius: "8px",
+            fontWeight: 500,
+            fontSize: "14px",
+            boxShadow: "0 1px 4px rgba(0,0,0,0.12)",
           }}
           disabled={hasEmptyChat}
-          onMouseEnter={(e) => {
-            e.currentTarget.style.borderColor = ThemeDefault.colorPrimary;
-            e.currentTarget.style.opacity = 0.6;
-          }}
-          onMouseLeave={(e) => {
-            e.currentTarget.style.borderColor = "rgba(0, 0, 0, 0.1)";
-          }}
-          onMouseDown={(e) => {
-            e.currentTarget.style.borderColor = ThemeDefault.colorPrimary;
-            e.currentTarget.style.opacity = 0.4;
-          }}
-          onMouseUp={(e) => {
-            e.currentTarget.style.borderColor = ThemeDefault.colorPrimary;
-            e.currentTarget.style.opacity = 0.6;
-          }}
           onClick={() => {
             if (currentStoreName) {
               const currentStore = this.props.stores.find(store => store.name === currentStoreName);
@@ -323,11 +312,17 @@ class ChatMenu extends React.Component {
     const items = this.chatsToItems(this.props.chats, this.props.currentStoreName);
 
     return (
-      <div>
+      <div style={{height: "100%", display: "flex", flexDirection: "column"}}>
         {this.renderAddChatButton(this.props.stores, this.props.currentStoreName)}
-        <div style={{marginRight: "4px"}}>
+        <div style={{flex: 1, overflow: "hidden", paddingRight: "4px"}}>
           <Menu
-            style={{maxHeight: "calc(100vh - 140px - 40px - 8px)", overflowY: "auto"}}
+            className="chat-sidebar-menu"
+            style={{
+              maxHeight: "calc(100vh - 140px - 40px - 8px)",
+              overflowY: "auto",
+              background: "transparent",
+              border: "none",
+            }}
             mode="inline"
             openKeys={this.state.openKeys}
             selectedKeys={this.state.selectedKeys}

web/src/ChatPage.js

@@ -791,7 +791,14 @@ class ChatPage extends BaseListPage {
         }
         {
           !(Setting.isMobile() || Setting.getUrlParam("isRaw") !== null) && !this.state.chatMenuCollapsed && (
-            <div style={{width: "250px", height: "100%", marginRight: "2px"}}>
+            <div style={{
+              width: "250px",
+              height: "100%",
+              marginRight: "0",
+              background: "#f7f8fa",
+              borderRight: "1px solid #ebebeb",
+              flexShrink: 0,
+            }}>
               <ChatMenu ref={this.menu} chats={chats} chatName={this.getChat()} onSelectChat={onSelectChat} onAddChat={onAddChat} onDeleteChat={onDeleteChat} onUpdateChatName={onUpdateChatName} stores={this.state.stores} currentStoreName={currentStoreName} />
             </div>
           )
@@ -804,14 +811,14 @@ class ChatPage extends BaseListPage {
           </Drawer>
         )}
 
-        <div style={{flex: 1, height: "100%", position: "relative", display: "flex", flexDirection: "column"}}>
+        <div style={{flex: 1, height: "100%", position: "relative", display: "flex", flexDirection: "column", minWidth: 0}}>
           {this.state.chat && this.state.paneCount === 1 && (
-            <div style={{display: "flex", alignItems: "center", marginLeft: "15px"}}>
+            <div style={{display: "flex", alignItems: "center", borderBottom: "1px solid #f0f0f0", background: "rgba(255,255,255,0.9)", backdropFilter: "blur(8px)"}}>
               {Setting.isMobile() && (
-                <Button type="text" icon={<BarsOutlined />} onClick={this.toggleChatMenu} style={{marginRight: "8px"}} />
+                <Button type="text" icon={<BarsOutlined />} onClick={this.toggleChatMenu} style={{margin: "0 4px"}} />
               )}
               {!(Setting.isMobile() || Setting.getUrlParam("isRaw") !== null) && (
-                <Button type="text" icon={this.state.chatMenuCollapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />} onClick={this.toggleChatMenuCollapse} style={{marginRight: "8px"}} />
+                <Button type="text" icon={this.state.chatMenuCollapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />} onClick={this.toggleChatMenuCollapse} style={{margin: "0 4px"}} />
               )}
               <div style={{flex: 1}}>
                 <StoreInfoTitle chat={this.state.chat} stores={this.state.stores} onChatUpdated={this.handleChatUpdate} onStoreChange={this.updateStoreAndUrl} autoRead={this.state.autoRead} onUpdateAutoRead={(checked) => this.setState({autoRead: checked})} account={this.props.account} paneCount={this.state.paneCount} onPaneCountChange={(count) => this.setState({paneCount: count})} showPaneControls={true} generationMode={this.state.generationMode} onGenerationModeChange={this.handleGenerationModeChange} />

web/src/StoreInfoTitle.js

@@ -279,11 +279,11 @@ const StoreInfoTitle = (props) => {
 
   return (
     <div style={{
-      padding: "10px 15px",
-      borderBottom: "1px solid #e8e8e8",
+      padding: "8px 16px",
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
+      minHeight: "48px",
     }}>
       <div style={{display: "flex", alignItems: "center"}}>
         {storeInfo && (

web/src/chat/WelcomeHeader.js

@@ -21,12 +21,26 @@ const WelcomeHeader = ({store}) => {
   const avatar = (store === undefined) ? null : store.avatar || Setting.getDefaultAiAvatar();
 
   return (
-    <Welcome
-      variant="borderless"
-      icon={avatar}
-      title={(store === undefined) ? null : store.welcomeTitle || i18next.t("chat:Hello, I'm OpenAgent AI Assistant")}
-      description={(store === undefined) ? null : store.welcomeText || i18next.t("chat:I'm here to help answer your questions")}
-    />
+    <div style={{
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      padding: "48px 24px 32px",
+      flex: 1,
+    }}>
+      <Welcome
+        variant="borderless"
+        icon={avatar}
+        title={(store === undefined) ? null : store.welcomeTitle || i18next.t("chat:Hello, I'm OpenAgent AI Assistant")}
+        description={(store === undefined) ? null : store.welcomeText || i18next.t("chat:I'm here to help answer your questions")}
+        style={{textAlign: "center"}}
+        styles={{
+          title: {fontSize: "22px", fontWeight: 600, letterSpacing: "-0.3px"},
+          description: {fontSize: "15px", color: "#888", marginTop: "6px"},
+        }}
+      />
+    </div>
   );
 };
 

web/src/index.css

@@ -282,3 +282,45 @@ a[href^="mailto:"]:active {
 .ant-message .ant-message-custom-content span {
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif !important;
 }
+
+/* Chat sidebar menu: transparent background, rounded items */
+.chat-sidebar-menu.ant-menu-inline {
+  background: transparent !important;
+  border-inline-end: none !important;
+}
+
+.chat-sidebar-menu .ant-menu-submenu-title {
+  border-radius: 6px !important;
+  margin: 2px 4px !important;
+  width: calc(100% - 8px) !important;
+  color: #555 !important;
+  font-size: 12px !important;
+  letter-spacing: 0.03em !important;
+  text-transform: uppercase !important;
+}
+
+.chat-sidebar-menu .ant-menu-item {
+  border-radius: 6px !important;
+  margin: 2px 4px !important;
+  width: calc(100% - 8px) !important;
+  height: 36px !important;
+  line-height: 36px !important;
+  font-size: 13.5px !important;
+  font-weight: 500 !important;
+  transition: background 0.15s ease !important;
+}
+
+.chat-sidebar-menu .ant-menu-item:hover {
+  background: rgba(0, 0, 0, 0.05) !important;
+}
+
+.chat-sidebar-menu .ant-menu-item-selected {
+  background: rgba(0, 0, 0, 0.08) !important;
+  color: inherit !important;
+  font-weight: 600 !important;
+}
+
+/* Smooth transition on collapse/expand */
+.ant-layout-sider {
+  transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
+}