Merge branch 'main' into feat/sources-in-react-widget

2025-11-29 08:33:20 +00:00 · 2024-11-11 14:36:34 +01:00
parent a7aae3ff7e ad602f22c8
commit 6f83bd8961
13 changed files with 120 additions and 51 deletions
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -7,7 +7,7 @@
      "license": "MIT",
      "dependencies": {
        "@vercel/analytics": "^1.1.1",
-        "docsgpt": "^0.4.5",
+        "docsgpt": "^0.4.7",
        "next": "^14.2.12",
        "nextra": "^2.13.2",
        "nextra-theme-docs": "^2.13.2",
@@ -3576,9 +3576,9 @@
      }
    },
    "node_modules/docsgpt": {
-      "version": "0.4.5",
-      "resolved": "https://registry.npmjs.org/docsgpt/-/docsgpt-0.4.5.tgz",
-      "integrity": "sha512-vf09E7jGn7pBqfvFIbpDPdvIv8dbbjhrMKva9x5hjiW5eroC8q9s1KwAzwkWidFRe0lM/A1mZUvluIAR8v4TuQ==",
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/docsgpt/-/docsgpt-0.4.7.tgz",
+      "integrity": "sha512-4YZzLZo6ybudFrJVUQflDFeWzFiTATRWB9myrGSpLigyuMMzax1ZAY2xFallZLuEG9VVm0mOgkx3ssWHLrXWkQ==",
      "license": "Apache-2.0",
      "dependencies": {
        "@babel/plugin-transform-flow-strip-types": "^7.23.3",
--- a/docs/package.json
+++ b/docs/package.json
@@ -7,7 +7,7 @@
  "license": "MIT",
  "dependencies": {
    "@vercel/analytics": "^1.1.1",
-    "docsgpt": "^0.4.6",
+    "docsgpt": "^0.4.7",
    "next": "^14.2.12",
    "nextra": "^2.13.2",
    "nextra-theme-docs": "^2.13.2",
--- a/extensions/react-widget/package-lock.json
+++ b/extensions/react-widget/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "docsgpt",
-  "version": "0.4.6",
+  "version": "0.4.7",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "docsgpt",
-      "version": "0.4.6",
+      "version": "0.4.7",
      "license": "Apache-2.0",
      "dependencies": {
        "@babel/plugin-transform-flow-strip-types": "^7.23.3",
--- a/extensions/react-widget/package.json
+++ b/extensions/react-widget/package.json
@@ -1,6 +1,6 @@
 {
  "name": "docsgpt",
-  "version": "0.4.6",
+  "version": "0.4.7",
  "private": false,
  "description": "DocsGPT 🦖 is an innovative open-source tool designed to simplify the retrieval of information from project documentation using advanced GPT models 🤖.",
  "source": "./src/index.html",
--- a/extensions/react-widget/src/components/DocsGPTWidget.tsx
+++ b/extensions/react-widget/src/components/DocsGPTWidget.tsx
@@ -83,7 +83,7 @@ const WidgetContainer = styled.div<{ modal?: boolean, isOpen?: boolean }>`
    text-align: left;
    @keyframes createBox {
      0% {
-        transform: scale(0.5);
+        transform: scale(0.6);
      }
      90% {
        transform: scale(1.02);
@@ -101,36 +101,89 @@ const WidgetContainer = styled.div<{ modal?: boolean, isOpen?: boolean }>`
        transform: scale(1.02); 
      }
      100% {
-        transform: scale(0);
+        transform: scale(0.6);
      }
    }
 `;
-
-const StyledContainer = styled.div`
+const StyledContainer = styled.div<{ isOpen: boolean }>`
    all: initial;
    max-height: ${(props) => props.theme.dimensions.maxHeight};
    max-width: ${(props) => props.theme.dimensions.maxWidth};
-    height: ${(props) => props.theme.dimensions.height} ;
-    width: ${(props) => props.theme.dimensions.width} ;
-    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: space-between;
    bottom: 0;
    left: 0;
-    border-radius: 12px;
-    background-color: ${props => props.theme.primary.bg};
+    background-color: ${(props) => props.theme.primary.bg};
    font-family: sans-serif;
+    display: flex;
+    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.1);
-    transition: visibility 0.3s, opacity 0.3s;
-    padding: 26px 26px 0px 26px ;
+    padding: 26px 26px 0px 26px;
+    animation: ${({ isOpen, theme }) =>
+      theme.dimensions.size === 'large'
+        ? isOpen
+          ? 'fadeIn 150ms ease-in forwards'
+          : 'fadeOut 150ms ease-in forwards'
+        : isOpen
+        ? 'openContainer 150ms ease-in forwards'
+        : 'closeContainer 250ms ease-in forwards'};
+    @keyframes openContainer {
+      0% {
+        width: 200px;
+        height: 100px;
+      }
+      100% {
+        width: ${(props) => props.theme.dimensions.width};
+        height: ${(props) => props.theme.dimensions.height};
+        border-radius: 12px;
+      }
+    }
+    @keyframes closeContainer {
+      0% {
+        width: ${(props) => props.theme.dimensions.width};
+        height: ${(props) => props.theme.dimensions.height};
+        border-radius: 12px;
+      }
+      100% {
+        width: 200px;
+        height: 100px;
+      }
+    }
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+        width: ${(props) => props.theme.dimensions.width};
+        height: ${(props) => props.theme.dimensions.height};
+        transform: scale(0.9);
+      }
+      to {
+        opacity: 1;
+        transform: scale(1);
+        width: ${(props) => props.theme.dimensions.width};
+        height: ${(props) => props.theme.dimensions.height};
+      }
+    }
+    @keyframes fadeOut {
+      from {
+        opacity: 1;
+        width: ${(props) => props.theme.dimensions.width};
+        height: ${(props) => props.theme.dimensions.height};
+      }
+      to {
+        opacity: 0;
+        transform: scale(0.9);
+        width: ${(props) => props.theme.dimensions.width};
+        height: ${(props) => props.theme.dimensions.height};
+      }
+    }
    @media only screen and (max-width: 768px) {
-    max-height: 100vh ;
-    max-width: 80vw;
-    overflow: auto;
+      max-height: 100vh;
+      max-width: 80vw;
+      overflow: auto;
    }
 `;
-const FloatingButton = styled.div<{ bgcolor: string, hidden: boolean }>`
+const FloatingButton = styled.div<{ bgcolor: string, hidden: boolean, isAnimatingButton: boolean }>`
    position: fixed;
    display: ${props => props.hidden ? "none" : "flex"};
    z-index: 500;
@@ -147,9 +200,22 @@ const FloatingButton = styled.div<{ bgcolor: string, hidden: boolean }>`
    background: ${props => props.bgcolor};
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
+    animation: ${props => props.isAnimatingButton ? 'scaleAnimation 200ms forwards' : 'none'};
    &:hover {
-        transform: scale(1.1);
-        transition: transform 0.2s ease-in-out;
+      transform: scale(1.1);
+      transition: transform 0.2s ease-in-out;
+    }
+    &:not(:hover) {
+      transition: transform 0.2s ease-in-out;
+    }
+
+    @keyframes scaleAnimation {
+      from {
+      transform: scale(1.2);
+      }
+      to {
+      transform: scale(1);
+      }
    }
 `;

@@ -450,6 +516,8 @@ export const DocsGPTWidget = ({
  const [conversationId, setConversationId] = React.useState<string | null>(null)
  const [open, setOpen] = React.useState<boolean>(deafultOpen)
  const [eventInterrupt, setEventInterrupt] = React.useState<boolean>(false); //click or scroll by user while autoScrolling
+  const [isAnimatingButton, setIsAnimatingButton] = React.useState(false);
+  const [isFloatingButtonVisible, setIsFloatingButtonVisible] = React.useState(true);
  const isBubbleHovered = useRef<boolean>(false)
  const widgetRef = useRef<HTMLDivElement>(null)
  const endMessageRef = React.useRef<HTMLDivElement | null>(null);
@@ -571,15 +639,16 @@ export const DocsGPTWidget = ({
  };
  const handleClose = () => {
    setOpen(false);
-    size !== "large" ? setTimeout(() => {
-      if (widgetRef.current)
-        widgetRef.current.style.display = "none"
+    setTimeout(() => {
+      if (widgetRef.current) widgetRef.current.style.display = "none";
+      setIsFloatingButtonVisible(true);
+      setIsAnimatingButton(true);
+      setTimeout(() => setIsAnimatingButton(false), 200);
    }, 250)
-      :
-      widgetRef.current && (widgetRef.current.style.display = "none")
  };
  const handleOpen = () => {
    setOpen(true);
+    setIsFloatingButtonVisible(false);
    if (widgetRef.current)
      widgetRef.current.style.display = 'block'
  }
@@ -593,12 +662,12 @@ export const DocsGPTWidget = ({
      {open && size === 'large' &&
        <Overlay onClick={handleClose} />
      }
-      <FloatingButton bgcolor={buttonBg} onClick={handleOpen} hidden={open}>
+      <FloatingButton bgcolor={buttonBg} onClick={handleOpen} hidden={!isFloatingButtonVisible} isAnimatingButton={isAnimatingButton}>
        <img width={24} src={buttonIcon} />
        <span>{buttonText}</span>
      </FloatingButton>
      <WidgetContainer ref={widgetRef} className={`${size != "large" && (open ? "open" : "close")}`} modal={size == 'large'}>
-        {<StyledContainer>
+        {<StyledContainer isOpen={open}>
          <div>
            <CancelButton onClick={handleClose}>
              <Cross2Icon width={24} height={24} color={theme === 'light' ? 'black' : 'white'} />
@@ -697,7 +766,7 @@ export const DocsGPTWidget = ({
            </PromptContainer>
            <Tagline>
              Powered by&nbsp;
-              <Hyperlink target='_blank' href='https://github.com/arc53/DocsGPT'>DocsGPT</Hyperlink>
+              <Hyperlink target='_blank' href='https://www.docsgpt.cloud/'>DocsGPT</Hyperlink>
            </Tagline>
          </div>
        </StyledContainer>}
--- a/frontend/src/assets/file_upload.svg
+++ b/frontend/src/assets/file_upload.svg
@@ -1,3 +1,3 @@
 <svg width="28" height="34" viewBox="0 0 28 34" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10 26.0003H18C19.1 26.0003 20 25.1003 20 24.0003V14.0003H23.18C24.96 14.0003 25.86 11.8403 24.6 10.5803L15.42 1.40032C15.235 1.21491 15.0152 1.06782 14.7732 0.967453C14.5313 0.86709 14.2719 0.81543 14.01 0.81543C13.7481 0.81543 13.4887 0.86709 13.2468 0.967453C13.0048 1.06782 12.785 1.21491 12.6 1.40032L3.42 10.5803C2.16 11.8403 3.04 14.0003 4.82 14.0003H8V24.0003C8 25.1003 8.9 26.0003 10 26.0003ZM2 30.0003H26C27.1 30.0003 28 30.9003 28 32.0003C28 33.1003 27.1 34.0003 26 34.0003H2C0.9 34.0003 0 33.1003 0 32.0003C0 30.9003 0.9 30.0003 2 30.0003Z" fill="#828282"/>
+<path d="M10 26.0003H18C19.1 26.0003 20 25.1003 20 24.0003V14.0003H23.18C24.96 14.0003 25.86 11.8403 24.6 10.5803L15.42 1.40032C15.235 1.21491 15.0152 1.06782 14.7732 0.967453C14.5313 0.86709 14.2719 0.81543 14.01 0.81543C13.7481 0.81543 13.4887 0.86709 13.2468 0.967453C13.0048 1.06782 12.785 1.21491 12.6 1.40032L3.42 10.5803C2.16 11.8403 3.04 14.0003 4.82 14.0003H8V24.0003C8 25.1003 8.9 26.0003 10 26.0003ZM2 30.0003H26C27.1 30.0003 28 30.9003 28 32.0003C28 33.1003 27.1 34.0003 26 34.0003H2C0.9 34.0003 0 33.1003 0 32.0003C0 30.9003 0.9 30.0003 2 30.0003Z" fill="#949494"/>
 </svg>
--- a/frontend/src/assets/website_collect.svg
+++ b/frontend/src/assets/website_collect.svg
@@ -1,6 +1,6 @@
 <svg width="58" height="49" viewBox="0 0 58 49" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M33.0002 45.3337H6.3335C5.27263 45.3337 4.25521 44.9122 3.50507 44.1621C2.75492 43.4119 2.3335 42.3945 2.3335 41.3337V6.66699C2.3335 5.60613 2.75492 4.58871 3.50507 3.83856C4.25521 3.08842 5.27263 2.66699 6.3335 2.66699H51.6668C52.7277 2.66699 53.7451 3.08842 54.4953 3.83856C55.2454 4.58871 55.6668 5.60613 55.6668 6.66699V24.0003M42.3335 40.0003L49.0002 46.667M49.0002 46.667L55.6668 40.0003M49.0002 46.667V30.667" stroke="#626262" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M2.3335 6.66699C2.3335 5.60613 2.75492 4.58871 3.50507 3.83856C4.25521 3.08842 5.27263 2.66699 6.3335 2.66699H51.6668C52.7277 2.66699 53.7451 3.08842 54.4953 3.83856C55.2454 4.58871 55.6668 5.60613 55.6668 6.66699V18.667H2.3335V6.66699Z" stroke="#626262" stroke-width="4"/>
-<path d="M7.66667 10.6673C7.66667 9.19456 8.86057 8.00065 10.3333 8.00065C11.8061 8.00065 13 9.19456 13 10.6673C13 12.1401 11.8061 13.334 10.3333 13.334C8.86057 13.334 7.66667 12.1401 7.66667 10.6673Z" fill="#626262"/>
-<path d="M15.6667 10.6673C15.6667 9.19456 16.8606 8.00065 18.3333 8.00065C19.8061 8.00065 21 9.19456 21 10.6673C21 12.1401 19.8061 13.334 18.3333 13.334C16.8606 13.334 15.6667 12.1401 15.6667 10.6673Z" fill="#626262"/>
+<path d="M33.0002 45.3337H6.3335C5.27263 45.3337 4.25521 44.9122 3.50507 44.1621C2.75492 43.4119 2.3335 42.3945 2.3335 41.3337V6.66699C2.3335 5.60613 2.75492 4.58871 3.50507 3.83856C4.25521 3.08842 5.27263 2.66699 6.3335 2.66699H51.6668C52.7277 2.66699 53.7451 3.08842 54.4953 3.83856C55.2454 4.58871 55.6668 5.60613 55.6668 6.66699V24.0003M42.3335 40.0003L49.0002 46.667M49.0002 46.667L55.6668 40.0003M49.0002 46.667V30.667" stroke="#949494" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.3335 6.66699C2.3335 5.60613 2.75492 4.58871 3.50507 3.83856C4.25521 3.08842 5.27263 2.66699 6.3335 2.66699H51.6668C52.7277 2.66699 53.7451 3.08842 54.4953 3.83856C55.2454 4.58871 55.6668 5.60613 55.6668 6.66699V18.667H2.3335V6.66699Z" stroke="#949494" stroke-width="4"/>
+<path d="M7.66667 10.6673C7.66667 9.19456 8.86057 8.00065 10.3333 8.00065C11.8061 8.00065 13 9.19456 13 10.6673C13 12.1401 11.8061 13.334 10.3333 13.334C8.86057 13.334 7.66667 12.1401 7.66667 10.6673Z" fill="#949494"/>
+<path d="M15.6667 10.6673C15.6667 9.19456 16.8606 8.00065 18.3333 8.00065C19.8061 8.00065 21 9.19456 21 10.6673C21 12.1401 19.8061 13.334 18.3333 13.334C16.8606 13.334 15.6667 12.1401 15.6667 10.6673Z" fill="#949494"/>
 </svg>
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -216,9 +216,9 @@ export default function Conversation() {
  return (
    <div className="flex flex-col gap-1 h-full justify-end ">
      {conversationId && queries.length > 0 && (
-        <div className="absolute top-4 right-20 z-20 ">
+        <div className="absolute top-4 right-20 z-10 ">
          {' '}
-          <div className="flex items-center gap-4 ">
+          <div className="flex mt-2 items-center gap-4 ">
            {isMobile && queries.length > 0 && (
              <button
                title="Open New Chat"
--- a/frontend/src/locale/en.json
+++ b/frontend/src/locale/en.json
@@ -77,12 +77,12 @@
  },
  "modals": {
    "uploadDoc": {
-      "label": "Upload New Documentation",
+      "label": "Upload new document",
      "select": "Choose how to upload your document to DocsGPT",
      "file": "Upload from device",
      "back": "Back",
      "wait": "Please wait ...",
-      "remote": "Collect from a website",
+      "remote": "Collect from website",
      "start": "Start Chatting",
      "name": "Name",
      "choose": "Choose Files",
--- a/frontend/src/locale/es.json
+++ b/frontend/src/locale/es.json
@@ -77,7 +77,7 @@
  },
  "modals": {
    "uploadDoc": {
-      "label": "Subir Nueva Documentación",
+      "label": "Subir nuevo documento",
      "select": "Elija cómo cargar su documento en DocsGPT",
      "file": "Subir desde el dispositivo",
      "back": "Atrás",
--- a/frontend/src/locale/jp.json
+++ b/frontend/src/locale/jp.json
@@ -77,7 +77,7 @@
  },
  "modals": {
    "uploadDoc": {
-      "label": "新規書類のアップロード",
+      "label": "新しい文書をアップロードする",
      "select": "ドキュメントを DocsGPT にアップロードする方法を選択します",
      "file": "デバイスからアップロード",
      "back": "戻る",
--- a/frontend/src/locale/zh.json
+++ b/frontend/src/locale/zh.json
@@ -77,7 +77,7 @@
  },
  "modals": {
    "uploadDoc": {
-      "label": "上传新文档资料",
+      "label": "上传新文档",
      "select": "选择如何将文档上传到 DocsGPT",
      "file": "从设备上传",
      "back": "后退",
--- a/frontend/src/upload/Upload.tsx
+++ b/frontend/src/upload/Upload.tsx
@@ -351,32 +351,32 @@ function Upload({
  } else {
    view = (
      <div className="flex flex-col gap-4 w-full">
-        <p className="text-xl text-jet dark:text-bright-gray text-center font-semibold">
+        <p className="text-2xl text-jet dark:text-bright-gray text-center font-semibold">
          {t('modals.uploadDoc.label')}
        </p>
        {!activeTab && (
          <div>
-            <p className="text-gray-6000 dark:text-light-gray text-sm text-center">
+            <p className="text-gray-6000 dark:text-bright-gray text-sm text-center font-medium">
              {t('modals.uploadDoc.select')}
            </p>
            <div className="w-full gap-4 h-full p-4 flex flex-col md:flex-row md:gap-4 justify-center items-center">
              <button
                onClick={() => setActiveTab('file')}
-                className="rounded-3xl text-md font-medium border flex flex-col items-center justify-center hover:shadow-lg dark:hover:shadow-lg p-8 dark:active:shadow-lg gap-4 bg-white dark:bg-outer-space dark:text-light-gray hover:bg-gray-100 dark:hover:bg-[#767183]/50 hover:text-purple-30 dark:hover:text-gray-30 border-purple-30 dark:border-gray-700 h-40 w-40 md:w-52 md:h-52"
+                className="opacity-85 hover:opacity-100 rounded-3xl text-sm font-medium border flex flex-col items-center justify-center hover:shadow-purple-30/30 hover:shadow-lg p-8 gap-4 bg-white text-[#777777] dark:bg-outer-space dark:text-[#c3c3c3] hover:border-purple-30 border-[#D7D7D7] h-40 w-40 md:w-52 md:h-52"
              >
                <img
                  src={FileUpload}
-                  className="w-8 h-8 mr-2 dark:filter dark:invert"
+                  className="w-12 h-12 mr-2 dark:filter dark:invert dark:brightness-50"
                />
                {t('modals.uploadDoc.file')}
              </button>
              <button
                onClick={() => setActiveTab('remote')}
-                className="rounded-3xl text-md font-medium border flex flex-col items-center justify-center hover:shadow-lg dark:hover:shadow-lg p-8 dark:active:shadow-lg gap-4 bg-white dark:bg-outer-space dark:text-light-gray hover:bg-gray-100 dark:hover:bg-[#767183]/50 hover:text-purple-30 dark:hover:text-gray-30 border-purple-30 dark:border-gray-700 h-40 w-40 md:w-52 md:h-52"
+                className="opacity-85 hover:opacity-100 rounded-3xl text-sm font-medium border flex flex-col items-center justify-center hover:shadow-purple-30/30 hover:shadow-lg p-8 gap-4 bg-white text-[#777777] dark:bg-outer-space dark:text-[#c3c3c3] hover:border-purple-30 border-[#D7D7D7] h-40 w-40 md:w-52 md:h-52"
              >
                <img
                  src={WebsiteCollect}
-                  className="w-8 h-8 mr-2 dark:filter dark:invert"
+                  className="w-14 h-14 mr-2 dark:filter dark:invert dark:brightness-50"
                />
                {t('modals.uploadDoc.remote')}
              </button>