Improve chat UI

web/src/ChatMenu.js

@@ -13,8 +13,8 @@
 // limitations under the License.
 
 import React from "react";
-import {Menu} from "antd";
-import {LayoutOutlined} from "@ant-design/icons";
+import {Button, Menu} from "antd";
+import {DeleteOutlined, LayoutOutlined, PlusOutlined} from "@ant-design/icons";
 
 class ChatMenu extends React.Component {
   constructor(props) {
@@ -38,6 +38,7 @@ class ChatMenu extends React.Component {
       categories[chat.category].push(chat);
     });
 
+    const selectedKeys = this.state === undefined ? [] : this.state.selectedKeys;
     return Object.keys(categories).map((category, index) => {
       return {
         key: `${index}`,
@@ -45,10 +46,50 @@ class ChatMenu extends React.Component {
         label: category,
         children: categories[category].map((chat, chatIndex) => {
           const globalChatIndex = chats.indexOf(chat);
+          const isSelected = selectedKeys.includes(`${index}-${chatIndex}`);
           return {
             key: `${index}-${chatIndex}`,
             index: globalChatIndex,
-            label: chat.displayName,
+            label: (
+              <div
+                className="menu-item-container"
+                style={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                }}
+              >
+                {chat.displayName}
+                {isSelected && (
+                  <DeleteOutlined
+                    className="menu-item-delete-icon"
+                    style={{
+                      visibility: "visible",
+                      color: "inherit",
+                      transition: "color 0.3s",
+                    }}
+                    onMouseEnter={(e) => {
+                      e.currentTarget.style.color = "rgba(89,54,213,0.6)";
+                    }}
+                    onMouseLeave={(e) => {
+                      e.currentTarget.style.color = "inherit";
+                    }}
+                    onMouseDown={(e) => {
+                      e.currentTarget.style.color = "rgba(89,54,213,0.4)";
+                    }}
+                    onMouseUp={(e) => {
+                      e.currentTarget.style.color = "rgba(89,54,213,0.6)";
+                    }}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      if (this.props.onDelete) {
+                        this.props.onDelete(globalChatIndex);
+                      }
+                    }}
+                  />
+                )}
+              </div>
+            ),
           };
         }),
       };
@@ -85,6 +126,31 @@ class ChatMenu extends React.Component {
     const items = this.chatsToItems(this.props.chats);
 
     return (
+      <>
+        <Button
+          icon={<PlusOutlined />}
+          style={{
+            width: "calc(100% - 8px)",
+            height: "40px",
+            margin: "4px",
+            borderColor: "rgb(229,229,229)",
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.borderColor = "rgba(89,54,213,0.6)";
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.borderColor = "rgba(0, 0, 0, 0.1)";
+          }}
+          onMouseDown={(e) => {
+            e.currentTarget.style.borderColor = "rgba(89,54,213,0.4)";
+          }}
+          onMouseUp={(e) => {
+            e.currentTarget.style.borderColor = "rgba(89,54,213,0.6)";
+          }}
+          onClick={this.props.onNewChat}
+        >
+          New Chat
+        </Button>
         <Menu
           mode="inline"
           openKeys={this.state.openKeys}
@@ -93,6 +159,7 @@ class ChatMenu extends React.Component {
           onSelect={this.onSelect}
           items={items}
         />
+      </>
     );
   }
 }

web/src/ProviderEditPage.js

@@ -125,6 +125,8 @@ class ProviderEditPage extends React.Component {
       } else {
         return Setting.getLabel(i18next.t("provider:Secret key"), i18next.t("provider:Secret key - Tooltip"));
       }
+    case "AI":
+      return Setting.getLabel(i18next.t("provider:Secret key"), i18next.t("provider:Secret key - Tooltip"));
     default:
       return Setting.getLabel(i18next.t("provider:Client secret"), i18next.t("provider:Client secret - Tooltip"));
     }
@@ -278,17 +280,20 @@ class ProviderEditPage extends React.Component {
                 this.updateProviderField("type", "Alipay");
               } else if (value === "Captcha") {
                 this.updateProviderField("type", "Default");
+              } else if (value === "AI") {
+                this.updateProviderField("type", "OpenAI API - GPT");
               }
             })}>
               {
                 [
-                  {id: "OAuth", name: "OAuth"},
+                  {id: "AI", name: "AI"},
+                  {id: "Captcha", name: "Captcha"},
                   {id: "Email", name: "Email"},
+                  {id: "OAuth", name: "OAuth"},
+                  {id: "Payment", name: "Payment"},
+                  {id: "SAML", name: "SAML"},
                   {id: "SMS", name: "SMS"},
                   {id: "Storage", name: "Storage"},
-                  {id: "SAML", name: "SAML"},
-                  {id: "Payment", name: "Payment"},
-                  {id: "Captcha", name: "Captcha"},
                 ]
                   .sort((a, b) => a.name.localeCompare(b.name))
                   .map((providerCategory, index) => <Option key={index} value={providerCategory.id}>{providerCategory.name}</Option>)
@@ -437,6 +442,8 @@ class ProviderEditPage extends React.Component {
         {
           this.state.provider.category === "Captcha" && this.state.provider.type === "Default" ? null : (
             <React.Fragment>
+              {
+                this.state.provider.category === "AI" ? null : (
                   <Row style={{marginTop: "20px"}} >
                     <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
                       {this.getClientIdLabel(this.state.provider)}
@@ -447,6 +454,8 @@ class ProviderEditPage extends React.Component {
                       }} />
                     </Col>
                   </Row>
+                )
+              }
               <Row style={{marginTop: "20px"}} >
                 <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
                   {this.getClientSecretLabel(this.state.provider)}

web/src/Setting.js

@@ -204,6 +204,12 @@ export const OtherProviderInfo = {
       url: "https://www.cloudflare.com/products/turnstile/",
     },
   },
+  AI: {
+    "OpenAI API - GPT": {
+      logo: `${StaticBaseUrl}/img/social_openai.svg`,
+      url: "https://platform.openai.com",
+    },
+  },
 };
 
 export function initCountries() {
@@ -855,6 +861,10 @@ export function getProviderTypeOptions(category) {
       {id: "GEETEST", name: "GEETEST"},
       {id: "Cloudflare Turnstile", name: "Cloudflare Turnstile"},
     ]);
+  } else if (category === "AI") {
+    return ([
+      {id: "OpenAI API - GPT", name: "OpenAI API - GPT"},
+    ]);
   } else {
     return [];
   }