feat: update authentication handling and integrate token usage across frontend and backend

frontend/src/modals/AddToolModal.tsx

@@ -1,12 +1,14 @@
 import React, { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
 
 import userService from '../api/services/userService';
+import Spinner from '../components/Spinner';
 import { useOutsideAlerter } from '../hooks';
 import { ActiveState } from '../models/misc';
+import { selectToken } from '../preferences/preferenceSlice';
 import ConfigToolModal from './ConfigToolModal';
 import { AvailableToolType } from './types';
-import Spinner from '../components/Spinner';
 import WrapperComponent from './WrapperModal';
 
 export default function AddToolModal({
@@ -23,6 +25,7 @@ export default function AddToolModal({
   onToolAdded: (toolId: string) => void;
 }) {
   const { t } = useTranslation();
+  const token = useSelector(selectToken);
   const modalRef = useRef<HTMLDivElement>(null);
   const [availableTools, setAvailableTools] = React.useState<
     AvailableToolType[]
@@ -42,7 +45,7 @@ export default function AddToolModal({
   const getAvailableTools = () => {
     setLoading(true);
     userService
-      .getAvailableTools()
+      .getAvailableTools(token)
       .then((res) => {
         return res.json();
       })
@@ -55,14 +58,17 @@ export default function AddToolModal({
   const handleAddTool = (tool: AvailableToolType) => {
     if (Object.keys(tool.configRequirements).length === 0) {
       userService
-        .createTool({
-          name: tool.name,
-          displayName: tool.displayName,
-          description: tool.description,
-          config: {},
-          actions: tool.actions,
-          status: true,
-        })
+        .createTool(
+          {
+            name: tool.name,
+            displayName: tool.displayName,
+            description: tool.description,
+            config: {},
+            actions: tool.actions,
+            status: true,
+          },
+          token,
+        )
         .then((res) => {
           if (res.status === 200) {
             return res.json();

frontend/src/modals/ConfigToolModal.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
 
-import WrapperModal from './WrapperModal';
+import userService from '../api/services/userService';
 import Input from '../components/Input';
 import { ActiveState } from '../models/misc';
+import { selectToken } from '../preferences/preferenceSlice';
 import { AvailableToolType } from './types';
-import userService from '../api/services/userService';
+import WrapperModal from './WrapperModal';
 
 interface ConfigToolModalProps {
   modalState: ActiveState;
@@ -21,18 +23,22 @@ export default function ConfigToolModal({
   getUserTools,
 }: ConfigToolModalProps) {
   const { t } = useTranslation();
+  const token = useSelector(selectToken);
   const [authKey, setAuthKey] = React.useState<string>('');
 
   const handleAddTool = (tool: AvailableToolType) => {
     userService
-      .createTool({
-        name: tool.name,
-        displayName: tool.displayName,
-        description: tool.description,
-        config: { token: authKey },
-        actions: tool.actions,
-        status: true,
-      })
+      .createTool(
+        {
+          name: tool.name,
+          displayName: tool.displayName,
+          description: tool.description,
+          config: { token: authKey },
+          actions: tool.actions,
+          status: true,
+        },
+        token,
+      )
       .then(() => {
         setModalState('INACTIVE');
         getUserTools();

frontend/src/modals/CreateAPIKeyModal.tsx

@@ -6,7 +6,7 @@ import userService from '../api/services/userService';
 import Dropdown from '../components/Dropdown';
 import Input from '../components/Input';
 import { CreateAPIKeyModalProps, Doc } from '../models/misc';
-import { selectSourceDocs } from '../preferences/preferenceSlice';
+import { selectSourceDocs, selectToken } from '../preferences/preferenceSlice';
 import WrapperModal from './WrapperModal';
 
 const embeddingsName =
@@ -18,6 +18,7 @@ export default function CreateAPIKeyModal({
   createAPIKey,
 }: CreateAPIKeyModalProps) {
   const { t } = useTranslation();
+  const token = useSelector(selectToken);
   const docs = useSelector(selectSourceDocs);
 
   const [APIKeyName, setAPIKeyName] = React.useState<string>('');
@@ -60,7 +61,7 @@ export default function CreateAPIKeyModal({
   React.useEffect(() => {
     const handleFetchPrompts = async () => {
       try {
-        const response = await userService.getPrompts();
+        const response = await userService.getPrompts(token);
         if (!response.ok) {
           throw new Error('Failed to fetch prompts');
         }

frontend/src/modals/ShareConversationModal.tsx

@@ -1,15 +1,20 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
-import {
-  selectSourceDocs,
-  selectSelectedDocs,
-  selectChunks,
-  selectPrompt,
-} from '../preferences/preferenceSlice';
+
+import conversationService from '../api/services/conversationService';
+import Spinner from '../assets/spinner.svg';
 import Dropdown from '../components/Dropdown';
 import { Doc } from '../models/misc';
-import Spinner from '../assets/spinner.svg';
+import {
+  selectChunks,
+  selectPrompt,
+  selectSelectedDocs,
+  selectSourceDocs,
+  selectToken,
+} from '../preferences/preferenceSlice';
+import WrapperModal from './WrapperModal';
+
 const apiHost = import.meta.env.VITE_API_HOST || 'https://docsapi.arc53.com';
 const embeddingsName =
   import.meta.env.VITE_EMBEDDINGS_NAME ||
@@ -17,9 +22,6 @@ const embeddingsName =
 
 type StatusType = 'loading' | 'idle' | 'fetched' | 'failed';
 
-import conversationService from '../api/services/conversationService';
-import WrapperModal from './WrapperModal';
-
 export const ShareConversationModal = ({
   close,
   conversationId,
@@ -28,6 +30,7 @@ export const ShareConversationModal = ({
   conversationId: string;
 }) => {
   const { t } = useTranslation();
+  const token = useSelector(selectToken);
 
   const domain = window.location.origin;
 
@@ -85,7 +88,7 @@ export const ShareConversationModal = ({
       sourcePath && (payload.source = sourcePath.value);
     }
     conversationService
-      .shareConversation(isPromptable, payload)
+      .shareConversation(isPromptable, payload, token)
       .then((res) => {
         return res.json();
       })