diff --git a/application/api/answer/routes.py b/application/api/answer/routes.py index 94855026..bd1fa21f 100644 --- a/application/api/answer/routes.py +++ b/application/api/answer/routes.py @@ -26,6 +26,7 @@ db = mongo["docsgpt"] conversations_collection = db["conversations"] vectors_collection = db["vectors"] prompts_collection = db["prompts"] +api_key_collection = db["api_keys"] answer = Blueprint('answer', __name__) gpt_model = "" @@ -77,6 +78,12 @@ def run_async_chain(chain, question, chat_history): result["answer"] = answer return result +def get_data_from_api_key(api_key): + data = api_key_collection.find_one({"key": api_key}) + if data is None: + return bad_request(401, "Invalid API key") + return data + def get_vectorstore(data): if "active_docs" in data: @@ -98,9 +105,8 @@ def is_azure_configured(): return settings.OPENAI_API_BASE and settings.OPENAI_API_VERSION and settings.AZURE_DEPLOYMENT_NAME -def complete_stream(question, docsearch, chat_history, api_key, prompt_id, conversation_id, chunks=2): - llm = LLMCreator.create_llm(settings.LLM_NAME, api_key=api_key) - +def complete_stream(question, docsearch, chat_history, prompt_id, conversation_id, chunks=2): + llm = LLMCreator.create_llm(settings.LLM_NAME, api_key=settings.API_KEY) if prompt_id == 'default': prompt = chat_combine_template elif prompt_id == 'creative': @@ -188,10 +194,15 @@ def stream(): data = request.get_json() # get parameter from url question question = data["question"] - history = data["history"] - # history to json object from string - history = json.loads(history) - conversation_id = data["conversation_id"] + if "history" not in data: + history = [] + else: + history = data["history"] + history = json.loads(history) + if "conversation_id" not in data: + conversation_id = None + else: + conversation_id = data["conversation_id"] if 'prompt_id' in data: prompt_id = data["prompt_id"] else: @@ -203,23 +214,18 @@ def stream(): # check if active_docs is set - if not api_key_set: - api_key = data["api_key"] - else: - api_key = settings.API_KEY - if not embeddings_key_set: - embeddings_key = data["embeddings_key"] - else: - embeddings_key = settings.EMBEDDINGS_KEY - if "active_docs" in data: + if "api_key" in data: + data_key = get_data_from_api_key(data["api_key"]) + vectorstore = get_vectorstore({"active_docs": data_key["source"]}) + elif "active_docs" in data: vectorstore = get_vectorstore({"active_docs": data["active_docs"]}) else: vectorstore = "" - docsearch = VectorCreator.create_vectorstore(settings.VECTOR_STORE, vectorstore, embeddings_key) + docsearch = VectorCreator.create_vectorstore(settings.VECTOR_STORE, vectorstore, settings.EMBEDDINGS_KEY) return Response( complete_stream(question, docsearch, - chat_history=history, api_key=api_key, + chat_history=history, prompt_id=prompt_id, conversation_id=conversation_id, chunks=chunks), mimetype="text/event-stream" @@ -230,20 +236,15 @@ def stream(): def api_answer(): data = request.get_json() question = data["question"] - history = data["history"] + if "history" not in data: + history = [] + else: + history = data["history"] if "conversation_id" not in data: conversation_id = None else: conversation_id = data["conversation_id"] print("-" * 5) - if not api_key_set: - api_key = data["api_key"] - else: - api_key = settings.API_KEY - if not embeddings_key_set: - embeddings_key = data["embeddings_key"] - else: - embeddings_key = settings.EMBEDDINGS_KEY if 'prompt_id' in data: prompt_id = data["prompt_id"] else: @@ -265,13 +266,17 @@ def api_answer(): # use try and except to check for exception try: # check if the vectorstore is set - vectorstore = get_vectorstore(data) + if "api_key" in data: + data_key = get_data_from_api_key(data["api_key"]) + vectorstore = get_vectorstore({"active_docs": data_key["source"]}) + else: + vectorstore = get_vectorstore(data) # loading the index and the store and the prompt template # Note if you have used other embeddings than OpenAI, you need to change the embeddings - docsearch = VectorCreator.create_vectorstore(settings.VECTOR_STORE, vectorstore, embeddings_key) + docsearch = VectorCreator.create_vectorstore(settings.VECTOR_STORE, vectorstore, settings.EMBEDDINGS_KEY) - llm = LLMCreator.create_llm(settings.LLM_NAME, api_key=api_key) + llm = LLMCreator.create_llm(settings.LLM_NAME, api_key=settings.API_KEY) @@ -366,14 +371,10 @@ def api_search(): # get parameter from url question question = data["question"] - if not embeddings_key_set: - if "embeddings_key" in data: - embeddings_key = data["embeddings_key"] - else: - embeddings_key = settings.EMBEDDINGS_KEY - else: - embeddings_key = settings.EMBEDDINGS_KEY - if "active_docs" in data: + if "api_key" in data: + data_key = get_data_from_api_key(data["api_key"]) + vectorstore = data_key["source"] + elif "active_docs" in data: vectorstore = get_vectorstore({"active_docs": data["active_docs"]}) else: vectorstore = "" @@ -381,7 +382,7 @@ def api_search(): chunks = int(data["chunks"]) else: chunks = 2 - docsearch = VectorCreator.create_vectorstore(settings.VECTOR_STORE, vectorstore, embeddings_key) + docsearch = VectorCreator.create_vectorstore(settings.VECTOR_STORE, vectorstore, settings.EMBEDDINGS_KEY) if chunks == 0: docs = [] else: diff --git a/application/api/user/routes.py b/application/api/user/routes.py index 1779472b..239278b9 100644 --- a/application/api/user/routes.py +++ b/application/api/user/routes.py @@ -1,4 +1,5 @@ import os +import uuid from flask import Blueprint, request, jsonify import requests from pymongo import MongoClient @@ -16,6 +17,7 @@ conversations_collection = db["conversations"] vectors_collection = db["vectors"] prompts_collection = db["prompts"] feedback_collection = db["feedback"] +api_key_collection = db["api_keys"] user = Blueprint('user', __name__) current_dir = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__)))) @@ -343,5 +345,41 @@ def update_prompt_name(): +@user.route("/api/get_api_keys", methods=["GET"]) +def get_api_keys(): + user = "local" + keys = api_key_collection.find({"user": user}) + list_keys = [] + for key in keys: + list_keys.append({"id": str(key["_id"]), "name": key["name"], "key": key["key"][:4] + "..." + key["key"][-4:], "source": key["source"]}) + return jsonify(list_keys) +@user.route("/api/create_api_key", methods=["POST"]) +def create_api_key(): + data = request.get_json() + name = data["name"] + source = data["source"] + key = str(uuid.uuid4()) + user = "local" + resp = api_key_collection.insert_one( + { + "name": name, + "key": key, + "source": source, + "user": user, + } + ) + new_id = str(resp.inserted_id) + return {"id": new_id, "key": key} + +@user.route("/api/delete_api_key", methods=["POST"]) +def delete_api_key(): + data = request.get_json() + id = data["id"] + api_key_collection.delete_one( + { + "_id": ObjectId(id), + } + ) + return {"status": "ok"} diff --git a/frontend/src/Setting.tsx b/frontend/src/Setting.tsx index 46999fd1..172691a0 100644 --- a/frontend/src/Setting.tsx +++ b/frontend/src/Setting.tsx @@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react'; import { useSelector, useDispatch } from 'react-redux'; import ArrowLeft from './assets/arrow-left.svg'; import ArrowRight from './assets/arrow-right.svg'; +import Exit from './assets/exit.svg'; import Trash from './assets/trash.svg'; import { selectPrompt, @@ -14,16 +15,13 @@ import { import { Doc } from './preferences/preferenceApi'; import { useDarkTheme } from './hooks'; import Dropdown from './components/Dropdown'; -type PromptProps = { - prompts: { name: string; id: string; type: string }[]; - 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; -}; +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 Setting: React.FC = () => { - const tabs = ['General', 'Prompts', 'Documents']; + const tabs = ['General', 'Prompts', 'Documents', 'API Keys']; //const tabs = ['General', 'Prompts', 'Documents', 'Widgets']; const [activeTab, setActiveTab] = useState('General'); @@ -37,7 +35,6 @@ const Setting: React.FC = () => { const dispatch = useDispatch(); - const apiHost = import.meta.env.VITE_API_HOST || 'https://docsapi.arc53.com'; const [widgetScreenshot, setWidgetScreenshot] = useState(null); const updateWidgetScreenshot = (screenshot: File | null) => { @@ -57,7 +54,6 @@ const Setting: React.FC = () => { console.error(error); } }; - fetchPrompts(); }, []); @@ -169,7 +165,6 @@ const Setting: React.FC = () => { dispatch(setPrompt({ name: name, id: id, type: type })) } setPrompts={setPrompts} - apiHost={apiHost} /> ); case 'Documents': @@ -186,6 +181,8 @@ const Setting: React.FC = () => { onWidgetScreenshotChange={updateWidgetScreenshot} // Add this line /> ); + case 'API Keys': + return ; default: return null; } @@ -241,13 +238,18 @@ const General: React.FC = () => { }; export default Setting; +type PromptProps = { + prompts: { name: string; id: string; type: string }[]; + selectedPrompt: { name: string; id: string; type: string }; + onSelectPrompt: (name: string, id: string, type: string) => void; + setPrompts: (prompts: { name: string; id: string; type: string }[]) => void; +}; const Prompts: React.FC = ({ prompts, selectedPrompt, onSelectPrompt, setPrompts, - apiHost, }) => { const handleSelectPrompt = ({ name, @@ -483,7 +485,6 @@ const AddPromptModal: React.FC = ({ ); }; - type DocumentsProps = { documents: Doc[] | null; handleDeleteDocument: (index: number, document: Doc) => void; @@ -495,10 +496,10 @@ const Documents: React.FC = ({ }) => { return (
-
+
{/*

Documents

*/} -
+
@@ -632,7 +633,268 @@ const AddDocumentModal: React.FC = ({ ); }; +const APIKeys: React.FC = () => { + const [isCreateModalOpen, setCreateModal] = useState(false); + const [isSaveKeyModalOpen, setSaveKeyModal] = useState(false); + const [newKey, setNewKey] = useState(''); + const [apiKeys, setApiKeys] = useState< + { name: string; key: string; source: string; id: string }[] + >([]); + const handleDeleteKey = (id: string) => { + fetch(`${apiHost}/api/delete_api_key`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ id }), + }) + .then((response) => { + if (!response.ok) { + throw new Error('Failed to delete API Key'); + } + return response.json(); + }) + .then((data) => { + data.status === 'ok' && + setApiKeys((previous) => previous.filter((elem) => elem.id !== id)); + }) + .catch((error) => { + console.error(error); + }); + }; + 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: { name: string; source: string }) => { + fetch(`${apiHost}/api/create_api_key`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify(payload), + }) + .then((response) => { + if (!response.ok) { + throw new Error('Failed to create API Key'); + } + return response.json(); + }) + .then((data) => { + setApiKeys([...apiKeys, data]); + setCreateModal(false); //close the create key modal + setNewKey(data.key); + setSaveKeyModal(true); // render the newly created key + fetchAPIKeys(); + }) + .catch((error) => { + console.error(error); + }); + }; + return ( +
+
+
+ +
+ {isCreateModalOpen && ( + setCreateModal(false)} + createAPIKey={createAPIKey} + /> + )} + {isSaveKeyModalOpen && ( + setSaveKeyModal(false)} + /> + )} +
+
+
+ + + + + + + + + + {apiKeys?.map((element, index) => ( + + + + + + + ))} + +
Name + Source document + API Key
{element.name}{element.source}{element.key} + Delete handleDeleteKey(element.id)} + /> +
+
+
+
+
+ ); +}; +type SaveAPIKeyModalProps = { + apiKey: string; + close: () => void; +}; +const SaveAPIKeyModal: React.FC = ({ apiKey, close }) => { + const [isCopied, setIsCopied] = useState(false); + const handleCopyKey = () => { + navigator.clipboard.writeText(apiKey); + setIsCopied(true); + }; + return ( +
+
+ +

Please save your Key

+

+ This is the only time your key will be shown. +

+
+
+

API Key

+ {apiKey} +
+ +
+ +
+
+ ); +}; +type CreateAPIKeyModalProps = { + close: () => void; + createAPIKey: (payload: { name: string; source: string }) => void; +}; +const CreateAPIKeyModal: React.FC = ({ + close, + createAPIKey, +}) => { + const [APIKeyName, setAPIKeyName] = useState(''); + const [sourcePath, setSourcePath] = useState<{ + label: string; + value: string; + } | null>(null); + const docs = useSelector(selectSourceDocs); + 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, + }; + }) + : []; + + return ( +
+
+ + + Create New API Key + +
+ + API Key Name + + setAPIKeyName(e.target.value)} + /> +
+
+ + setSourcePath(selection) + } + options={extractDocPaths()} + /> +
+ +
+
+ ); +}; const Widgets: React.FC<{ widgetScreenshot: File | null; onWidgetScreenshotChange: (screenshot: File | null) => void; diff --git a/frontend/src/components/Dropdown.tsx b/frontend/src/components/Dropdown.tsx index 7a4936b3..060919da 100644 --- a/frontend/src/components/Dropdown.tsx +++ b/frontend/src/components/Dropdown.tsx @@ -7,18 +7,22 @@ function Dropdown({ onSelect, showDelete, onDelete, + placeholder, }: { options: | string[] | { name: string; id: string; type: string }[] | { label: string; value: string }[]; - selectedValue: string | { label: string; value: string }; + selectedValue: string | { label: string; value: string } | null; onSelect: | ((value: string) => void) | ((value: { name: string; id: string; type: string }) => void) | ((value: { label: string; value: string }) => void); showDelete?: boolean; onDelete?: (value: string) => void; + placeholder?: string; + className?: string; + width?: string; }) { const [isOpen, setIsOpen] = useState(false); return ( @@ -31,7 +35,7 @@ function Dropdown({ > {isOpen && ( -
+
{options.map((option: any, index) => (
= [], conversationId: string | null, @@ -60,8 +59,6 @@ export function fetchAnswerApi( }, body: JSON.stringify({ question: question, - api_key: apiKey, - embeddings_key: apiKey, history: history, active_docs: docPath, conversation_id: conversationId, @@ -92,7 +89,6 @@ export function fetchAnswerApi( export function fetchAnswerSteaming( question: string, signal: AbortSignal, - apiKey: string, selectedDocs: Doc, history: Array = [], conversationId: string | null, @@ -127,8 +123,6 @@ export function fetchAnswerSteaming( return new Promise((resolve, reject) => { const body = { question: question, - api_key: apiKey, - embeddings_key: apiKey, active_docs: docPath, history: JSON.stringify(history), conversation_id: conversationId, @@ -192,7 +186,6 @@ export function fetchAnswerSteaming( } export function searchEndpoint( question: string, - apiKey: string, selectedDocs: Doc, conversation_id: string | null, history: Array = [], diff --git a/frontend/src/conversation/conversationSlice.ts b/frontend/src/conversation/conversationSlice.ts index 85fc3510..72cf660b 100644 --- a/frontend/src/conversation/conversationSlice.ts +++ b/frontend/src/conversation/conversationSlice.ts @@ -23,7 +23,6 @@ export const fetchAnswer = createAsyncThunk( await fetchAnswerSteaming( question, signal, - state.preference.apiKey, state.preference.selectedDocs!, state.conversation.queries, state.conversation.conversationId, @@ -48,7 +47,6 @@ export const fetchAnswer = createAsyncThunk( searchEndpoint( //search for sources post streaming question, - state.preference.apiKey, state.preference.selectedDocs!, state.conversation.conversationId, state.conversation.queries, @@ -83,7 +81,6 @@ export const fetchAnswer = createAsyncThunk( const answer = await fetchAnswerApi( question, signal, - state.preference.apiKey, state.preference.selectedDocs!, state.conversation.queries, state.conversation.conversationId, diff --git a/frontend/src/index.css b/frontend/src/index.css index 263b86f8..b35385b0 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -3,7 +3,7 @@ @tailwind utilities; ::-webkit-scrollbar { - width: 10px; + width: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs index 50af33c8..63f99513 100644 --- a/frontend/tailwind.config.cjs +++ b/frontend/tailwind.config.cjs @@ -46,7 +46,8 @@ module.exports = { 'gun-metal':'#2E303E', 'sonic-silver':'#747474', 'soap':'#D8CCF1', - 'independence':'#54546D' + 'independence':'#54546D', + 'philippine-yellow':'#FFC700', }, }, },