Feat/layout

src/assets/icons/wechatIcon.tsx

@@ -1,7 +1,7 @@
 export function WeChatIcon() {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 534 534">
-      <g fill-rule="evenodd">
+      <g fillRule="evenodd">
         <path
           d="M109.532.333C49.307.333.042 49.546.042 109.717v314.571c0 60.158 49.266 109.37 109.49 109.37h314.931c59.909 0 108.992-48.709 109.495-108.445V108.796C533.455 49.056 484.372.333 424.463.333H109.532z"
           fill="url(#A)"
@@ -20,8 +20,8 @@ export function WeChatIcon() {
           y2="533.668"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stop-color="#02e36f" />
-          <stop offset="1" stop-color="#07c160" />
+          <stop stopColor="#02e36f" />
+          <stop offset="1" stopColor="#07c160" />
         </linearGradient>
       </defs>
     </svg>

src/components/attributes/index.tsx

@@ -33,15 +33,15 @@ export default function Attributes(props: IProps) {
           resourceId={resource.id}
           namespaceId={namespaceId}
         />
-        <div className="flex items-center gap-3">
-          <Link className="size-4 text-muted-foreground" />
+        <div className="flex flex-wrap sm:flex-nowrap items-start gap-3">
+          <Link className="shrink-0 size-4 text-muted-foreground" />
           <span className="text-muted-foreground font-medium min-w-[80px]">
             {t('resource.attrs.url')}
           </span>
           <a
             target="_blank"
             href={resource.attrs.url}
-            className="text-base text-foreground"
+            className="max-w-[200px] sm:max-w-full text-base break-all text-foreground truncate"
           >
             {resource.attrs.url}
           </a>
@@ -58,7 +58,7 @@ export default function Attributes(props: IProps) {
           </div>
         )} */}
         {resource.created_at && (
-          <div className="flex items-center gap-3">
+          <div className="flex flex-wrap sm:flex-nowrap items-center gap-3">
             <Clock className="size-4 text-muted-foreground" />
             <span className="text-muted-foreground font-medium min-w-[80px]">
               {t('resource.attrs.created')}
@@ -90,7 +90,7 @@ export default function Attributes(props: IProps) {
           resourceId={resource.id}
           namespaceId={namespaceId}
         />
-        <div className="flex items-center gap-3">
+        <div className="flex flex-wrap sm:flex-nowrap items-center gap-3">
           <File className="size-4 text-muted-foreground" />
           <span className="text-muted-foreground font-medium min-w-[80px]">
             {t('resource.attrs.filename')}
@@ -131,7 +131,7 @@ export default function Attributes(props: IProps) {
           </Button>
         </div>
         {resource.created_at && (
-          <div className="flex items-center gap-3">
+          <div className="flex flex-wrap sm:flex-nowrap items-center gap-3">
             <Clock className="size-4 text-muted-foreground" />
             <span className="text-muted-foreground font-medium min-w-[80px]">
               {t('resource.attrs.created')}
@@ -174,7 +174,7 @@ export default function Attributes(props: IProps) {
         </div>
       )} */}
       {resource.created_at && (
-        <div className="flex items-center gap-3">
+        <div className="flex flex-wrap sm:flex-nowrap items-center gap-3">
           <Clock className="size-4 text-muted-foreground" />
           <span className="text-muted-foreground font-medium min-w-[80px]">
             {t('resource.attrs.created')}

src/components/attributes/metadata.tsx

@@ -4,12 +4,12 @@ export function Metadata({ metadata }: { metadata: Record<string, any> }) {
   return (
     <>
       {Object.entries(metadata).map(([key, value]) => (
-        <div key={key} className="flex items-center gap-3">
+        <div key={key} className="flex items-start gap-3">
           <Text className="size-4 text-muted-foreground" />
           <span className="text-muted-foreground font-medium min-w-[80px]">
             {key}
           </span>
-          <span className="text-foreground">{String(value)}</span>
+          <span className="text-foreground break-all">{String(value)}</span>
         </div>
       ))}
     </>

src/components/markdown/index.tsx

@@ -14,6 +14,7 @@ import { addReferrerPolicyForString } from '@/lib/add-referrer-policy';
 interface IProps {
   content: string;
   linkBase?: string;
+  style?: React.CSSProperties;
 }
 
 export function markdownPreviewConfig(theme: Theme) {
@@ -33,7 +34,7 @@ export function markdownPreviewConfig(theme: Theme) {
 }
 
 export function Markdown(props: IProps) {
-  const { content, linkBase } = props;
+  const { style, content, linkBase } = props;
   const { theme } = useTheme();
   const navigate = useNavigate();
   const element = useRef<HTMLDivElement>(null);
@@ -82,5 +83,5 @@ export function Markdown(props: IProps) {
     }
   }, [content, theme]);
 
-  return <div className="reset-list" ref={element} />;
+  return <div style={style} className="reset-list" ref={element} />;
 }

src/components/tags/tags.tsx

@@ -58,7 +58,7 @@ export default function Tags(props: IProps) {
   }, [data]);
 
   return (
-    <div className="flex items-center gap-3">
+    <div className="flex flex-wrap sm:flex-nowrap items-center gap-3">
       <TagsIcon className="size-4 text-muted-foreground" />
       <span className="text-muted-foreground font-medium min-w-[80px]">
         {t('resource.attrs.tag')}
@@ -68,7 +68,7 @@ export default function Tags(props: IProps) {
           <LoaderCircle className="transition-transform animate-spin" />
         </span>
       ) : (
-        <span className="flex items-center text-foreground h-7">
+        <span className="flex flex-wrap items-center text-foreground h-7">
           {editing ? (
             <MultipleSelector
               creatable
@@ -91,7 +91,7 @@ export default function Tags(props: IProps) {
           ) : (
             <Space
               onClick={enterEdit}
-              className="min-h-6 min-w-96 cursor-pointer"
+              className="flex-wrap min-h-6 cursor-pointer"
             >
               {tags.length > 0 ? (
                 tags.map(tag => <Badge key={tag.value}>{tag.label}</Badge>)

src/components/ui/sidebar.tsx

@@ -25,7 +25,9 @@ import { cn } from '@/lib/utils';
 
 const SIDEBAR_COOKIE_NAME = 'sidebar:state';
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-const SIDEBAR_WIDTH = '16rem';
+const SIDEBAR_WIDTH_DEFAULT = 248; // 248px default
+const SIDEBAR_WIDTH_MIN = 248; // minimum width
+const SIDEBAR_WIDTH_MAX = 360; // maximum width
 const SIDEBAR_WIDTH_MOBILE = '18rem';
 const SIDEBAR_WIDTH_ICON = '3rem';
 const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
@@ -38,6 +40,8 @@ type TSidebarContext = {
   setOpenMobile: (open: boolean) => void;
   isMobile: boolean;
   toggleSidebar: () => void;
+  width: number;
+  setWidth: (width: number) => void;
 };
 
 const SidebarContext = React.createContext<TSidebarContext | null>(null);
@@ -73,6 +77,7 @@ const SidebarProvider = React.forwardRef<
   ) => {
     const isMobile = useIsMobile();
     const [openMobile, setOpenMobile] = React.useState(false);
+    const [width, setWidth] = React.useState(SIDEBAR_WIDTH_DEFAULT);
 
     // This is the internal state of the sidebar.
     // We use openProp and setOpenProp for control from outside the component.
@@ -127,8 +132,20 @@ const SidebarProvider = React.forwardRef<
         openMobile,
         setOpenMobile,
         toggleSidebar,
+        width,
+        setWidth,
       }),
-      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+      [
+        state,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        toggleSidebar,
+        width,
+        setWidth,
+      ]
     );
 
     return (
@@ -137,7 +154,7 @@ const SidebarProvider = React.forwardRef<
           <div
             style={
               {
-                '--sidebar-width': SIDEBAR_WIDTH,
+                '--sidebar-width': `${width}px`,
                 '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
                 ...style,
               } as React.CSSProperties
@@ -295,23 +312,73 @@ const SidebarRail = React.forwardRef<
   HTMLButtonElement,
   React.ComponentProps<'button'>
 >(({ className, ...props }, ref) => {
-  const { toggleSidebar } = useSidebar();
+  const { toggleSidebar, width, setWidth, state } = useSidebar();
+  const [isDragging, setIsDragging] = React.useState(false);
+  const [dragStartX, setDragStartX] = React.useState(0);
+  const [dragStartWidth, setDragStartWidth] = React.useState(0);
+
+  const handleMouseDown = React.useCallback(
+    (e: React.MouseEvent) => {
+      if (state === 'collapsed') {
+        toggleSidebar();
+        return;
+      }
+
+      e.preventDefault();
+      setIsDragging(true);
+      setDragStartX(e.clientX);
+      setDragStartWidth(width);
+    },
+    [state, toggleSidebar, width]
+  );
+
+  const handleMouseMove = React.useCallback(
+    (e: MouseEvent) => {
+      if (!isDragging) return;
+
+      const deltaX = e.clientX - dragStartX;
+      const newWidth = Math.max(
+        SIDEBAR_WIDTH_MIN,
+        Math.min(SIDEBAR_WIDTH_MAX, dragStartWidth + deltaX)
+      );
+
+      setWidth(newWidth);
+    },
+    [isDragging, dragStartX, dragStartWidth, setWidth]
+  );
+
+  const handleMouseUp = React.useCallback(() => {
+    setIsDragging(false);
+  }, []);
+
+  React.useEffect(() => {
+    if (isDragging) {
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+
+      return () => {
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+      };
+    }
+  }, [isDragging, handleMouseMove, handleMouseUp]);
 
   return (
     <button
       ref={ref}
       data-sidebar="rail"
-      aria-label="Toggle Sidebar"
+      aria-label={state === 'collapsed' ? 'Expand Sidebar' : 'Resize Sidebar'}
       tabIndex={-1}
-      onClick={toggleSidebar}
-      title="Toggle Sidebar"
+      onMouseDown={handleMouseDown}
+      title={state === 'collapsed' ? 'Expand Sidebar' : 'Resize Sidebar'}
       className={cn(
         'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',
         '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',
         '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
         'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',
         '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
         '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+        isDragging && 'after:bg-sidebar-border',
         className
       )}
       {...props}
@@ -339,7 +406,7 @@ const SidebarInset = React.forwardRef<
 SidebarInset.displayName = 'SidebarInset';
 
 const SidebarInput = React.forwardRef<
-  React.ElementRef<typeof Input>,
+  React.ComponentRef<typeof Input>,
   React.ComponentProps<typeof Input>
 >(({ className, ...props }, ref) => {
   return (
@@ -387,7 +454,7 @@ const SidebarFooter = React.forwardRef<
 SidebarFooter.displayName = 'SidebarFooter';
 
 const SidebarSeparator = React.forwardRef<
-  React.ElementRef<typeof Separator>,
+  React.ComponentRef<typeof Separator>,
   React.ComponentProps<typeof Separator>
 >(({ className, ...props }, ref) => {
   return (

src/const.ts

@@ -7,3 +7,5 @@ export const LAZY_LOAD_IMAGE: string =
   '/assets/vditor/dist/images/img-loading.svg';
 export const WECHAT_BOT_QRCODE_URL =
   'https://work.weixin.qq.com/u/vc89b7a1ee17bb08a0';
+export const WECHAT_GROUP_QRCODE_URL =
+  'https://work.weixin.qq.com/gm/a5c463a6a4a42631d3a6c0a66044393c';

src/hooks/use-namespace.ts

@@ -1,6 +1,8 @@
 import axios from 'axios';
 import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
+import { toast } from 'sonner';
 
 import { Namespace } from '@/interface';
 import { http } from '@/lib/request';
@@ -12,6 +14,7 @@ export default function useNamespace() {
   const params = useParams();
   const namespace_id = params.namespace_id;
   const [loading, onLoading] = useState(false);
+  const { t } = useTranslation();
   const [data, onData] = useState<Namespace>({
     id: '',
     name: '',
@@ -43,6 +46,12 @@ export default function useNamespace() {
         onData({ ...data, ...val });
         return Promise.resolve();
       })
+      .catch(err => {
+        if (err?.response?.data?.code === 'namespace_conflict') {
+          toast.error(t('namespace.conflict'));
+        }
+        return Promise.reject(err);
+      })
       .finally(() => {
         onLoading(false);
       });

src/i18n/locales/en.json

@@ -102,7 +102,8 @@
     "max": "At most 32 characters",
     "submit": "Save",
     "success": "Updated",
-    "member_count": "{{ size }} members"
+    "member_count": "{{ size }} members",
+    "conflict": "There's already a namespace with the same name"
   },
   "login": {
     "product_name": "OmniBox",
@@ -293,7 +294,7 @@
     "fail": "Copy failed, please copy manually"
   },
   "chat": {
-    "title": "Chat",
+    "title": "OmniBox AI",
     "citations": "Citations",
     "citations_results": "Search Results",
     "searching": "Searching...",
@@ -321,10 +322,10 @@
     },
     "home": {
       "greeting": {
-        "morning": "Good morning, {{ name }}",
-        "afternoon": "Good afternoon, {{ name }}",
-        "evening": "Good evening, {{ name }}",
-        "night": "Good night, {{ name }}"
+        "morning": "Good morning, how can I help you today?",
+        "afternoon": "Good afternoon, how can I help you today?",
+        "evening": "Good evening, how can I help you today?",
+        "night": "Good night, how can I help you today?"
       }
     },
     "tools": {
@@ -484,5 +485,12 @@
       "save": "Save",
       "discard": "Discard"
     }
+  },
+  "footer": {
+    "docs": "Docs",
+    "discord": "Discord",
+    "wechat": "QR Code",
+    "feedback": "Feedback",
+    "join": "Scan with WeChat to join the group"
   }
 }