From 75173473aec28d6cfd3ad36a89f8004353d3a23a Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Wed, 4 Dec 2024 02:47:57 +0530
Subject: [PATCH 1/3] (feat:bubble) replace emoji with user profile

---
 frontend/src/assets/user.png                     | Bin 0 -> 735 bytes
 frontend/src/components/Avatar.tsx               |   2 +-
 frontend/src/conversation/ConversationBubble.tsx |  13 ++++++++++---
 3 files changed, 11 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/assets/user.png

diff --git a/frontend/src/assets/user.png b/frontend/src/assets/user.png
new file mode 100644
index 0000000000000000000000000000000000000000..3cc5d2f117820df7cd946dad34624157301c6ca4
GIT binary patch
literal 735
zcmV<50wDc~P)<h;3K|Lk000e1NJLTq000yK000yS1^@s6jfou%00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0(414K~#7FrBqF5
z6G0T7+1+Flt%<E^v4L0=DVky~f?7{fibW3=Dk9$W+GG5QCrMBKpqKgs9>fZwpk731
zuto5o2NeWGw4j(sYTG1sv&kmi-<feYP0~#=Nt8Z#?3?%IoA<r9^9F!65+#J0UM8OV
z@$6<o2yC~%<%S0zlSfji>{+Cv5QKnrIJqxwkNe8_;Lg~8A9#J{(<w1sc!)7#?0%MI
z6|c{8;oQicoBw>^)yHrA1p+?kn&GF#IgU%SZf@_y@dNV>F&aQn&>=#Q-|QJJ3=l#+
ztZodN=F|EZLj$Oq5;P10V1z6%Rb^EU(Xdp8fS?YHYP(@^t?@w6MT0gl9KZdf!!Xcc
z-DGH2qi&5cIccVWZ5gg)iUz}zMJMmv4O&PsFa0rTlC}(|qGuE-pPSNjomi|4eU)9s
z*2`ZhFI}W1qV}**P@X$o%2x;H7-$HZMJlqASkUKQ(y%Pe`Qv>|?F}AGIvm^>fRMu&
zgNmxECg-xk>DQAJ-)LCswXtO8&iNOjm<?CUEvqOBmt(iWO-GLdErjJA?+jfx%Ut`J
zJb*C>A!&wb%5ZY}JKx*aH&(jH#+q)~vF&Iy9(OgvRa09})3vvW{pnxHAxRMXHB}uF
z7SjQOYsoMy1H9e7dDq4buR6E-<~jpCvB<vdpDV0O2S)DBdY7c!vs@}OtjWsiR4_~_
zNNkzy(?SR?t$4Q!Z|d%v9q138h>Y%%N<I9!@cW*$EDQr18Df^&UI>tjD~zclYC(Qv
zR(TALhHnH^6(*4N?hzXmP-oYzt7h3?7&fnC5acpTvRRvQ$@F2cPC*)Q{ssGoVo4mR
RrW^nO002ovPDHLkV1f=vMCAYg

literal 0
HcmV?d00001

diff --git a/frontend/src/components/Avatar.tsx b/frontend/src/components/Avatar.tsx
index 202be2070..7f8c5a935 100644
--- a/frontend/src/components/Avatar.tsx
+++ b/frontend/src/components/Avatar.tsx
@@ -5,7 +5,7 @@ export default function Avatar({
   size,
   className,
 }: {
-  avatar: string | ReactNode;
+  avatar: ReactNode;
   size?: 'SMALL' | 'MEDIUM' | 'LARGE';
   className: string;
 }) {
diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index fc0044044..62e943dd0 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -16,6 +16,7 @@ import Like from '../assets/like.svg?react';
 import Link from '../assets/link.svg';
 import Sources from '../assets/sources.svg';
 import Edit from '../assets/edit.svg';
+import UserIcon from '../assets/user.png';
 import Avatar from '../components/Avatar';
 import CopyButton from '../components/CopyButton';
 import Sidebar from '../components/Sidebar';
@@ -90,9 +91,15 @@ const ConversationBubble = forwardRef<
       >
         <div
           ref={ref}
-          className={`flex flex-row-reverse self-end flex-wrap items-baseline ${className}`}
+          className={`flex flex-row-reverse self-end flex-wrap ${className}`}
         >
-          <Avatar className="mt-2 text-2xl" avatar="🧑‍💻"></Avatar>
+          <Avatar
+            size="SMALL"
+            className="mt-2 text-2xl"
+            avatar={
+              <img className="rounded-full mr-1" width={30} src={UserIcon} />
+            }
+          />
           {!isEditClicked && (
             <div
               style={{
@@ -137,7 +144,7 @@ const ConversationBubble = forwardRef<
               setIsEditClicked(true);
               setEditInputBox(message);
             }}
-            className={`p-2 cursor-pointer rounded-full hover:bg-[#35363B] flex items-center ${isQuestionHovered || isEditClicked ? 'visible' : 'invisible'}`}
+            className={`h-fit mt-3 p-2 cursor-pointer rounded-full hover:bg-[#35363B] flex items-center ${isQuestionHovered || isEditClicked ? 'visible' : 'invisible'}`}
           >
             <img src={Edit} alt="Edit" className="cursor-pointer" />
           </button>

From 4d38280cfaa1655891236c5ba7995630cf1d7e69 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Wed, 4 Dec 2024 02:49:10 +0530
Subject: [PATCH 2/3] (fix:title) remove dino emoji

---
 frontend/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/index.html b/frontend/index.html
index 5af1721b3..30faadc95 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -5,7 +5,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover" />
   <meta name="apple-mobile-web-app-capable" content="yes">
-  <title>DocsGPT 🦖</title>
+  <title>DocsGPT</title>
   <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
 </head>
 

From 0e4bd0679550e09735cada3ad9dc58ce6008cbde Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Thu, 5 Dec 2024 02:49:00 +0530
Subject: [PATCH 3/3] (feat:shared)add meta:og twitter tags

---
 frontend/package-lock.json                    |  51 ++++-
 frontend/package.json                         |   2 +
 .../src/conversation/SharedConversation.tsx   | 182 ++++++++++--------
 3 files changed, 149 insertions(+), 86 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 253c0c6b7..0a97c542a 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -18,6 +18,7 @@
         "react-copy-to-clipboard": "^5.1.0",
         "react-dom": "^18.3.1",
         "react-dropzone": "^14.2.3",
+        "react-helmet": "^6.1.0",
         "react-i18next": "^15.0.2",
         "react-markdown": "^9.0.1",
         "react-redux": "^8.0.5",
@@ -30,6 +31,7 @@
       "devDependencies": {
         "@types/react": "^18.0.27",
         "@types/react-dom": "^18.3.0",
+        "@types/react-helmet": "^6.1.11",
         "@types/react-syntax-highlighter": "^15.5.13",
         "@typescript-eslint/eslint-plugin": "^5.51.0",
         "@typescript-eslint/parser": "^5.62.0",
@@ -1675,7 +1677,17 @@
       "version": "18.3.0",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
       "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
-      "devOptional": true,
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-helmet": {
+      "version": "6.1.11",
+      "resolved": "https://registry.npmjs.org/@types/react-helmet/-/react-helmet-6.1.11.tgz",
+      "integrity": "sha512-0QcdGLddTERotCXo3VFlUSWO3ztraw8nZ6e3zJSgG7apwV5xt+pJUS8ewPBqT4NYB1optGLprNQzFleIY84u/g==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@types/react": "*"
       }
@@ -2848,10 +2860,11 @@
       }
     },
     "node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -7844,6 +7857,27 @@
         "react": ">= 16.8 || 18.0.0"
       }
     },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==",
