Merge branch 'arc53:main' into main

2025-12-01 01:23:14 +00:00 · 2024-07-09 16:29:04 +05:30
parent edfe5e1156 1776f6e7fd
commit 3357ce8f33
8 changed files with 129 additions and 106 deletions
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -3971,11 +3971,11 @@
      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
    },
    "node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
      "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
      },
      "engines": {
        "node": ">=8"
@@ -5182,9 +5182,9 @@
      }
    },
    "node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
      "dependencies": {
        "to-regex-range": "^5.0.1"
      },
@@ -11712,6 +11712,19 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/typescript": {
+      "version": "5.5.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.3.tgz",
+      "integrity": "sha512-/hreyEujaB0w76zKo6717l3L0o/qEUtRgdvUBvlkhoWeOVMjMuHNHk0BRBzikzuGDqNmPQbg5ifMEqsHLiIUcQ==",
+      "peer": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
    "node_modules/unified": {
      "version": "10.1.2",
      "resolved": "https://registry.npmjs.org/unified/-/unified-10.1.2.tgz",
--- a/extensions/web-widget/package-lock.json
+++ b/extensions/web-widget/package-lock.json
@@ -152,12 +152,12 @@
      }
    },
    "node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
      "dev": true,
      "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
      },
      "engines": {
        "node": ">=8"
@@ -294,9 +294,9 @@
      }
    },
    "node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
      "dev": true,
      "dependencies": {
        "to-regex-range": "^5.0.1"
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -22,6 +22,7 @@
    "@reduxjs/toolkit": "^1.9.2",
    "@vercel/analytics": "^0.1.10",
    "i18next": "^23.11.5",
+    "i18next-browser-languagedetector": "^8.0.0",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-copy-to-clipboard": "^5.1.0",
--- a/frontend/src/Hero.tsx
+++ b/frontend/src/Hero.tsx
@@ -19,7 +19,7 @@ export default function Hero({
  }>;
  return (
    <div
-      className={`mt-14 mb-4 flex w-full flex-col justify-end text-black-1000 dark:text-bright-gray sm:w-full lg:mt-6`}
+      className={`mt-16 mb-4 flex w-full flex-col justify-end text-black-1000 dark:text-bright-gray sm:w-full lg:mt-6`}
    >
      <div className="flex h-full w-full flex-col items-center justify-center">
        <div className="flex items-center">
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -191,11 +191,11 @@ export default function Conversation() {
  };

  return (
-    <div className="flex h-screen flex-col gap-1">
+    <div className="flex h-screen flex-col gap-7 pb-2">
      <div
        onWheel={handleUserInterruption}
        onTouchMove={handleUserInterruption}
-        className="flex h-[90%] w-full justify-center overflow-y-auto p-4 md:h-[83vh]"
+        className="flex h-[90%] w-full flex-1 justify-center overflow-y-auto p-4 md:h-[83vh]"
      >
        {queries.length > 0 && !hasScrolledToLast && (
          <button
@@ -234,8 +234,8 @@ export default function Conversation() {
        {queries.length === 0 && <Hero handleQuestion={handleQuestion} />}
      </div>

-      <div className="bottom-safe fixed flex w-11/12 flex-col items-end self-center rounded-2xl bg-opacity-0 pb-1 sm:w-6/12">
-        <div className="flex h-full w-full items-center rounded-full border border-silver bg-white dark:bg-raisin-black">
+      <div className="flex w-11/12 flex-col items-end self-center rounded-2xl bg-opacity-0 pb-1 sm:w-6/12">
+        <div className="flex h-full w-full items-center rounded-[40px] border border-silver bg-white py-1 dark:bg-raisin-black">
          <div
            id="inputbox"
            ref={inputRef}
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -42,7 +42,7 @@ const ConversationBubble = forwardRef<
    bubble = (
      <div ref={ref} className={`flex flex-row-reverse self-end ${className}`}>
        <Avatar className="mt-2 text-2xl" avatar="🧑‍💻"></Avatar>
-        <div className="ml-10 mr-2 flex items-center rounded-3xl bg-purple-30 p-3.5 text-white">
+        <div className="ml-10 mr-2 flex items-center rounded-[28px] bg-purple-30 py-[14px] px-[19px] text-white">
          <ReactMarkdown className="whitespace-pre-wrap break-normal leading-normal">
            {message}
          </ReactMarkdown>
@@ -53,7 +53,7 @@ const ConversationBubble = forwardRef<
    bubble = (
      <div
        ref={ref}
-        className={`flex flex-wrap self-start ${className} group flex-col pr-20  dark:text-bright-gray`}
+        className={`flex flex-wrap self-start ${className} group flex-col  dark:text-bright-gray`}
      >
        <div className="flex flex-wrap self-start lg:flex-nowrap">
          <Avatar
@@ -68,7 +68,7 @@ const ConversationBubble = forwardRef<
          />

          <div
-            className={`ml-2 mr-5 flex max-w-[90vw] rounded-3xl bg-gray-1000 p-3.5 dark:bg-gun-metal md:max-w-[70vw] lg:max-w-[50vw] ${
+            className={`ml-2 mr-5 flex max-w-[90vw] rounded-[28px] bg-gray-1000 py-[14px] px-7 dark:bg-gun-metal md:max-w-[70vw] lg:max-w-[50vw] ${
              type === 'ERROR'
                ? 'relative flex-row items-center rounded-full border border-transparent bg-[#FFE7E7] p-2 py-5 text-sm font-normal text-red-3000  dark:border-red-2000 dark:text-white'
                : 'flex-col rounded-3xl'
@@ -208,82 +208,82 @@ const ConversationBubble = forwardRef<
              </>
            )}
          </div>
-          <div className="flex justify-center">
-            <div
-              className={`relative mr-5  block items-center justify-center lg:invisible 
+        </div>
+        <div className="my-2 flex justify-start lg:ml-12">
+          <div
+            className={`relative mr-5  block items-center justify-center lg:invisible 
            ${type !== 'ERROR' ? 'group-hover:lg:visible' : ''}`}
-            >
-              <div className="absolute left-2 top-4">
-                <CoppyButton text={message} />
-              </div>
+          >
+            <div>
+              <CoppyButton text={message} />
            </div>
-            <div
-              className={`relative mr-5 flex items-center justify-center ${
-                !isLikeClicked ? 'lg:invisible' : ''
-              } ${
-                feedback === 'LIKE' || type !== 'ERROR'
-                  ? 'group-hover:lg:visible'
-                  : ''
-              }`}
-            >
-              <div className="absolute left-6 top-4">
-                <div
-                  className={`flex items-center justify-center rounded-full p-2 dark:bg-transparent ${
-                    isLikeHovered
-                      ? 'bg-[#EEEEEE] dark:bg-purple-taupe'
-                      : 'bg-[#ffffff] dark:bg-transparent'
-                  }`}
-                >
-                  <Like
-                    className={`cursor-pointer 
+          </div>
+          <div
+            className={`relative mr-5 flex items-center justify-center ${
+              !isLikeClicked ? 'lg:invisible' : ''
+            } ${
+              feedback === 'LIKE' || type !== 'ERROR'
+                ? 'group-hover:lg:visible'
+                : ''
+            }`}
+          >
+            <div>
+              <div
+                className={`flex items-center justify-center rounded-full p-2 dark:bg-transparent ${
+                  isLikeHovered
+                    ? 'bg-[#EEEEEE] dark:bg-purple-taupe'
+                    : 'bg-[#ffffff] dark:bg-transparent'
+                }`}
+              >
+                <Like
+                  className={`cursor-pointer 
                  ${
                    isLikeClicked || feedback === 'LIKE'
                      ? 'fill-white-3000 stroke-purple-30 dark:fill-transparent'
                      : 'fill-none  stroke-gray-4000'
                  }`}
-                    onClick={() => {
-                      handleFeedback?.('LIKE');
-                      setIsLikeClicked(true);
-                      setIsDislikeClicked(false);
-                    }}
-                    onMouseEnter={() => setIsLikeHovered(true)}
-                    onMouseLeave={() => setIsLikeHovered(false)}
-                  ></Like>
-                </div>
+                  onClick={() => {
+                    handleFeedback?.('LIKE');
+                    setIsLikeClicked(true);
+                    setIsDislikeClicked(false);
+                  }}
+                  onMouseEnter={() => setIsLikeHovered(true)}
+                  onMouseLeave={() => setIsLikeHovered(false)}
+                ></Like>
              </div>
            </div>
-            <div
-              className={`mr-13 relative flex items-center justify-center ${
-                !isDislikeClicked ? 'lg:invisible' : ''
-              } ${
-                feedback === 'DISLIKE' || type !== 'ERROR'
-                  ? 'group-hover:lg:visible'
-                  : ''
-              }`}
-            >
-              <div className="absolute left-10 top-4">
-                <div
-                  className={`flex items-center justify-center rounded-full p-2 ${
-                    isDislikeHovered
-                      ? 'bg-[#EEEEEE] dark:bg-purple-taupe'
-                      : 'bg-[#ffffff] dark:bg-transparent'
+          </div>
+          <div
+            className={`mr-13 relative flex items-center justify-center ${
+              !isDislikeClicked ? 'lg:invisible' : ''
+            } ${
+              feedback === 'DISLIKE' || type !== 'ERROR'
+                ? 'group-hover:lg:visible'
+                : ''
+            }`}
+          >
+            <div>
+              <div
+                className={`flex items-center justify-center rounded-full p-2 ${
+                  isDislikeHovered
+                    ? 'bg-[#EEEEEE] dark:bg-purple-taupe'
+                    : 'bg-[#ffffff] dark:bg-transparent'
+                }`}
+              >
+                <Dislike
+                  className={`cursor-pointer ${
+                    isDislikeClicked || feedback === 'DISLIKE'
+                      ? 'fill-white-3000 stroke-red-2000 dark:fill-transparent'
+                      : 'fill-none  stroke-gray-4000'
                  }`}
-                >
-                  <Dislike
-                    className={`cursor-pointer ${
-                      isDislikeClicked || feedback === 'DISLIKE'
-                        ? 'fill-white-3000 stroke-red-2000 dark:fill-transparent'
-                        : 'fill-none  stroke-gray-4000'
-                    }`}
-                    onClick={() => {
-                      handleFeedback?.('DISLIKE');
-                      setIsDislikeClicked(true);
-                      setIsLikeClicked(false);
-                    }}
-                    onMouseEnter={() => setIsDislikeHovered(true)}
-                    onMouseLeave={() => setIsDislikeHovered(false)}
-                  ></Dislike>
-                </div>
+                  onClick={() => {
+                    handleFeedback?.('DISLIKE');
+                    setIsDislikeClicked(true);
+                    setIsLikeClicked(false);
+                  }}
+                  onMouseEnter={() => setIsDislikeHovered(true)}
+                  onMouseLeave={() => setIsDislikeHovered(false)}
+                ></Dislike>
              </div>
            </div>
          </div>
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -409,9 +409,9 @@ template {
  width: 0;
 }

-.bottom-safe {
+/* .bottom-safe {
  bottom: env(safe-area-inset-bottom, 0);
-}
+} */

 .inputbox-style[contenteditable] {
  padding-left: 36px;
--- a/frontend/src/locale/i18n.ts
+++ b/frontend/src/locale/i18n.ts
@@ -1,29 +1,38 @@
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';

 import en from './en.json'; //English
 import es from './es.json'; //Spanish
 import jp from './jp.json'; //Japanese
 import zh from './zh.json'; //Mandarin

-i18n.use(initReactI18next).init({
-  resources: {
-    en: {
-      translation: en,
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    resources: {
+      en: {
+        translation: en,
+      },
+      es: {
+        translation: es,
+      },
+      jp: {
+        translation: jp,
+      },
+      zh: {
+        translation: zh,
+      },
    },
-    es: {
-      translation: es,
+    fallbackLng: 'en',
+    detection: {
+      order: ['localStorage', 'navigator'],
+      caches: ['localStorage'],
+      lookupLocalStorage: 'docsgpt-locale',
    },
-    jp: {
-      translation: jp,
-    },
-    zh: {
-      translation: zh,
-    },
-  },
-});
+  });

-const locale = localStorage.getItem('docsgpt-locale') ?? 'en';
-i18n.changeLanguage(locale);
+i18n.changeLanguage(i18n.language);

 export default i18n;