22

app/components/button.module.scss

@@ -50,4 +50,7 @@
 .icon-button-text {
   margin-left: 5px;
   font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }

app/components/chat-list.tsx

@@ -96,7 +96,7 @@ export function ChatList() {
                 index={i}
                 selected={i === selectedIndex}
                 onClick={() => selectSession(i)}
-                onDelete={chatStore.deleteSession}
+                onDelete={() => chatStore.deleteSession(i)}
               />
             ))}
             {provided.placeholder}

app/components/home.module.scss

@@ -20,7 +20,7 @@
   background-color: var(--white);
   min-width: 600px;
   min-height: 480px;
-  max-width: 900px;
+  max-width: 1200px;
 
   display: flex;
   overflow: hidden;
@@ -61,6 +61,27 @@
   display: flex;
   flex-direction: column;
   box-shadow: inset -2px 0px 2px 0px rgb(0, 0, 0, 0.05);
+  position: relative;
+  transition: width ease 0.1s;
+}
+
+.sidebar-drag {
+  $width: 10px;
+
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  width: $width;
+  background-color: var(--black);
+  cursor: ew-resize;
+  opacity: 0;
+  transition: all ease 0.3s;
+
+  &:hover,
+  &:active {
+    opacity: 0.2;
+  }
 }
 
 .window-content {
@@ -228,9 +249,12 @@
   margin-top: 14px;
 }
 
-.chat-item-count {}
-
-.chat-item-date {}
+.chat-item-count,
+.chat-item-date {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 
 .sidebar-tail {
   display: flex;
@@ -552,6 +576,7 @@
 
 .export-content {
   white-space: break-spaces;
+  padding: 10px !important;
 }
 
 .loading-content {

app/components/home.tsx

@@ -3,7 +3,13 @@
 
 require("../polyfill");
 
-import { useState, useEffect } from "react";
+import {
+  useState,
+  useEffect,
+  useRef,
+  useCallback,
+  MouseEventHandler,
+} from "react";
 
 import { IconButton } from "./button";
 import styles from "./home.module.scss";
@@ -26,6 +32,7 @@ import { Chat } from "./chat";
 import dynamic from "next/dynamic";
 import { REPO_URL } from "../constant";
 import { ErrorBoundary } from "./error";
+import { useDebounce } from "use-debounce";
 
 export function Loading(props: { noLogo?: boolean }) {
   return (
@@ -78,6 +85,53 @@ function useSwitchTheme() {
   }, [config.theme]);
 }
 
+function useDragSideBar() {
+  const limit = (x: number) => Math.min(500, Math.max(220, x));
+
+  const chatStore = useChatStore();
+  const startX = useRef(0);
+  const startDragWidth = useRef(chatStore.config.sidebarWidth ?? 300);
+  const lastUpdateTime = useRef(Date.now());
+
+  const handleMouseMove = useRef((e: MouseEvent) => {
+    if (Date.now() < lastUpdateTime.current + 100) {
+      return;
+    }
+    lastUpdateTime.current = Date.now();
+    const d = e.clientX - startX.current;
+    const nextWidth = limit(startDragWidth.current + d);
+    chatStore.updateConfig((config) => (config.sidebarWidth = nextWidth));
+  });
+
+  const handleMouseUp = useRef(() => {
+    startDragWidth.current = chatStore.config.sidebarWidth ?? 300;
+    window.removeEventListener("mousemove", handleMouseMove.current);
+    window.removeEventListener("mouseup", handleMouseUp.current);
+  });
+
+  const onDragMouseDown = (e: MouseEvent) => {
+    startX.current = e.clientX;
+
+    window.addEventListener("mousemove", handleMouseMove.current);
+    window.addEventListener("mouseup", handleMouseUp.current);
+  };
+
+  useEffect(() => {
+    if (isMobileScreen()) {
+      return;
+    }
+
+    document.documentElement.style.setProperty(
+      "--sidebar-width",
+      `${limit(chatStore.config.sidebarWidth ?? 300)}px`,
+    );
+  }, [chatStore.config.sidebarWidth]);
+
+  return {
+    onDragMouseDown,
+  };
+}
+
 const useHasHydrated = () => {
   const [hasHydrated, setHasHydrated] = useState<boolean>(false);
 
@@ -104,6 +158,9 @@ function _Home() {
   const [openSettings, setOpenSettings] = useState(false);
   const config = useChatStore((state) => state.config);
 
+  // drag side bar
+  const { onDragMouseDown } = useDragSideBar();
+
   useSwitchTheme();
 
   if (loading) {
@@ -190,6 +247,11 @@ function _Home() {
             />
           </div> */}
         </div>
+
+        <div
+          className={styles["sidebar-drag"]}
+          onMouseDown={(e) => onDragMouseDown(e as any)}
+        ></div>
       </div>
 
       <div className={styles["window-content"]}>

app/components/markdown.tsx

@@ -67,7 +67,7 @@ export function Markdown(props: { content: string }) {
       components={{
         pre: PreCode,
       }}
-      linkTarget={'_blank'}
+      linkTarget={"_blank"}
     >
       {props.content}
     </ReactMarkdown>

app/components/settings.module.scss

@@ -19,11 +19,16 @@
   cursor: pointer;
 }
 
-.password-input {
+.password-input-container {
+  max-width: 50%;
   display: flex;
   justify-content: flex-end;
 
   .password-eye {
     margin-right: 4px;
   }
+
+  .password-input {
+    min-width: 80%;
+  }
 }

app/components/ui-lib.module.scss

@@ -9,6 +9,7 @@
 
 .popover {
   position: relative;
+  z-index: 2;
 }
 
 .popover-content {
@@ -126,6 +127,7 @@
   width: 100vw;
   display: flex;
   justify-content: center;
+  pointer-events: none;
 
   .toast-content {
     max-width: 80vw;
@@ -140,6 +142,7 @@
     margin-bottom: 20px;
     display: flex;
     align-items: center;
+    pointer-events: all;
 
     .toast-action {
       padding-left: 20px;