+      "license": "MIT"
+    },
+    "node_modules/react-helmet": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
+      "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.1.1",
+        "react-side-effect": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.3.0"
+      }
+    },
     "node_modules/react-i18next": {
       "version": "15.0.2",
       "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-15.0.2.tgz",
@@ -7985,6 +8019,15 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-side-effect": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
+      "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.3.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-syntax-highlighter": {
       "version": "15.5.0",
       "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 20da9f4ae..6fffd3844 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -29,6 +29,7 @@
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.3.1",
     "react-dropzone": "^14.2.3",
+    "react-helmet": "^6.1.0",
     "react-i18next": "^15.0.2",
     "react-markdown": "^9.0.1",
     "react-redux": "^8.0.5",
@@ -41,6 +42,7 @@
   "devDependencies": {
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.3.0",
+    "@types/react-helmet": "^6.1.11",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@typescript-eslint/eslint-plugin": "^5.51.0",
     "@typescript-eslint/parser": "^5.62.0",
diff --git a/frontend/src/conversation/SharedConversation.tsx b/frontend/src/conversation/SharedConversation.tsx
index c4cb17fb6..5ab1d639c 100644
--- a/frontend/src/conversation/SharedConversation.tsx
+++ b/frontend/src/conversation/SharedConversation.tsx
@@ -26,6 +26,7 @@ import {
   selectQueries,
 } from './sharedConversationSlice';
 import { useSelector } from 'react-redux';
+import { Helmet } from 'react-helmet';
 
 export const SharedConversation = () => {
   const navigate = useNavigate();
@@ -176,94 +177,111 @@ export const SharedConversation = () => {
   }, []);
 
   return (
-    <div className="flex h-full flex-col items-center justify-between gap-2 overflow-y-hidden dark:bg-raisin-black">
-      <div
-        ref={sharedConversationRef}
-        onWheel={handleUserInterruption}
-        onTouchMove={handleUserInterruption}
-        className="flex w-full justify-center overflow-auto"
-      >
-        <div className="mt-0 w-11/12 md:w-10/12 lg:w-6/12">
-          <div className="mb-2 w-full border-b pb-2 dark:border-b-silver">
-            <h1 className="font-semi-bold text-4xl text-chinese-black dark:text-chinese-silver">
-              {title}
-            </h1>
-            <h2 className="font-semi-bold text-base text-chinese-black dark:text-chinese-silver">
-              {t('sharedConv.subtitle')}{' '}
-              <a href="/" className="text-[#007DFF]">
-                DocsGPT
-              </a>
-            </h2>
-            <h2 className="font-semi-bold text-base text-chinese-black dark:text-chinese-silver">
-              {date}
-            </h2>
-          </div>
-          <div className="">
-            {queries?.map((query, index) => {
-              return (
-                <Fragment key={index}>
-                  <ConversationBubble
-                    ref={endMessageRef}
-                    className={'mb-1 last:mb-28 md:mb-7'}
-                    key={`${index}QUESTION`}
-                    message={query.prompt}
-                    type="QUESTION"
-                    sources={query.sources}
-                  ></ConversationBubble>
+    <>
+      <Helmet>
+        <title>{`DocsGPT | ${title}`}</title>
+        <meta name="description" content="Shared conversations with DocsGPT" />
+        <meta property="og:title" content={title} />
+        <meta
+          property="og:description"
+          content="Shared conversations with DocsGPT"
+        />
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:title" content={title} />
+        <meta
+          name="twitter:description"
+          content="Shared conversations with DocsGPT"
+        />
+      </Helmet>
+      <div className="flex h-full flex-col items-center justify-between gap-2 overflow-y-hidden dark:bg-raisin-black">
+        <div
+          ref={sharedConversationRef}
+          onWheel={handleUserInterruption}
+          onTouchMove={handleUserInterruption}
+          className="flex w-full justify-center overflow-auto"
+        >
+          <div className="mt-0 w-11/12 md:w-10/12 lg:w-6/12">
+            <div className="mb-2 w-full border-b pb-2 dark:border-b-silver">
+              <h1 className="font-semi-bold text-4xl text-chinese-black dark:text-chinese-silver">
+                {title}
+              </h1>
+              <h2 className="font-semi-bold text-base text-chinese-black dark:text-chinese-silver">
+                {t('sharedConv.subtitle')}{' '}
+                <a href="/" className="text-[#007DFF]">
+                  DocsGPT
+                </a>
+              </h2>
+              <h2 className="font-semi-bold text-base text-chinese-black dark:text-chinese-silver">
+                {date}
+              </h2>
+            </div>
+            <div className="">
+              {queries?.map((query, index) => {
+                return (
+                  <Fragment key={index}>
+                    <ConversationBubble
+                      ref={endMessageRef}
+                      className={'mb-1 last:mb-28 md:mb-7'}
+                      key={`${index}QUESTION`}
+                      message={query.prompt}
+                      type="QUESTION"
+                      sources={query.sources}
+                    ></ConversationBubble>
 
-                  {prepResponseView(query, index)}
-                </Fragment>
-              );
-            })}
+                    {prepResponseView(query, index)}
+                  </Fragment>
+                );
+              })}
+            </div>
           </div>
         </div>
-      </div>
 
-      <div className=" flex w-11/12 flex-col items-center gap-4 pb-2 md:w-10/12 lg:w-6/12">
-        {apiKey ? (
-          <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}
-              tabIndex={1}
-              onPaste={handlePaste}
-              placeholder={t('inputPlaceholder')}
-              contentEditable
-              className={`inputbox-style max-h-24 w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap rounded-full bg-white pt-5 pb-[22px] text-base leading-tight opacity-100 focus:outline-none dark:bg-raisin-black dark:text-bright-gray`}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter' && !e.shiftKey) {
-                  e.preventDefault();
-                  handleQuestionSubmission();
-                }
-              }}
-            ></div>
-            {status === 'loading' ? (
-              <img
-                src={Spinner}
-                className="relative right-[38px] bottom-[24px] -mr-[30px] animate-spin cursor-pointer self-end bg-transparent filter dark:invert"
-              ></img>
-            ) : (
-              <div className="mx-1 cursor-pointer rounded-full p-3 text-center hover:bg-gray-3000 dark:hover:bg-dark-charcoal">
+        <div className=" flex w-11/12 flex-col items-center gap-4 pb-2 md:w-10/12 lg:w-6/12">
+          {apiKey ? (
+            <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}
+                tabIndex={1}
+                onPaste={handlePaste}
+                placeholder={t('inputPlaceholder')}
+                contentEditable
+                className={`inputbox-style max-h-24 w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap rounded-full bg-white pt-5 pb-[22px] text-base leading-tight opacity-100 focus:outline-none dark:bg-raisin-black dark:text-bright-gray`}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' && !e.shiftKey) {
+                    e.preventDefault();
+                    handleQuestionSubmission();
+                  }
+                }}
+              ></div>
+              {status === 'loading' ? (
                 <img
-                  onClick={handleQuestionSubmission}
-                  className="ml-[4px] h-6 w-6 text-white filter dark:invert"
-                  src={Send}
+                  src={Spinner}
+                  className="relative right-[38px] bottom-[24px] -mr-[30px] animate-spin cursor-pointer self-end bg-transparent filter dark:invert"
                 ></img>
-              </div>
-            )}
-          </div>
-        ) : (
-          <button
-            onClick={() => navigate('/')}
-            className="w-fit rounded-full bg-purple-30 p-4 text-white shadow-xl transition-colors duration-200 hover:bg-purple-taupe"
-          >
-            {t('sharedConv.button')}
-          </button>
-        )}
-        <span className="mb-2 hidden text-xs text-dark-charcoal dark:text-silver sm:inline">
-          {t('sharedConv.meta')}
-        </span>
+              ) : (
+                <div className="mx-1 cursor-pointer rounded-full p-3 text-center hover:bg-gray-3000 dark:hover:bg-dark-charcoal">
+                  <img
+                    onClick={handleQuestionSubmission}
+                    className="ml-[4px] h-6 w-6 text-white filter dark:invert"
+                    src={Send}
+                  ></img>
+                </div>
+              )}
+            </div>
+          ) : (
+            <button
+              onClick={() => navigate('/')}
+              className="w-fit rounded-full bg-purple-30 p-4 text-white shadow-xl transition-colors duration-200 hover:bg-purple-taupe"
+            >
+              {t('sharedConv.button')}
+            </button>
+          )}
+          <span className="mb-2 hidden text-xs text-dark-charcoal dark:text-silver sm:inline">
+            {t('sharedConv.meta')}
+          </span>
+        </div>
       </div>
-    </div>
+    </>
   );
 };