enhancement: reusable api client setup + replaced in settings, conversation

2025-11-30 09:03:15 +00:00 · 2024-07-24 21:33:36 +05:30
parent 56a16b862a
commit 7c6532f145
15 changed files with 522 additions and 432 deletions
--- a/frontend/src/api/client.ts
+++ b/frontend/src/api/client.ts
@@ -0,0 +1,69 @@
+const baseURL = import.meta.env.VITE_API_HOST || 'https://docsapi.arc53.com';
+
+const defaultHeaders = {
+  'Content-Type': 'application/json',
+};
+
+const apiClient = {
+  get: (url: string, headers = {}, signal?: AbortSignal): Promise<any> =>
+    fetch(`${baseURL}${url}`, {
+      method: 'GET',
+      headers: {
+        ...defaultHeaders,
+        ...headers,
+      },
+      signal,
+    }).then((response) => {
+      return response;
+    }),
+
+  post: (
+    url: string,
+    data: any,
+    headers = {},
+    signal?: AbortSignal,
+  ): Promise<any> =>
+    fetch(`${baseURL}${url}`, {
+      method: 'POST',
+      headers: {
+        ...defaultHeaders,
+        ...headers,
+      },
+      body: JSON.stringify(data),
+      signal,
+    }).then((response) => {
+      return response;
+    }),
+
+  put: (
+    url: string,
+    data: any,
+    headers = {},
+    signal?: AbortSignal,
+  ): Promise<any> =>
+    fetch(`${baseURL}${url}`, {
+      method: 'PUT',
+      headers: {
+        ...defaultHeaders,
+        ...headers,
+      },
+      body: JSON.stringify(data),
+      signal,
+    }).then((response) => {
+      return response;
+    }),
+
+  delete: (url: string, headers = {}, signal?: AbortSignal): Promise<any> =>
+    fetch(`${baseURL}${url}`, {
+      method: 'DELETE',
+      headers: {
+        ...defaultHeaders,
+        ...headers,
+      },
+      signal,
+    }).then((response) => {
+      return response;
+    }),
+};
+
+export default apiClient;
--- a/frontend/src/api/endpoints.ts
+++ b/frontend/src/api/endpoints.ts
@@ -0,0 +1,23 @@
+const endpoints = {
+  USER: {
+    API_KEYS: '/api/get_api_keys',
+    CREATE_API_KEY: '/api/create_api_key',
+    DELETE_API_KEY: '/api/delete_api_key',
+    PROMPTS: '/api/get_prompts',
+    CREATE_PROMPT: '/api/create_prompt',
+    DELETE_PROMPT: '/api/delete_prompt',
+    UPDATE_PROMPT: '/api/update_prompt',
+    SINGLE_PROMPT: (id: string) => `/api/get_single_prompt?id=${id}`,
+    DELETE_PATH: (docPath: string) => `/api/delete_old?path=${docPath}`,
+  },
+  CONVERSATION: {
+    ANSWER: '/api/answer',
+    ANSWER_STREAMING: '/stream',
+    SEARCH: '/api/search',
+    FEEDBACK: '/api/feedback',
+    SHARED_CONVERSATION: (identifier: string) =>
+      `/api/shared_conversation/${identifier}`,
+  },
+};
+
+export default endpoints;
--- a/frontend/src/api/services/conversationService.ts
+++ b/frontend/src/api/services/conversationService.ts
@@ -0,0 +1,17 @@
+import apiClient from '../client';
+import endpoints from '../endpoints';
+
+const conversationService = {
+  answer: (data: any, signal: AbortSignal): Promise<any> =>
+    apiClient.post(endpoints.CONVERSATION.ANSWER, data, {}, signal),
+  answerStream: (data: any, signal: AbortSignal): Promise<any> =>
+    apiClient.post(endpoints.CONVERSATION.ANSWER_STREAMING, data, {}, signal),
+  search: (data: any): Promise<any> =>
+    apiClient.post(endpoints.CONVERSATION.SEARCH, data),
+  feedback: (data: any): Promise<any> =>
+    apiClient.post(endpoints.CONVERSATION.FEEDBACK, data),
+  getSharedConversation: (identifier: string): Promise<any> =>
+    apiClient.get(endpoints.CONVERSATION.SHARED_CONVERSATION(identifier)),
+};
+
+export default conversationService;
--- a/frontend/src/api/services/userService.ts
+++ b/frontend/src/api/services/userService.ts
@@ -0,0 +1,23 @@
+import apiClient from '../client';
+import endpoints from '../endpoints';
+
+const userService = {
+  getAPIKeys: (): Promise<any> => apiClient.get(endpoints.USER.API_KEYS),
+  createAPIKey: (data: any): Promise<any> =>
+    apiClient.post(endpoints.USER.CREATE_API_KEY, data),
+  deleteAPIKey: (data: any): Promise<any> =>
+    apiClient.post(endpoints.USER.DELETE_API_KEY, data),
+  getPrompts: (): Promise<any> => apiClient.get(endpoints.USER.PROMPTS),
+  createPrompt: (data: any): Promise<any> =>
+    apiClient.post(endpoints.USER.CREATE_PROMPT, data),
+  deletePrompt: (data: any): Promise<any> =>
+    apiClient.post(endpoints.USER.DELETE_PROMPT, data),
+  updatePrompt: (data: any): Promise<any> =>
+    apiClient.post(endpoints.USER.UPDATE_PROMPT, data),
+  getSinglePrompt: (id: string): Promise<any> =>
+    apiClient.get(endpoints.USER.SINGLE_PROMPT(id)),
+  deletePath: (docPath: string): Promise<any> =>
+    apiClient.get(endpoints.USER.DELETE_PATH(docPath)),
+};
+
+export default userService;
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -1,9 +1,22 @@
 import { Fragment, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
-import { useDarkTheme } from '../hooks';
+
+import ArrowDown from '../assets/arrow-down.svg';
+import Send from '../assets/send.svg';
+import SendDark from '../assets/send_dark.svg';
+import ShareIcon from '../assets/share.svg';
+import SpinnerDark from '../assets/spinner-dark.svg';
+import Spinner from '../assets/spinner.svg';
+import RetryIcon from '../components/RetryIcon';
 import Hero from '../Hero';
+import { useDarkTheme } from '../hooks';
+import { ShareConversationModal } from '../modals/ShareConversationModal';
+import { selectConversationId } from '../preferences/preferenceSlice';
 import { AppDispatch } from '../store';
 import ConversationBubble from './ConversationBubble';
+import { handleSendFeedback } from './conversationHandlers';
+import { FEEDBACK, Query } from './conversationModels';
 import {
  addQuery,
  fetchAnswer,
@@ -11,18 +24,6 @@ import {
  selectStatus,
  updateQuery,
 } from './conversationSlice';
-import { selectConversationId } from '../preferences/preferenceSlice';
-import Send from './../assets/send.svg';
-import SendDark from './../assets/send_dark.svg';
-import Spinner from './../assets/spinner.svg';
-import SpinnerDark from './../assets/spinner-dark.svg';
-import { FEEDBACK, Query } from './conversationModels';
-import { sendFeedback } from './conversationApi';
-import { useTranslation } from 'react-i18next';
-import ArrowDown from './../assets/arrow-down.svg';
-import RetryIcon from '../components/RetryIcon';
-import ShareIcon from '../assets/share.svg';
-import { ShareConversationModal } from '../modals/ShareConversationModal';

 export default function Conversation() {
  const queries = useSelector(selectQueries);
@@ -112,7 +113,7 @@ export default function Conversation() {
  const handleFeedback = (query: Query, feedback: FEEDBACK, index: number) => {
    const prevFeedback = query.feedback;
    dispatch(updateQuery({ index, query: { feedback } }));
-    sendFeedback(query.prompt, query.response!, feedback).catch(() =>
+    handleSendFeedback(query.prompt, query.response!, feedback).catch(() =>
      dispatch(updateQuery({ index, query: { feedback: prevFeedback } })),
    );
  };
--- a/frontend/src/conversation/SharedConversation.tsx
+++ b/frontend/src/conversation/SharedConversation.tsx
@@ -1,15 +1,15 @@
-import { useState, useEffect } from 'react';
-import { useParams } from 'react-router-dom';
-import { useNavigate } from 'react-router-dom';
-import { Query } from './conversationModels';
+import { Fragment, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useNavigate, useParams } from 'react-router-dom';
+
+import conversationService from '../api/services/conversationService';
 import ConversationBubble from './ConversationBubble';
-import { Fragment } from 'react';
-const apiHost = import.meta.env.VITE_API_HOST || 'https://docsapi.arc53.com';
-const SharedConversation = () => {
+import { Query } from './conversationModels';
+
+export default function SharedConversation() {
  const params = useParams();
  const navigate = useNavigate();
-  const { identifier } = params; //identifier is a uuid, not conversationId
+  const { identifier } = params;
  const [queries, setQueries] = useState<Query[]>([]);
  const [title, setTitle] = useState('');
  const [date, setDate] = useState('');
@@ -47,7 +47,8 @@ const SharedConversation = () => {
    return formattedDate;
  }
  const fetchQueris = () => {
-    fetch(`${apiHost}/api/shared_conversation/${identifier}`)
+    conversationService
+      .getSharedConversation(identifier || '')
      .then((res) => {
        if (res.status === 404 || res.status === 400) navigate('/pagenotfound');
        return res.json();
@@ -139,6 +140,4 @@ const SharedConversation = () => {
      </div>
    </div>
  );
-};
-
-export default SharedConversation;
+}
--- a/frontend/src/conversation/conversationHandlers.ts
+++ b/frontend/src/conversation/conversationHandlers.ts
@@ -1,11 +1,9 @@
-import { Answer, FEEDBACK } from './conversationModels';
+import conversationService from '../api/services/conversationService';
 import { Doc } from '../preferences/preferenceApi';
-
-const apiHost = import.meta.env.VITE_API_HOST || 'https://docsapi.arc53.com';
+import { Answer, FEEDBACK } from './conversationModels';

 function getDocPath(selectedDocs: Doc | null): string {
  let docPath = 'default';
-
  if (selectedDocs) {
    let namePath = selectedDocs.name;
    if (selectedDocs.language === namePath) {
@@ -27,10 +25,10 @@ function getDocPath(selectedDocs: Doc | null): string {
      docPath = selectedDocs.docLink;
    }
  }
-
  return docPath;
 }
-export function fetchAnswerApi(
+
+export function handleFetchAnswer(
  question: string,
  signal: AbortSignal,
  selectedDocs: Doc | null,
@@ -57,27 +55,22 @@ export function fetchAnswerApi(
    }
 > {
  const docPath = getDocPath(selectedDocs);
-  //in history array remove all keys except prompt and response
  history = history.map((item) => {
    return { prompt: item.prompt, response: item.response };
  });
-
-  return fetch(apiHost + '/api/answer', {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify({
-      question: question,
-      history: history,
-      active_docs: docPath,
-      conversation_id: conversationId,
-      prompt_id: promptId,
-      chunks: chunks,
-      token_limit: token_limit,
-    }),
-    signal,
-  })
+  return conversationService
+    .answer(
+      {
+        question: question,
+        history: history,
+        active_docs: docPath,
+        conversation_id: conversationId,
+        prompt_id: promptId,
+        chunks: chunks,
+        token_limit: token_limit,
+      },
+      signal,
+    )
    .then((response) => {
      if (response.ok) {
        return response.json();
@@ -97,7 +90,7 @@ export function fetchAnswerApi(
    });
 }

-export function fetchAnswerSteaming(
+export function handleFetchAnswerSteaming(
  question: string,
  signal: AbortSignal,
  selectedDocs: Doc | null,
@@ -109,29 +102,23 @@ export function fetchAnswerSteaming(
  onEvent: (event: MessageEvent) => void,
 ): Promise<Answer> {
  const docPath = getDocPath(selectedDocs);
-
  history = history.map((item) => {
    return { prompt: item.prompt, response: item.response };
  });
-
  return new Promise<Answer>((resolve, reject) => {
-    const body = {
-      question: question,
-      active_docs: docPath,
-      history: JSON.stringify(history),
-      conversation_id: conversationId,
-      prompt_id: promptId,
-      chunks: chunks,
-      token_limit: token_limit,
-    };
-    fetch(apiHost + '/stream', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(body),
-      signal,
-    })
+    conversationService
+      .answerStream(
+        {
+          question: question,
+          active_docs: docPath,
+          history: JSON.stringify(history),
+          conversation_id: conversationId,
+          prompt_id: promptId,
+          chunks: chunks,
+          token_limit: token_limit,
+        },
+        signal,
+      )
      .then((response) => {
        if (!response.body) throw Error('No response body');

@@ -179,7 +166,8 @@ export function fetchAnswerSteaming(
      });
  });
 }
-export function searchEndpoint(
+
+export function handleSearch(
  question: string,
  selectedDocs: Doc | null,
  conversation_id: string | null,
@@ -188,48 +176,38 @@ export function searchEndpoint(
  token_limit: number,
 ) {
  const docPath = getDocPath(selectedDocs);
-
-  const body = {
-    question: question,
-    active_docs: docPath,
-    conversation_id,
-    history,
-    chunks: chunks,
-    token_limit: token_limit,
-  };
-  return fetch(`${apiHost}/api/search`, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify(body),
-  })
+  return conversationService
+    .search({
+      question: question,
+      active_docs: docPath,
+      conversation_id,
+      history,
+      chunks: chunks,
+      token_limit: token_limit,
+    })
    .then((response) => response.json())
    .then((data) => {
      return data;
    })
    .catch((err) => console.log(err));
 }
-export function sendFeedback(
+
+export function handleSendFeedback(
  prompt: string,
  response: string,
  feedback: FEEDBACK,
 ) {
-  return fetch(`${apiHost}/api/feedback`, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify({
+  return conversationService
+    .feedback({
      question: prompt,
      answer: response,
      feedback: feedback,
-    }),
-  }).then((response) => {
-    if (response.ok) {
-      return Promise.resolve();
-    } else {
-      return Promise.reject();
-    }
-  });
+    })
+    .then((response) => {
+      if (response.ok) {
+        return Promise.resolve();
+      } else {
+        return Promise.reject();
+      }
+    });
 }
--- a/frontend/src/conversation/conversationSlice.ts
+++ b/frontend/src/conversation/conversationSlice.ts
@@ -1,10 +1,14 @@
 import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit';
-import store from '../store';
-import { fetchAnswerApi, fetchAnswerSteaming } from './conversationApi';
-import { searchEndpoint } from './conversationApi';
-import { Answer, ConversationState, Query, Status } from './conversationModels';
+
 import { getConversations } from '../preferences/preferenceApi';
 import { setConversations } from '../preferences/preferenceSlice';
+import store from '../store';
+import {
+  handleFetchAnswer,
+  handleFetchAnswerSteaming,
+  handleSearch,
+} from './conversationHandlers';
+import { Answer, ConversationState, Query, Status } from './conversationModels';

 const initialState: ConversationState = {
  queries: [],
@@ -20,7 +24,7 @@ export const fetchAnswer = createAsyncThunk<Answer, { question: string }>(
    const state = getState() as RootState;
    if (state.preference) {
      if (API_STREAMING) {
-        await fetchAnswerSteaming(
+        await handleFetchAnswerSteaming(
          question,
          signal,
          state.preference.selectedDocs!,
@@ -45,7 +49,7 @@ export const fetchAnswer = createAsyncThunk<Answer, { question: string }>(
                  console.error('Failed to fetch conversations: ', error);
                });

-              searchEndpoint(
+              handleSearch(
                //search for sources post streaming
                question,
                state.preference.selectedDocs!,
@@ -89,7 +93,7 @@ export const fetchAnswer = createAsyncThunk<Answer, { question: string }>(
          },
        );
      } else {
-        const answer = await fetchAnswerApi(
+        const answer = await handleFetchAnswer(
          question,
          signal,
          state.preference.selectedDocs!,
--- a/frontend/src/modals/CreateAPIKeyModal.tsx
+++ b/frontend/src/modals/CreateAPIKeyModal.tsx
@@ -0,0 +1,162 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
+
+import userService from '../api/services/userService';
+import Exit from '../assets/exit.svg';
+import Dropdown from '../components/Dropdown';
+import Input from '../components/Input';
+import { CreateAPIKeyModalProps, Doc } from '../models/misc';
+import { selectSourceDocs } from '../preferences/preferenceSlice';
+
+const embeddingsName =
+  import.meta.env.VITE_EMBEDDINGS_NAME ||
+  'huggingface_sentence-transformers/all-mpnet-base-v2';
+
+export default function CreateAPIKeyModal({
+  close,
+  createAPIKey,
+}: CreateAPIKeyModalProps) {
+  const { t } = useTranslation();
+  const docs = useSelector(selectSourceDocs);
+
+  const [APIKeyName, setAPIKeyName] = React.useState<string>('');
+  const [sourcePath, setSourcePath] = React.useState<{
+    label: string;
+    value: string;
+  } | null>(null);
+  const [prompt, setPrompt] = React.useState<{
+    name: string;
+    id: string;
+    type: string;
+  } | null>(null);
+  const [activePrompts, setActivePrompts] = React.useState<
+    { name: string; id: string; type: string }[]
+  >([]);
+  const [chunk, setChunk] = React.useState<string>('2');
+  const chunkOptions = ['0', '2', '4', '6', '8', '10'];
+
+  const extractDocPaths = () =>
+    docs
+      ? docs
+          .filter((doc) => doc.model === embeddingsName)
+          .map((doc: Doc) => {
+            let namePath = doc.name;
+            if (doc.language === namePath) {
+              namePath = '.project';
+            }
+            let docPath = 'default';
+            if (doc.location === 'local') {
+              docPath = 'local' + '/' + doc.name + '/';
+            } else if (doc.location === 'remote') {
+              docPath =
+                doc.language +
+                '/' +
+                namePath +
+                '/' +
+                doc.version +
+                '/' +
+                doc.model +
+                '/';
+            }
+            return {
+              label: doc.name,
+              value: docPath,
+            };
+          })
+      : [];
+
+  React.useEffect(() => {
+    const handleFetchPrompts = async () => {
+      try {
+        const response = await userService.getPrompts();
+        if (!response.ok) {
+          throw new Error('Failed to fetch prompts');
+        }
+        const promptsData = await response.json();
+        setActivePrompts(promptsData);
+      } catch (error) {
+        console.error(error);
+      }
+    };
+    handleFetchPrompts();
+  }, []);
+  return (
+    <div className="fixed top-0 left-0 z-30 flex h-screen w-screen items-center justify-center bg-gray-alpha bg-opacity-50">
+      <div className="relative w-11/12 rounded-2xl bg-white p-10 dark:bg-outer-space sm:w-[512px]">
+        <button className="absolute top-3 right-4 m-2 w-3" onClick={close}>
+          <img className="filter dark:invert" src={Exit} />
+        </button>
+        <div className="mb-6">
+          <span className="text-xl text-jet dark:text-bright-gray">
+            {t('modals.createAPIKey.label')}
+          </span>
+        </div>
+        <div className="relative mt-5 mb-4">
+          <span className="absolute left-2 -top-2 bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
+            {t('modals.createAPIKey.apiKeyName')}
+          </span>
+          <Input
+            type="text"
+            className="rounded-md"
+            value={APIKeyName}
+            onChange={(e) => setAPIKeyName(e.target.value)}
+          ></Input>
+        </div>
+        <div className="my-4">
+          <Dropdown
+            placeholder={t('modals.createAPIKey.sourceDoc')}
+            selectedValue={sourcePath}
+            onSelect={(selection: { label: string; value: string }) =>
+              setSourcePath(selection)
+            }
+            options={extractDocPaths()}
+            size="w-full"
+            rounded="xl"
+            border="border"
+          />
+        </div>
+        <div className="my-4">
+          <Dropdown
+            options={activePrompts}
+            selectedValue={prompt ? prompt.name : null}
+            placeholder={t('modals.createAPIKey.prompt')}
+            onSelect={(value: { name: string; id: string; type: string }) =>
+              setPrompt(value)
+            }
+            size="w-full"
+            border="border"
+          />
+        </div>
+        <div className="my-4">
+          <p className="mb-2 ml-2 font-semibold text-jet dark:text-bright-gray">
+            {t('modals.createAPIKey.chunks')}
+          </p>
+          <Dropdown
+            options={chunkOptions}
+            selectedValue={chunk}
+            onSelect={(value: string) => setChunk(value)}
+            size="w-full"
+            border="border"
+          />
+        </div>
+        <button
+          disabled={!sourcePath || APIKeyName.length === 0 || !prompt}
+          onClick={() =>
+            sourcePath &&
+            prompt &&
+            createAPIKey({
+              name: APIKeyName,
+              source: sourcePath.value,
+              prompt_id: prompt.id,
+              chunks: chunk,
+            })
+          }
+          className="float-right mt-4 rounded-full bg-purple-30 px-5 py-2 text-sm text-white hover:bg-[#6F3FD1] disabled:opacity-50"
+        >
+          {t('modals.createAPIKey.create')}
+        </button>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/modals/SaveAPIKeyModal.tsx
+++ b/frontend/src/modals/SaveAPIKeyModal.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Exit from '../assets/exit.svg';
+import { SaveAPIKeyModalProps } from '../models/misc';
+
+export default function SaveAPIKeyModal({
+  apiKey,
+  close,
+}: SaveAPIKeyModalProps) {
+  const { t } = useTranslation();
+  const [isCopied, setIsCopied] = React.useState(false);
+
+  const handleCopyKey = () => {
+    navigator.clipboard.writeText(apiKey);
+    setIsCopied(true);
+  };
+  return (
+    <div className="fixed top-0 left-0 z-30 flex h-screen w-screen items-center justify-center bg-gray-alpha bg-opacity-50">
+      <div className="relative w-11/12 rounded-3xl bg-white px-6 py-8 dark:bg-outer-space dark:text-bright-gray sm:w-[512px]">
+        <button className="absolute top-3 right-4 m-2 w-3" onClick={close}>
+          <img className="filter dark:invert" src={Exit} />
+        </button>
+        <h1 className="my-0 text-xl font-medium">
+          {' '}
+          {t('modals.saveKey.note')}
+        </h1>
+        <h3 className="text-sm font-normal text-outer-space">
+          {t('modals.saveKey.disclaimer')}
+        </h3>
+        <div className="flex justify-between py-2">
+          <div>
+            <h2 className="text-base font-semibold">API Key</h2>
+            <span className="text-sm font-normal leading-7 ">{apiKey}</span>
+          </div>
+          <button
+            className="my-1 h-10 w-20 rounded-full border border-solid border-purple-30 p-2 text-sm text-purple-30 hover:bg-purple-30 hover:text-white"
+            onClick={handleCopyKey}
+          >
+            {isCopied ? t('modals.saveKey.copied') : t('modals.saveKey.copy')}
+          </button>
+        </div>
+        <button
+          onClick={close}
+          className="rounded-full bg-philippine-yellow px-4 py-3 font-medium text-black hover:bg-[#E6B91A]"
+        >
+          {t('modals.saveKey.confirm')}
+        </button>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/models/misc.ts
+++ b/frontend/src/models/misc.ts
@@ -21,7 +21,6 @@ export type PromptProps = {
  selectedPrompt: { name: string; id: string; type: string };
  onSelectPrompt: (name: string, id: string, type: string) => void;
  setPrompts: (prompts: { name: string; id: string; type: string }[]) => void;
-  apiHost: string;
 };

 export type DocumentsProps = {
--- a/frontend/src/settings/APIKeys.tsx
+++ b/frontend/src/settings/APIKeys.tsx
@@ -1,22 +1,12 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
-import Dropdown from '../components/Dropdown';
-import {
-  Doc,
-  CreateAPIKeyModalProps,
-  SaveAPIKeyModalProps,
-} from '../models/misc';
-import { selectSourceDocs } from '../preferences/preferenceSlice';
-import Exit from '../assets/exit.svg';
-import Trash from '../assets/trash.svg';
 import { useTranslation } from 'react-i18next';
-import Input from '../components/Input';
-const apiHost = import.meta.env.VITE_API_HOST || 'https://docsapi.arc53.com';
-const embeddingsName =
-  import.meta.env.VITE_EMBEDDINGS_NAME ||
-  'huggingface_sentence-transformers/all-mpnet-base-v2';

-const APIKeys: React.FC = () => {
+import userService from '../api/services/userService';
+import Trash from '../assets/trash.svg';
+import CreateAPIKeyModal from '../modals/CreateAPIKeyModal';
+import SaveAPIKeyModal from '../modals/SaveAPIKeyModal';
+
+export default function APIKeys() {
  const { t } = useTranslation();
  const [isCreateModalOpen, setCreateModal] = React.useState(false);
  const [isSaveKeyModalOpen, setSaveKeyModal] = React.useState(false);
@@ -24,14 +14,23 @@ const APIKeys: React.FC = () => {
  const [apiKeys, setApiKeys] = React.useState<
    { name: string; key: string; source: string; id: string }[]
  >([]);
+
+  const handleFetchKeys = async () => {
+    try {
+      const response = await userService.getAPIKeys();
+      if (!response.ok) {
+        throw new Error('Failed to fetch API Keys');
+      }
+      const apiKeys = await response.json();
+      setApiKeys(apiKeys);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
  const handleDeleteKey = (id: string) => {
-    fetch(`${apiHost}/api/delete_api_key`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ id }),
-    })
+    userService
+      .deleteAPIKey({ id })
      .then((response) => {
        if (!response.ok) {
          throw new Error('Failed to delete API Key');
@@ -46,34 +45,15 @@ const APIKeys: React.FC = () => {
        console.error(error);
      });
  };
-  React.useEffect(() => {
-    fetchAPIKeys();
-  }, []);
-  const fetchAPIKeys = async () => {
-    try {
-      const response = await fetch(`${apiHost}/api/get_api_keys`);
-      if (!response.ok) {
-        throw new Error('Failed to fetch API Keys');
-      }
-      const apiKeys = await response.json();
-      setApiKeys(apiKeys);
-    } catch (error) {
-      console.log(error);
-    }
-  };
-  const createAPIKey = (payload: {
+
+  const handleCreateKey = (payload: {
    name: string;
    source: string;
    prompt_id: string;
    chunks: string;
  }) => {
-    fetch(`${apiHost}/api/create_api_key`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(payload),
-    })
+    userService
+      .createAPIKey(payload)
      .then((response) => {
        if (!response.ok) {
          throw new Error('Failed to create API Key');
@@ -85,12 +65,16 @@ const APIKeys: React.FC = () => {
        setCreateModal(false);
        setNewKey(data.key);
        setSaveKeyModal(true);
-        fetchAPIKeys();
+        handleFetchKeys();
      })
      .catch((error) => {
        console.error(error);
      });
  };
+
+  React.useEffect(() => {
+    handleFetchKeys();
+  }, []);
  return (
    <div className="mt-8">
      <div className="flex w-full flex-col lg:w-max">
@@ -104,8 +88,8 @@ const APIKeys: React.FC = () => {
        </div>
        {isCreateModalOpen && (
          <CreateAPIKeyModal
+            createAPIKey={handleCreateKey}
            close={() => setCreateModal(false)}
-            createAPIKey={createAPIKey}
          />
        )}
        {isSaveKeyModalOpen && (
@@ -155,192 +139,4 @@ const APIKeys: React.FC = () => {
      </div>
    </div>
  );
-};
-
-const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
-  close,
-  createAPIKey,
-}) => {
-  const [APIKeyName, setAPIKeyName] = React.useState<string>('');
-  const [sourcePath, setSourcePath] = React.useState<{
-    label: string;
-    value: string;
-  } | null>(null);
-
-  const chunkOptions = ['0', '2', '4', '6', '8', '10'];
-  const [chunk, setChunk] = React.useState<string>('2');
-  const [activePrompts, setActivePrompts] = React.useState<
-    { name: string; id: string; type: string }[]
-  >([]);
-  const [prompt, setPrompt] = React.useState<{
-    name: string;
-    id: string;
-    type: string;
-  } | null>(null);
-  const docs = useSelector(selectSourceDocs);
-  React.useEffect(() => {
-    const fetchPrompts = async () => {
-      try {
-        const response = await fetch(`${apiHost}/api/get_prompts`);
-        if (!response.ok) {
-          throw new Error('Failed to fetch prompts');
-        }
-        const promptsData = await response.json();
-        setActivePrompts(promptsData);
-      } catch (error) {
-        console.error(error);
-      }
-    };
-    fetchPrompts();
-  }, []);
-  const extractDocPaths = () =>
-    docs
-      ? docs
-          .filter((doc) => doc.model === embeddingsName)
-          .map((doc: Doc) => {
-            let namePath = doc.name;
-            if (doc.language === namePath) {
-              namePath = '.project';
-            }
-            let docPath = 'default';
-            if (doc.location === 'local') {
-              docPath = 'local' + '/' + doc.name + '/';
-            } else if (doc.location === 'remote') {
-              docPath =
-                doc.language +
-                '/' +
-                namePath +
-                '/' +
-                doc.version +
-                '/' +
-                doc.model +
-                '/';
-            }
-            return {
-              label: doc.name,
-              value: docPath,
-            };
-          })
-      : [];
-  const { t } = useTranslation();
-  return (
-    <div className="fixed top-0 left-0 z-30 flex h-screen w-screen items-center justify-center bg-gray-alpha bg-opacity-50">
-      <div className="relative w-11/12 rounded-2xl bg-white p-10 dark:bg-outer-space sm:w-[512px]">
-        <button className="absolute top-3 right-4 m-2 w-3" onClick={close}>
-          <img className="filter dark:invert" src={Exit} />
-        </button>
-        <div className="mb-6">
-          <span className="text-xl text-jet dark:text-bright-gray">
-            {t('modals.createAPIKey.label')}
-          </span>
-        </div>
-        <div className="relative mt-5 mb-4">
-          <span className="absolute left-2 -top-2 bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
-            {t('modals.createAPIKey.apiKeyName')}
-          </span>
-          <Input
-            type="text"
-            className="rounded-md"
-            value={APIKeyName}
-            onChange={(e) => setAPIKeyName(e.target.value)}
-          ></Input>
-        </div>
-        <div className="my-4">
-          <Dropdown
-            placeholder={t('modals.createAPIKey.sourceDoc')}
-            selectedValue={sourcePath}
-            onSelect={(selection: { label: string; value: string }) =>
-              setSourcePath(selection)
-            }
-            options={extractDocPaths()}
-            size="w-full"
-            rounded="xl"
-          />
-        </div>
-        <div className="my-4">
-          <Dropdown
-            options={activePrompts}
-            selectedValue={prompt ? prompt.name : null}
-            placeholder={t('modals.createAPIKey.prompt')}
-            onSelect={(value: { name: string; id: string; type: string }) =>
-              setPrompt(value)
-            }
-            size="w-full"
-          />
-        </div>
-        <div className="my-4">
-          <p className="mb-2 ml-2 font-bold text-jet dark:text-bright-gray">
-            {t('modals.createAPIKey.chunks')}
-          </p>
-          <Dropdown
-            options={chunkOptions}
-            selectedValue={chunk}
-            onSelect={(value: string) => setChunk(value)}
-            size="w-full"
-          />
-        </div>
-        <button
-          disabled={!sourcePath || APIKeyName.length === 0 || !prompt}
-          onClick={() =>
-            sourcePath &&
-            prompt &&
-            createAPIKey({
-              name: APIKeyName,
-              source: sourcePath.value,
-              prompt_id: prompt.id,
-              chunks: chunk,
-            })
-          }
-          className="float-right mt-4 rounded-full bg-purple-30 px-5 py-2 text-sm text-white hover:bg-[#6F3FD1] disabled:opacity-50"
-        >
-          {t('modals.createAPIKey.create')}
-        </button>
-      </div>
-    </div>
-  );
-};
-
-const SaveAPIKeyModal: React.FC<SaveAPIKeyModalProps> = ({ apiKey, close }) => {
-  const [isCopied, setIsCopied] = React.useState(false);
-  const { t } = useTranslation();
-  const handleCopyKey = () => {
-    navigator.clipboard.writeText(apiKey);
-    setIsCopied(true);
-  };
-  return (
-    <div className="fixed top-0 left-0 z-30 flex h-screen w-screen items-center justify-center bg-gray-alpha bg-opacity-50">
-      <div className="relative w-11/12 rounded-3xl bg-white px-6 py-8 dark:bg-outer-space dark:text-bright-gray sm:w-[512px]">
-        <button className="absolute top-3 right-4 m-2 w-3" onClick={close}>
-          <img className="filter dark:invert" src={Exit} />
-        </button>
-        <h1 className="my-0 text-xl font-medium">
-          {' '}
-          {t('modals.saveKey.note')}
-        </h1>
-        <h3 className="text-sm font-normal text-outer-space">
-          {t('modals.saveKey.disclaimer')}
-        </h3>
-        <div className="flex justify-between py-2">
-          <div>
-            <h2 className="text-base font-semibold">API Key</h2>
-            <span className="text-sm font-normal leading-7 ">{apiKey}</span>
-          </div>
-          <button
-            className="my-1 h-10 w-20 rounded-full border border-solid border-purple-30 p-2 text-sm text-purple-30 hover:bg-purple-30 hover:text-white"
-            onClick={handleCopyKey}
-          >
-            {isCopied ? t('modals.saveKey.copied') : t('modals.saveKey.copy')}
-          </button>
-        </div>
-        <button
-          onClick={close}
-          className="rounded-full bg-philippine-yellow px-4 py-3 font-medium text-black hover:bg-[#E6B91A]"
-        >
-          {t('modals.saveKey.confirm')}
-        </button>
-      </div>
-    </div>
-  );
-};
-
-export default APIKeys;
+}
--- a/frontend/src/settings/General.tsx
+++ b/frontend/src/settings/General.tsx
@@ -1,22 +1,22 @@
 import React from 'react';
-import { useSelector, useDispatch } from 'react-redux';
-import Prompts from './Prompts';
-import { useDarkTheme } from '../hooks';
 import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+
+import userService from '../api/services/userService';
 import Dropdown from '../components/Dropdown';
+import { useDarkTheme } from '../hooks';
 import {
-  selectPrompt,
-  setPrompt,
-  setChunks,
  selectChunks,
-  setTokenLimit,
+  selectPrompt,
  selectTokenLimit,
+  setChunks,
  setModalStateDeleteConv,
+  setPrompt,
+  setTokenLimit,
 } from '../preferences/preferenceSlice';
+import Prompts from './Prompts';

-const apiHost = import.meta.env.VITE_API_HOST || 'https://docsapi.arc53.com';
-
-const General: React.FC = () => {
+export default function General() {
  const {
    t,
    i18n: { changeLanguage, language },
@@ -69,9 +69,9 @@ const General: React.FC = () => {
  const selectedPrompt = useSelector(selectPrompt);

  React.useEffect(() => {
-    const fetchPrompts = async () => {
+    const handleFetchPrompts = async () => {
      try {
-        const response = await fetch(`${apiHost}/api/get_prompts`);
+        const response = await userService.getPrompts();
        if (!response.ok) {
          throw new Error('Failed to fetch prompts');
        }
@@ -81,14 +81,13 @@ const General: React.FC = () => {
        console.error(error);
      }
    };
-    fetchPrompts();
+    handleFetchPrompts();
  }, []);

  React.useEffect(() => {
    localStorage.setItem('docsgpt-locale', selectedLanguage?.value as string);
    changeLanguage(selectedLanguage?.value);
  }, [selectedLanguage, changeLanguage]);
-
  return (
    <div className="mt-[59px]">
      <div className="mb-5">
@@ -171,7 +170,6 @@ const General: React.FC = () => {
            dispatch(setPrompt({ name: name, id: id, type: type }))
          }
          setPrompts={setPrompts}
-          apiHost={apiHost}
        />
      </div>
      <div className="w-56">
@@ -189,6 +187,4 @@ const General: React.FC = () => {
      </div>
    </div>
  );
-};
-
-export default General;
+}
--- a/frontend/src/settings/Prompts.tsx
+++ b/frontend/src/settings/Prompts.tsx
@@ -1,15 +1,17 @@
 import React from 'react';
-import { PromptProps, ActiveState } from '../models/misc';
-import Dropdown from '../components/Dropdown';
-import PromptsModal from '../preferences/PromptsModal';
 import { useTranslation } from 'react-i18next';
-const apiHost = import.meta.env.VITE_API_HOST || 'https://docsapi.arc53.com';
-const Prompts: React.FC<PromptProps> = ({
+
+import userService from '../api/services/userService';
+import Dropdown from '../components/Dropdown';
+import { ActiveState, PromptProps } from '../models/misc';
+import PromptsModal from '../preferences/PromptsModal';
+
+export default function Prompts({
  prompts,
  selectedPrompt,
  onSelectPrompt,
  setPrompts,
-}) => {
+}: PromptProps) {
  const handleSelectPrompt = ({
    name,
    id,
@@ -37,17 +39,12 @@ const Prompts: React.FC<PromptProps> = ({
    t,
    i18n: { changeLanguage, language },
  } = useTranslation();
+
  const handleAddPrompt = async () => {
    try {
-      const response = await fetch(`${apiHost}/api/create_prompt`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          name: newPromptName,
-          content: newPromptContent,
-        }),
+      const response = await userService.createPrompt({
+        name: newPromptName,
+        content: newPromptContent,
      });
      if (!response.ok) {
        throw new Error('Failed to add prompt');
@@ -69,18 +66,12 @@ const Prompts: React.FC<PromptProps> = ({

  const handleDeletePrompt = (id: string) => {
    setPrompts(prompts.filter((prompt) => prompt.id !== id));
-    fetch(`${apiHost}/api/delete_prompt`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ id: id }),
-    })
+    userService
+      .deletePrompt({ id })
      .then((response) => {
        if (!response.ok) {
          throw new Error('Failed to delete prompt');
        }
-        // get 1st prompt and set it as selected
        if (prompts.length > 0) {
          onSelectPrompt(prompts[0].name, prompts[0].id, prompts[0].type);
        }
@@ -90,18 +81,9 @@ const Prompts: React.FC<PromptProps> = ({
      });
  };

-  const fetchPromptContent = async (id: string) => {
-    console.log('fetching prompt content');
+  const handleFetchPromptContent = async (id: string) => {
    try {
-      const response = await fetch(
-        `${apiHost}/api/get_single_prompt?id=${id}`,
-        {
-          method: 'GET',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-        },
-      );
+      const response = await userService.getSinglePrompt(id);
      if (!response.ok) {
        throw new Error('Failed to fetch prompt content');
      }
@@ -113,17 +95,12 @@ const Prompts: React.FC<PromptProps> = ({
  };

  const handleSaveChanges = (id: string, type: string) => {
-    fetch(`${apiHost}/api/update_prompt`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({
+    userService
+      .updatePrompt({
        id: id,
        name: editPromptName,
        content: editPromptContent,
-      }),
-    })
+      })
      .then((response) => {
        if (!response.ok) {
          throw new Error('Failed to update prompt');
@@ -154,7 +131,6 @@ const Prompts: React.FC<PromptProps> = ({
        console.error(error);
      });
  };
-
  return (
    <>
      <div>
@@ -183,7 +159,7 @@ const Prompts: React.FC<PromptProps> = ({
              }) => {
                setModalType('EDIT');
                setEditPromptName(name);
-                fetchPromptContent(id);
+                handleFetchPromptContent(id);
                setCurrentPromptEdit({ id: id, name: name, type: type });
                setModalState('ACTIVE');
              }}
@@ -219,6 +195,4 @@ const Prompts: React.FC<PromptProps> = ({
      />
    </>
  );
-};
-
-export default Prompts;
+}
--- a/frontend/src/settings/index.tsx
+++ b/frontend/src/settings/index.tsx
@@ -1,22 +1,22 @@
 import React from 'react';
-import { useSelector, useDispatch } from 'react-redux';
-import General from './General';
-import Documents from './Documents';
-import APIKeys from './APIKeys';
-import Widgets from './Widgets';
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+
+import userService from '../api/services/userService';
+import ArrowLeft from '../assets/arrow-left.svg';
+import ArrowRight from '../assets/arrow-right.svg';
+import i18n from '../locale/i18n';
+import { Doc } from '../preferences/preferenceApi';
 import {
  selectSourceDocs,
  setSourceDocs,
 } from '../preferences/preferenceSlice';
-import { Doc } from '../preferences/preferenceApi';
-import ArrowLeft from '../assets/arrow-left.svg';
-import ArrowRight from '../assets/arrow-right.svg';
-import { useTranslation } from 'react-i18next';
-import i18n from '../locale/i18n';
+import APIKeys from './APIKeys';
+import Documents from './Documents';
+import General from './General';
+import Widgets from './Widgets';

-const apiHost = import.meta.env.VITE_API_HOST || 'https://docsapi.arc53.com';
-
-const Settings: React.FC = () => {
+export default function Settings() {
  const dispatch = useDispatch();
  const { t } = useTranslation();
  const tabs = [
@@ -33,11 +33,11 @@ const Settings: React.FC = () => {
  const updateWidgetScreenshot = (screenshot: File | null) => {
    setWidgetScreenshot(screenshot);
  };
+
  const handleDeleteClick = (index: number, doc: Doc) => {
    const docPath = 'indexes/' + 'local' + '/' + doc.name;
-    fetch(`${apiHost}/api/delete_old?path=${docPath}`, {
-      method: 'GET',
-    })
+    userService
+      .deletePath(docPath)
      .then((response) => {
        if (response.ok && documents) {
          const updatedDocuments = [
@@ -50,7 +50,6 @@ const Settings: React.FC = () => {
      .catch((error) => console.error(error));
  };

-  // persist active tab as the translated version of 'general' per language change
  React.useEffect(() => {
    setActiveTab(t('settings.general.label'));
  }, [i18n.language]);
@@ -134,6 +133,4 @@ const Settings: React.FC = () => {
        return null;
    }
  }
-};
-
-export default Settings;
+}