updated logs and analytics

frontend/src/Hero.tsx

@@ -37,7 +37,7 @@ export default function Hero({
               <Fragment key={key}>
                 <button
                   onClick={() => handleQuestion({ question: demo.query })}
-                  className="w-full rounded-full border-2 border-silver px-6 py-4 text-left hover:border-gray-4000 dark:hover:border-gray-3000 xl:min-w-[24vw]"
+                  className="w-full rounded-full border border-silver px-6 py-4 text-left hover:border-gray-4000 dark:hover:border-gray-3000 xl:min-w-[24vw]"
                 >
                   <p className="mb-1 font-semibold text-black dark:text-silver">
                     {demo.header}

frontend/src/Navigation.tsx

@@ -119,6 +119,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
       .delete(id, {})
       .then(() => {
         fetchConversations();
+        resetConversation();
       })
       .catch((error) => console.error(error));
   };
@@ -155,6 +156,15 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
       });
   };
 
+  const resetConversation = () => {
+    dispatch(setConversation([]));
+    dispatch(
+      updateConversationId({
+        query: { conversationId: null },
+      }),
+    );
+  };
+
   async function updateConversationName(updatedConversation: {
     name: string;
     id: string;
@@ -235,14 +245,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
         </div>
         <NavLink
           to={'/'}
-          onClick={() => {
-            dispatch(setConversation([]));
-            dispatch(
-              updateConversationId({
-                query: { conversationId: null },
-              }),
-            );
-          }}
+          onClick={resetConversation}
           className={({ isActive }) =>
             `${
               isActive ? 'bg-gray-3000 dark:bg-transparent' : ''
@@ -310,6 +313,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                   isActive ? 'bg-gray-3000 dark:bg-transparent' : ''
                 }`
               }
+              onClick={resetConversation}
             >
               <img
                 src={SettingGear}
@@ -329,6 +333,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                   isActive ? 'bg-gray-3000 dark:bg-[#28292E]' : ''
                 }`
               }
+              onClick={resetConversation}
             >
               <img
                 src={Info}

frontend/src/conversation/Conversation.tsx

@@ -54,10 +54,6 @@ export default function Conversation() {
     }
   }, []);
 
-  useEffect(() => {
-    fetchStream.current && fetchStream.current.abort();
-  }, [conversationId]);
-
   useEffect(() => {
     if (queries.length) {
       queries[queries.length - 1].error && setLastQueryReturnedErr(true);

frontend/src/conversation/ConversationBubble.tsx

@@ -4,6 +4,9 @@ import { useSelector } from 'react-redux';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+import rehypeKatex from 'rehype-katex';
+import 'katex/dist/katex.min.css';
 
 import Alert from '../assets/alert.svg';
 import DocsGPT3 from '../assets/cute_docsgpt3.svg';
@@ -62,6 +65,21 @@ const ConversationBubble = forwardRef<
       </div>
     );
   } else {
+    const preprocessLaTeX = (content: string) => {
+      // Replace block-level LaTeX delimiters \[ \] with $$ $$
+      const blockProcessedContent = content.replace(
+        /\\\[(.*?)\\\]/gs,
+        (_, equation) => `$$${equation}$$`,
+      );
+
+      // Replace inline LaTeX delimiters \( \) with $ $
+      const inlineProcessedContent = blockProcessedContent.replace(
+        /\\\((.*?)\\\)/gs,
+        (_, equation) => `$${equation}$`,
+      );
+
+      return inlineProcessedContent;
+    };
     bubble = (
       <div
         ref={ref}
@@ -225,7 +243,8 @@ const ConversationBubble = forwardRef<
             )}
             <ReactMarkdown
               className="whitespace-pre-wrap break-normal leading-normal"
-              remarkPlugins={[remarkGfm]}
+              remarkPlugins={[remarkGfm, remarkMath]}
+              rehypePlugins={[rehypeKatex]}
               components={{
                 code(props) {
                   const { children, className, node, ref, ...rest } = props;
@@ -308,7 +327,7 @@ const ConversationBubble = forwardRef<
                 },
               }}
             >
-              {message}
+              {preprocessLaTeX(message)}
             </ReactMarkdown>
           </div>
         </div>

frontend/src/conversation/conversationSlice.ts

@@ -151,6 +151,7 @@ export const conversationSlice = createSlice({
       state,
       action: PayloadAction<{ index: number; query: Partial<Query> }>,
     ) {
+      if (state.status === 'idle') return;
       const { index, query } = action.payload;
       if (query.response != undefined) {
         state.queries[index].response =
@@ -167,6 +168,7 @@ export const conversationSlice = createSlice({
       action: PayloadAction<{ query: Partial<Query> }>,
     ) {
       state.conversationId = action.payload.query.conversationId ?? null;
+      state.status = 'idle';
     },
     updateStreamingSource(
       state,

frontend/src/index.css

@@ -47,6 +47,28 @@ body.dark {
   }
 }
 
+@layer components {
+  .table-default {
+    @apply block w-max table-auto content-center justify-center rounded-xl border border-silver dark:border-silver/40 text-center dark:text-bright-gray;
+  }
+
+  .table-default th {
+    @apply border-r border-silver dark:border-silver/40 p-4 w-[244px];
+  }
+
+  .table-default th:last-child {
+    @apply w-[auto] border-r-0;
+  }
+
+  .table-default td {
+    @apply border-r border-t border-silver dark:border-silver/40 px-4 py-2;
+  }
+
+  .table-default td:last-child {
+    @apply border-r-0;
+  }
+}
+
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 
 /* Document

frontend/src/locale/en.json

@@ -54,14 +54,16 @@
       "name": "Document Name",
       "date": "Vector Date",
       "type": "Type",
-      "tokenUsage": "Token Usage"
+      "tokenUsage": "Token Usage",
+      "noData": "No existing Documents"
     },
     "apiKeys": {
       "label": "Chatbots",
       "name": "Name",
       "key": "API Key",
       "sourceDoc": "Source Document",
-      "createNew": "Create New"
+      "createNew": "Create New",
+      "noData": "No existing Chatbots"
     },
     "analytics": {
       "label": "Analytics"
@@ -83,6 +85,7 @@
       "train": "Train",
       "link": "Link",
       "urlLink": "URL Link",
+      "repoUrl": "Repository URL",
       "reddit": {
         "id": "Client ID",
         "secret": "Client Secret",

frontend/src/locale/es.json

@@ -54,14 +54,16 @@
       "name": "Nombre del Documento",
       "date": "Fecha Vector",
       "type": "Tipo",
-      "tokenUsage": "Uso de Tokens"
+      "tokenUsage": "Uso de Tokens",
+      "noData": "No hay documentos existentes"
     },
     "apiKeys": {
       "label": "Chatbots",
       "name": "Nombre",
       "key": "Clave de API",
       "sourceDoc": "Documento Fuente",
-      "createNew": "Crear Nuevo"
+      "createNew": "Crear Nuevo",
+      "noData": "No hay chatbots existentes"
     },
     "analytics": {
       "label": "Analítica"
@@ -83,6 +85,7 @@
       "train": "Entrenar",
       "link": "Enlace",
       "urlLink": "Enlace URL",
+      "repoUrl": "URL del Repositorio",
       "reddit": {
         "id": "ID de Cliente",
         "secret": "Secreto de Cliente",

frontend/src/locale/jp.json

@@ -54,14 +54,16 @@
       "name": "ドキュメント名",
       "date": "ベクトル日付",
       "type": "タイプ",
-      "tokenUsage": "トークン使用量"
+      "tokenUsage": "トークン使用量",
+      "noData": "既存のドキュメントはありません"
     },
     "apiKeys": {
       "label": "チャットボット",
       "name": "名前",
       "key": "APIキー",
       "sourceDoc": "ソースドキュメント",
-      "createNew": "新規作成"
+      "createNew": "新規作成",
+      "noData": "既存のチャットボットはありません"
     },
     "analytics": {
       "label": "分析"
@@ -83,6 +85,7 @@
       "train": "トレーニング",
       "link": "リンク",
       "urlLink": "URLリンク",
+      "repoUrl": "リポジトリURL",
       "reddit": {
         "id": "クライアントID",
         "secret": "クライアントシークレット",

frontend/src/locale/zh.json

@@ -54,14 +54,16 @@
       "name": "文件名称",
       "date": "向量日期",
       "type": "类型",
-      "tokenUsage": "令牌使用"
+      "tokenUsage": "令牌使用",
+      "noData": "没有现有的文档"
     },
     "apiKeys": {
       "label": "聊天机器人",
       "name": "名称",
       "key": "API 密钥",
       "sourceDoc": "源文档",
-      "createNew": "创建新的"
+      "createNew": "创建新的",
+      "noData": "没有现有的聊天机器人"
     },
     "analytics": {
       "label": "分析"
@@ -83,6 +85,7 @@
       "train": "训练",
       "link": "链接",
       "urlLink": "URL 链接",
+      "repoUrl": "存储库 URL",
       "reddit": {
         "id": "客户端 ID",
         "secret": "客户端密钥",

frontend/src/settings/APIKeys.tsx

@@ -1,23 +1,20 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import userService from '../api/services/userService';
 import Trash from '../assets/trash.svg';
 import CreateAPIKeyModal from '../modals/CreateAPIKeyModal';
 import SaveAPIKeyModal from '../modals/SaveAPIKeyModal';
-import SkeletonLoader from '../utils/loader';
 import { APIKeyData } from './types';
 
 export default function APIKeys() {
   const { t } = useTranslation();
-  const [isCreateModalOpen, setCreateModal] = useState(false);
-  const [isSaveKeyModalOpen, setSaveKeyModal] = useState(false);
-  const [newKey, setNewKey] = useState('');
-  const [apiKeys, setApiKeys] = useState<APIKeyData[]>([]);
-  const [loading, setLoading] = useState(true);
+  const [isCreateModalOpen, setCreateModal] = React.useState(false);
+  const [isSaveKeyModalOpen, setSaveKeyModal] = React.useState(false);
+  const [newKey, setNewKey] = React.useState('');
+  const [apiKeys, setApiKeys] = React.useState<APIKeyData[]>([]);
 
   const handleFetchKeys = async () => {
-    setLoading(true);
     try {
       const response = await userService.getAPIKeys();
       if (!response.ok) {
@@ -27,8 +24,6 @@ export default function APIKeys() {
       setApiKeys(apiKeys);
     } catch (error) {
       console.log(error);
-    } finally {
-      setLoading(false);
     }
   };
 
@@ -77,10 +72,9 @@ export default function APIKeys() {
       });
   };
 
-  useEffect(() => {
+  React.useEffect(() => {
     handleFetchKeys();
   }, []);
-
   return (
     <div className="mt-8">
       <div className="flex flex-col max-w-[876px]">
@@ -104,51 +98,45 @@ export default function APIKeys() {
             close={() => setSaveKeyModal(false)}
           />
         )}
-
-        {loading ? (
-          <SkeletonLoader count={5} />
-        ) : (
-          <div className="mt-[27px] w-full">
-            <div className="w-full overflow-x-auto">
-              <table className="block w-max table-auto content-center justify-center rounded-xl border text-center dark:border-chinese-silver dark:text-bright-gray">
-                <thead>
+        <div className="mt-[27px] w-full">
+          <div className="w-full overflow-x-auto">
+            <table className="table-default">
+              <thead>
+                <tr>
+                  <th>{t('settings.apiKeys.name')}</th>
+                  <th>{t('settings.apiKeys.sourceDoc')}</th>
+                  <th>{t('settings.apiKeys.key')}</th>
+                  <th></th>
+                </tr>
+              </thead>
+              <tbody>
+                {!apiKeys?.length && (
                   <tr>
-                    <th className="w-[244px] border-r p-4">
-                      {t('settings.apiKeys.name')}
-                    </th>
-                    <th className="w-[244px] border-r px-4 py-2">
-                      {t('settings.apiKeys.sourceDoc')}
-                    </th>
-                    <th className="w-[244px] border-r px-4 py-2">
-                      {t('settings.apiKeys.key')}
-                    </th>
-                    <th className="px-4 py-2"></th>
+                    <td colSpan={4} className="!p-4">
+                      {t('settings.apiKeys.noData')}
+                    </td>
                   </tr>
-                </thead>
-                <tbody>
-                  {apiKeys?.map((element, index) => (
-                    <tr key={index}>
-                      <td className="border-r border-t p-4">{element.name}</td>
-                      <td className="border-r border-t p-4">
-                        {element.source}
-                      </td>
-                      <td className="border-r border-t p-4">{element.key}</td>
-                      <td className="border-t p-4">
-                        <img
-                          src={Trash}
-                          alt="Delete"
-                          className="h-4 w-4 cursor-pointer hover:opacity-50"
-                          id={`img-${index}`}
-                          onClick={() => handleDeleteKey(element.id)}
-                        />
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
+                )}
+                {apiKeys?.map((element, index) => (
+                  <tr key={index}>
+                    <td>{element.name}</td>
+                    <td>{element.source}</td>
+                    <td>{element.key}</td>
+                    <td>
+                      <img
+                        src={Trash}
+                        alt="Delete"
+                        className="h-4 w-4 cursor-pointer hover:opacity-50"
+                        id={`img-${index}`}
+                        onClick={() => handleDeleteKey(element.id)}
+                      />
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
           </div>
-        )}
+        </div>
       </div>
     </div>
   );

frontend/src/settings/Documents.tsx

@@ -1,7 +1,7 @@
-import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
+
 import userService from '../api/services/userService';
 import SyncIcon from '../assets/sync.svg';
 import Trash from '../assets/trash.svg';
@@ -9,8 +9,8 @@ import DropdownMenu from '../components/DropdownMenu';
 import { Doc, DocumentsProps } from '../models/misc';
 import { getDocs } from '../preferences/preferenceApi';
 import { setSourceDocs } from '../preferences/preferenceSlice';
-import SkeletonLoader from '../utils/loader';
 
+// Utility function to format numbers
 const formatTokens = (tokens: number): string => {
   const roundToTwoDecimals = (num: number): string => {
     return (Math.round((num + Number.EPSILON) * 100) / 100).toString();
@@ -33,9 +33,6 @@ const Documents: React.FC<DocumentsProps> = ({
 }) => {
   const { t } = useTranslation();
   const dispatch = useDispatch();
-
-  const [loading, setLoading] = useState(false);
-
   const syncOptions = [
     { label: 'Never', value: 'never' },
     { label: 'Daily', value: 'daily' },
@@ -44,7 +41,6 @@ const Documents: React.FC<DocumentsProps> = ({
   ];
 
   const handleManageSync = (doc: Doc, sync_frequency: string) => {
-    setLoading(true);
     userService
       .manageSync({ source_id: doc.id, sync_frequency })
       .then(() => {
@@ -53,96 +49,81 @@ const Documents: React.FC<DocumentsProps> = ({
       .then((data) => {
         dispatch(setSourceDocs(data));
       })
-      .catch((error) => console.error(error))
-      .finally(() => setLoading(false));
+      .catch((error) => console.error(error));
   };
-
   return (
     <div className="mt-8">
-      {loading ? (
-        <SkeletonLoader count={4} />
-      ) : (
-        <div className="flex flex-col relative">
-          <div className="z-10 w-full overflow-x-auto">
-            <table className="block w-max table-auto content-center justify-center rounded-xl border text-center dark:border-chinese-silver dark:text-bright-gray">
-              <thead>
+      <div className="flex flex-col relative">
+        <div className="z-10 w-full overflow-x-auto">
+          <table className="table-default">
+            <thead>
+              <tr>
+                <th>{t('settings.documents.name')}</th>
+                <th>{t('settings.documents.date')}</th>
+                <th>{t('settings.documents.tokenUsage')}</th>
+                <th>{t('settings.documents.type')}</th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody>
+              {!documents?.length && (
                 <tr>
-                  <th className="border-r p-4 md:w-[244px]">
-                    {t('settings.documents.name')}
-                  </th>
-                  <th className="w-[244px] border-r px-4 py-2">
-                    {t('settings.documents.date')}
-                  </th>
-                  <th className="w-[244px] border-r px-4 py-2">
-                    {t('settings.documents.tokenUsage')}
-                  </th>
-                  <th className="w-[244px] border-r px-4 py-2">
-                    {t('settings.documents.type')}
-                  </th>
-                  <th className="px-4 py-2"></th>
+                  <td colSpan={5} className="!p-4">
+                    {t('settings.documents.noData')}
+                  </td>
                 </tr>
-              </thead>
-              <tbody>
-                {documents &&
-                  documents.map((document, index) => (
-                    <tr key={index}>
-                      <td className="border-r border-t px-4 py-2">
-                        {document.name}
-                      </td>
-                      <td className="border-r border-t px-4 py-2">
-                        {document.date}
-                      </td>
-                      <td className="border-r border-t px-4 py-2">
-                        {document.tokens ? formatTokens(+document.tokens) : ''}
-                      </td>
-                      <td className="border-r border-t px-4 py-2">
-                        {document.type === 'remote' ? 'Pre-loaded' : 'Private'}
-                      </td>
-                      <td className="border-t px-4 py-2">
-                        <div className="flex flex-row items-center">
-                          {document.type !== 'remote' && (
-                            <img
-                              src={Trash}
-                              alt="Delete"
-                              className="h-4 w-4 cursor-pointer hover:opacity-50"
-                              id={`img-${index}`}
-                              onClick={(event) => {
-                                event.stopPropagation();
-                                setLoading(true);
-                                handleDeleteDocument(index, document);
-                                setLoading(false);
+              )}
+              {documents &&
+                documents.map((document, index) => (
+                  <tr key={index}>
+                    <td>{document.name}</td>
+                    <td>{document.date}</td>
+                    <td>
+                      {document.tokens ? formatTokens(+document.tokens) : ''}
+                    </td>
+                    <td>
+                      {document.type === 'remote' ? 'Pre-loaded' : 'Private'}
+                    </td>
+                    <td>
+                      <div className="flex flex-row items-center">
+                        {document.type !== 'remote' && (
+                          <img
+                            src={Trash}
+                            alt="Delete"
+                            className="h-4 w-4 cursor-pointer hover:opacity-50"
+                            id={`img-${index}`}
+                            onClick={(event) => {
+                              event.stopPropagation();
+                              handleDeleteDocument(index, document);
+                            }}
+                          />
+                        )}
+                        {document.syncFrequency && (
+                          <div className="ml-2">
+                            <DropdownMenu
+                              name="Sync"
+                              options={syncOptions}
+                              onSelect={(value: string) => {
+                                handleManageSync(document, value);
                               }}
+                              defaultValue={document.syncFrequency}
+                              icon={SyncIcon}
                             />
-                          )}
-                          {document.syncFrequency && (
-                            <div className="ml-2">
-                              <DropdownMenu
-                                name="Sync"
-                                options={syncOptions}
-                                onSelect={(value: string) => {
-                                  handleManageSync(document, value);
-                                }}
-                                defaultValue={document.syncFrequency}
-                                icon={SyncIcon}
-                              />
-                            </div>
-                          )}
-                        </div>
-                      </td>
-                    </tr>
-                  ))}
-              </tbody>
-            </table>
-          </div>
+                          </div>
+                        )}
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+            </tbody>
+          </table>
         </div>
-      )}
+      </div>
     </div>
   );
 };
-
 Documents.propTypes = {
   documents: PropTypes.array.isRequired,
   handleDeleteDocument: PropTypes.func.isRequired,
 };
-
 export default Documents;

frontend/src/upload/Upload.tsx

@@ -24,6 +24,7 @@ function Upload({
   const [docName, setDocName] = useState('');
   const [urlName, setUrlName] = useState('');
   const [url, setUrl] = useState('');
+  const [repoUrl, setRepoUrl] = useState(''); // P3f93
   const [redditData, setRedditData] = useState({
     client_id: '',
     client_secret: '',
@@ -48,6 +49,7 @@ function Upload({
     // { label: 'Sitemap', value: 'sitemap' },
     { label: 'Link', value: 'url' },
     { label: 'Reddit', value: 'reddit' },
+    { label: 'GitHub', value: 'github' }, // P3f93
   ];
 
   const [urlType, setUrlType] = useState<{ label: string; value: string }>({
@@ -238,6 +240,9 @@ function Upload({
       formData.set('name', 'other');
       formData.set('data', JSON.stringify(redditData));
     }
+    if (urlType.value === 'github') {
+      formData.append('repo_url', repoUrl); // Pdeac
+    }
     const apiHost = import.meta.env.VITE_API_HOST;
     const xhr = new XMLHttpRequest();
     xhr.upload.addEventListener('progress', (event) => {
@@ -376,7 +381,7 @@ function Upload({
               size="w-full"
               rounded="3xl"
             />
-            {urlType.label !== 'Reddit' ? (
+            {urlType.label !== 'Reddit' && urlType.label !== 'GitHub' ? (
               <>
                 <Input
                   placeholder={`Enter ${t('modals.uploadDoc.name')}`}
@@ -403,6 +408,33 @@ function Upload({
                   </span>
                 </div>
               </>
+            ) : urlType.label === 'GitHub' ? ( // P3f93
+              <>
+                <Input
+                  placeholder={`Enter ${t('modals.uploadDoc.name')}`}
+                  type="text"
+                  value={urlName}
+                  onChange={(e) => setUrlName(e.target.value)}
+                  borderVariant="thin"
+                ></Input>
+                <div className="relative bottom-12 left-2 mt-[-20px]">
+                  <span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
+                    {t('modals.uploadDoc.name')}
+                  </span>
+                </div>
+                <Input
+                  placeholder={t('modals.uploadDoc.repoUrl')}
+                  type="text"
+                  value={repoUrl}
+                  onChange={(e) => setRepoUrl(e.target.value)}
+                  borderVariant="thin"
+                ></Input>
+                <div className="relative bottom-12 left-2 mt-[-20px]">
+                  <span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
+                    {t('modals.uploadDoc.repoUrl')}
+                  </span>
+                </div>
+              </>
             ) : (
               <div className="flex flex-col gap-1 mt-2">
                 <div>