fix: Changed the timestamp in the OSSGPT dialog to the correct format (…

…#822)

* fix: modify the timestamp format of oss-gpt

* add yarn.lock file

package.json

@@ -32,6 +32,7 @@
     "github-url-detection": "^8.1.0",
     "jquery": "^3.6.0",
     "lodash-es": "^4.17.21",
+    "moment": "^2.30.1",
     "react": "^17.0.2",
     "react-chat-widget": "^3.1.4",
     "react-dom": "^17.0.2",

src/pages/ContentScripts/features/oss-gpt/view.tsx

@@ -1,11 +1,13 @@
 import React, { useState, useEffect, useRef } from 'react';
 import $ from 'jquery';
+import moment from 'moment';
 import {
   Widget,
   addResponseMessage,
   deleteMessages,
   toggleMsgLoader,
   toggleInputDisabled,
+  renderCustomComponent,
 } from 'react-chat-widget';
 
 import { getAnswer } from './service';
@@ -23,21 +25,40 @@ interface Props {
   currentDocsName: string | null;
 }
 
+const ResponseTimeStamp: React.FC = () => {
+  return (
+    <div style={{ fontSize: '11px', marginLeft: '50px' }}>
+      {moment().format('LT')}
+    </div>
+  );
+};
+
+const UserTimeStamp: React.FC = () => {
+  return (
+    <div style={{ fontSize: '11px', textAlign: 'right', width: '100%' }}>
+      {moment().format('LT')}
+    </div>
+  );
+};
+
 const displayWelcome = (repoName: string, locale: string) => {
   addResponseMessage(
     getMessageByLocale('OSS_GPT_welcome', locale).replace('%v', repoName)
   );
+  renderCustomComponent(ResponseTimeStamp, {});
 };
 
 const displayNotAvailable = (repoName: string, locale: string) => {
   addResponseMessage(
     getMessageByLocale('OSS_GPT_notAvailable', locale).replace('%v', repoName)
   );
+  renderCustomComponent(ResponseTimeStamp, {});
 };
 
 // Due to cost reasons, backend is not available now. This part can be removed when the backend is restored.
 const backendNotAvailable = (locale: string) => {
   addResponseMessage(getMessageByLocale('OSS_GPT_errorMessage', locale));
+  renderCustomComponent(ResponseTimeStamp, {});
 };
 
 const View = ({ theme, currentRepo, currentDocsName }: Props): JSX.Element => {
@@ -132,6 +153,7 @@ const View = ({ theme, currentRepo, currentDocsName }: Props): JSX.Element => {
       ).replace('%v', currentRepo);
 
   const handleNewUserMessage = async (newMessage: string) => {
+    renderCustomComponent(UserTimeStamp, {});
     toggleMsgLoader();
     toggleInputDisabled();
 
@@ -141,6 +163,8 @@ const View = ({ theme, currentRepo, currentDocsName }: Props): JSX.Element => {
         backendNotAvailable(options.locale);
       } else {
         addResponseMessage(answer);
+        renderCustomComponent(ResponseTimeStamp, {});
+
         setHistory([newMessage, answer]); // update history
       }
     } else {
@@ -160,6 +184,7 @@ const View = ({ theme, currentRepo, currentDocsName }: Props): JSX.Element => {
         handleNewUserMessage={handleNewUserMessage}
         showBadge={false}
         profileAvatar={chrome.runtime.getURL('main.png')}
+        showTimeStamp={false}
       />
     </div>
   );

yarn.lock

@@ -4162,6 +4162,11 @@ mkdirp@^1.0.4:
   resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
+moment@^2.30.1:
+  version "2.30.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.30.1.tgz#f8c91c07b7a786e30c59926df530b4eac96974ae"
+  integrity sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==
+
 mri@^1.2.0:
   version "1.2.0"
   resolved "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b"