LLM/DocsGPT
1
0
Fork 0
mirror of https://github.com/arc53/DocsGPT.git synced 2025-11-29 08:33:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

history

Browse Source
This commit is contained in:
Alex
2023-07-26 22:14:54 +01:00
parent 486a1bc9de
commit 382c3930a2
7 changed files with 337 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
frontend/src/Navigation.tsx
View File

@@ -19,10 +19,17 @@ import {
selectSelectedDocsStatus,
selectSourceDocs,
setSelectedDocs,
selectConversations,
setConversations,
selectConversationId,
} from './preferences/preferenceSlice';
import {
setConversation,
updateConversationId,
} from './conversation/conversationSlice';
import { useOutsideAlerter } from './hooks';
import Upload from './upload/Upload';
import { Doc } from './preferences/preferenceApi';
import { Doc, getConversations } from './preferences/preferenceApi';
export default function Navigation({
navState,
@@ -34,6 +41,8 @@ export default function Navigation({
const dispatch = useDispatch();
const docs = useSelector(selectSourceDocs);
const selectedDocs = useSelector(selectSelectedDocs);
const conversations = useSelector(selectConversations);
const conversationId = useSelector(selectConversationId);
const [isDocsListOpen, setIsDocsListOpen] = useState(false);
@@ -51,6 +60,33 @@ export default function Navigation({
const navRef = useRef(null);
const apiHost = import.meta.env.VITE_API_HOST || 'https://docsapi.arc53.com';
useEffect(() => {
if (!conversations) {
getConversations()
.then((fetchedConversations) => {
dispatch(setConversations(fetchedConversations));
})
.catch((error) => {
console.error('Failed to fetch conversations: ', error);
});
}
}, [conversations, dispatch]);
const handleDeleteConversation = (id: string) => {
fetch(`${apiHost}/api/delete_conversation?id=${id}`, {
method: 'POST',
})
.then(() => {
// remove the image element from the DOM
const imageElement = document.querySelector(
`#img-${id}`,
) as HTMLElement;
const parentElement = imageElement.parentNode as HTMLElement;
parentElement.parentNode?.removeChild(parentElement);
})
.catch((error) => console.error(error));
};
const handleDeleteClick = (index: number, doc: Doc) => {
const docPath = 'indexes/' + 'local' + '/' + doc.name;
@@ -67,6 +103,22 @@ export default function Navigation({
})
.catch((error) => console.error(error));
};
const handleConversationClick = (index: string) => {
// fetch the conversation from the server and setConversation in the store
fetch(`${apiHost}/api/get_single_conversation?id=${index}`, {
method: 'GET',
})
.then((response) => response.json())
.then((data) => {
dispatch(setConversation(data));
dispatch(
updateConversationId({
query: { conversationId: index },
}),
);
});
};
useOutsideAlerter(
navRef,
() => {
@@ -121,15 +173,56 @@ export default function Navigation({
</div>
<NavLink
to={'/'}
onClick={() => {
dispatch(setConversation([]));
dispatch(updateConversationId({ query: { conversationId: null } }));
}}
className={({ isActive }) =>
`${
isActive ? 'bg-gray-3000' : ''
isActive && conversationId === null ? 'bg-gray-3000' : ''
} my-auto mx-4 mt-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100`
}
>
<img src={Message} className="ml-2 w-5"></img>
<p className="my-auto text-eerie-black">Chat</p>
<p className="my-auto text-eerie-black">New Chat</p>
</NavLink>
<div className="conversations-container max-h-[25rem] overflow-y-auto">
{conversations
? conversations.map((conversation) => {
return (
<div
key={conversation.id}
onClick={() => {
handleConversationClick(conversation.id);
}}
className={`my-auto mx-4 mt-4 flex h-12 cursor-pointer items-center justify-between gap-4 rounded-md hover:bg-gray-100 ${
conversationId === conversation.id ? 'bg-gray-100' : ''
}`}
>
<div className="flex gap-4">
<img src={Message} className="ml-2 w-5"></img>
<p className="my-auto text-eerie-black">
{conversation.name}
</p>
</div>
{conversationId === conversation.id ? (
<img
src={Exit}
alt="Exit"
className="mr-4 h-3 w-3 cursor-pointer hover:opacity-50"
id={`img-${conversation.id}`}
onClick={(event) => {
event.stopPropagation();
handleDeleteConversation(conversation.id);
}}
/>
) : null}
</div>
);
})
: null}
</div>
<div className="flex-grow border-b-2 border-gray-100"></div>
<div className="flex flex-col-reverse border-b-2">

61
frontend/src/conversation/conversationApi.ts
View File

@@ -8,7 +8,24 @@ export function fetchAnswerApi(
apiKey: string,
selectedDocs: Doc,
history: Array<any> = [],
): Promise<Answer> {
conversationId: string | null,
): Promise<
| {
result: any;
answer: any;
sources: any;
conversationId: any;
query: string;
}
| {
result: any;
answer: any;
sources: any;
query: string;
conversationId: any;
title: any;
}
> {
let namePath = selectedDocs.name;
if (selectedDocs.language === namePath) {
namePath = '.project';
@@ -44,6 +61,7 @@ export function fetchAnswerApi(
embeddings_key: apiKey,
history: history,
active_docs: docPath,
conversation_id: conversationId,
}),
})
.then((response) => {
@@ -55,7 +73,13 @@ export function fetchAnswerApi(
})
.then((data) => {
const result = data.answer;
return { answer: result, query: question, result, sources: data.sources };
return {
answer: result,
query: question,
result,
sources: data.sources,
conversationId: data.conversation_id,
};
});
}
@@ -64,6 +88,7 @@ export function fetchAnswerSteaming(
apiKey: string,
selectedDocs: Doc,
history: Array<any> = [],
conversationId: string | null,
onEvent: (event: MessageEvent) => void,
): Promise<Answer> {
let namePath = selectedDocs.name;
@@ -97,8 +122,9 @@ export function fetchAnswerSteaming(
embeddings_key: apiKey,
active_docs: docPath,
history: JSON.stringify(history),
conversation_id: conversationId,
};
fetch(apiHost + '/stream', {
method: 'POST',
headers: {
@@ -107,48 +133,51 @@ export function fetchAnswerSteaming(
body: JSON.stringify(body),
})
.then((response) => {
if (!response.body) throw Error("No response body");
if (!response.body) throw Error('No response body');
const reader = response.body.getReader();
const decoder = new TextDecoder('utf-8');
var counterrr = 0
const processStream = ({ done, value }: ReadableStreamReadResult<Uint8Array>) => {
let counterrr = 0;
const processStream = ({
done,
value,
}: ReadableStreamReadResult<Uint8Array>) => {
if (done) {
console.log(counterrr);
return;
}
counterrr += 1;
const chunk = decoder.decode(value);
const lines = chunk.split("\n");
const lines = chunk.split('\n');
for (let line of lines) {
if (line.trim() == "") {
if (line.trim() == '') {
continue;
}
if (line.startsWith('data:')) {
line = line.substring(5);
}
const messageEvent: MessageEvent = new MessageEvent("message", {
const messageEvent: MessageEvent = new MessageEvent('message', {
data: line,
});
onEvent(messageEvent); // handle each message
}
reader.read().then(processStream).catch(reject);
}
};
reader.read().then(processStream).catch(reject);
})
.catch((error) => {
console.error('Connection failed:', error);
reject(error);
});
});
});
}
export function sendFeedback(

5
frontend/src/conversation/conversationModels.ts
View File

@@ -10,6 +10,7 @@ export interface Message {
export interface ConversationState {
queries: Query[];
status: Status;
conversationId: string | null;
}
export interface Answer {
@@ -17,6 +18,8 @@ export interface Answer {
query: string;
result: string;
sources: { title: string; text: string }[];
conversationId: string | null;
title: string | null;
}
export interface Query {
@@ -25,4 +28,6 @@ export interface Query {
feedback?: FEEDBACK;
error?: string;
sources?: { title: string; text: string }[];
conversationId?: string | null;
title?: string | null;
}

52
frontend/src/conversation/conversationSlice.ts
View File

@@ -2,10 +2,13 @@ import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit';
import store from '../store';
import { fetchAnswerApi, fetchAnswerSteaming } from './conversationApi';
import { Answer, ConversationState, Query, Status } from './conversationModels';
import { getConversations } from '../preferences/preferenceApi';
import { setConversations } from '../preferences/preferenceSlice';
const initialState: ConversationState = {
queries: [],
status: 'idle',
conversationId: null,
};
const API_STREAMING = import.meta.env.VITE_API_STREAMING === 'true';
@@ -21,6 +24,7 @@ export const fetchAnswer = createAsyncThunk<Answer, { question: string }>(
state.preference.apiKey,
state.preference.selectedDocs!,
state.conversation.queries,
state.conversation.conversationId,
(event) => {
const data = JSON.parse(event.data);
@@ -28,6 +32,13 @@ export const fetchAnswer = createAsyncThunk<Answer, { question: string }>(
if (data.type === 'end') {
// set status to 'idle'
dispatch(conversationSlice.actions.setStatus('idle'));
getConversations()
.then((fetchedConversations) => {
dispatch(setConversations(fetchedConversations));
})
.catch((error) => {
console.error('Failed to fetch conversations: ', error);
});
} else if (data.type === 'source') {
// check if data.metadata exists
let result;
@@ -46,6 +57,12 @@ export const fetchAnswer = createAsyncThunk<Answer, { question: string }>(
query: { sources: [result] },
}),
);
} else if (data.type === 'id') {
dispatch(
updateConversationId({
query: { conversationId: data.id },
}),
);
} else {
const result = data.answer;
dispatch(
@@ -63,10 +80,11 @@ export const fetchAnswer = createAsyncThunk<Answer, { question: string }>(
state.preference.apiKey,
state.preference.selectedDocs!,
state.conversation.queries,
state.conversation.conversationId,
);
if (answer) {
let sourcesPrepped = [];
sourcesPrepped = answer.sources.map((source) => {
sourcesPrepped = answer.sources.map((source: { title: string }) => {
if (source && source.title) {
const titleParts = source.title.split('/');
return {
@@ -83,11 +101,30 @@ export const fetchAnswer = createAsyncThunk<Answer, { question: string }>(
query: { response: answer.answer, sources: sourcesPrepped },
}),
);
dispatch(
updateConversationId({
query: { conversationId: answer.conversationId },
}),
);
dispatch(conversationSlice.actions.setStatus('idle'));
getConversations()
.then((fetchedConversations) => {
dispatch(setConversations(fetchedConversations));
})
.catch((error) => {
console.error('Failed to fetch conversations: ', error);
});
}
}
}
return { answer: '', query: question, result: '', sources: [] };
return {
conversationId: null,
title: null,
answer: '',
query: question,
result: '',
sources: [],
};
},
);
@@ -98,6 +135,9 @@ export const conversationSlice = createSlice({
addQuery(state, action: PayloadAction<Query>) {
state.queries.push(action.payload);
},
setConversation(state, action: PayloadAction<Query[]>) {
state.queries = action.payload;
},
updateStreamingQuery(
state,
action: PayloadAction<{ index: number; query: Partial<Query> }>,
@@ -113,6 +153,12 @@ export const conversationSlice = createSlice({
};
}
},
updateConversationId(
state,
action: PayloadAction<{ query: Partial<Query> }>,
) {
state.conversationId = action.payload.query.conversationId ?? null;
},
updateStreamingSource(
state,
action: PayloadAction<{ index: number; query: Partial<Query> }>,
@@ -161,6 +207,8 @@ export const {
addQuery,
updateQuery,
updateStreamingQuery,
updateConversationId,
updateStreamingSource,
setConversation,
} = conversationSlice.actions;
export default conversationSlice.reducer;

23
frontend/src/preferences/preferenceApi.ts
View File

@@ -33,6 +33,29 @@ export async function getDocs(): Promise<Doc[] | null> {
}
}
export async function getConversations(): Promise<
{ name: string; id: string }[] | null
> {
try {
const apiHost =
import.meta.env.VITE_API_HOST || 'https://docsapi.arc53.com';
const response = await fetch(apiHost + '/api/get_conversations');
const data = await response.json();
const conversations: { name: string; id: string }[] = [];
data.forEach((conversation: object) => {
conversations.push(conversation as { name: string; id: string });
});
return conversations;
} catch (error) {
console.log(error);
return null;
}
}
export function getLocalApiKey(): string | null {
const key = localStorage.getItem('DocsGPTApiKey');
return key;

12
frontend/src/preferences/preferenceSlice.ts
View File

@@ -10,6 +10,7 @@ interface Preference {
apiKey: string;
selectedDocs: Doc | null;
sourceDocs: Doc[] | null;
conversations: { name: string; id: string }[] | null;
}
const initialState: Preference = {
@@ -26,6 +27,7 @@ const initialState: Preference = {
model: 'openai_text-embedding-ada-002',
} as Doc,
sourceDocs: null,
conversations: null,
};
export const prefSlice = createSlice({
@@ -41,10 +43,14 @@ export const prefSlice = createSlice({
setSourceDocs: (state, action) => {
state.sourceDocs = action.payload;
},
setConversations: (state, action) => {
state.conversations = action.payload;
},
},
});
export const { setApiKey, setSelectedDocs, setSourceDocs } = prefSlice.actions;
export const { setApiKey, setSelectedDocs, setSourceDocs, setConversations } =
prefSlice.actions;
export default prefSlice.reducer;
export const prefListenerMiddleware = createListenerMiddleware();
@@ -74,3 +80,7 @@ export const selectSourceDocs = (state: RootState) =>
state.preference.sourceDocs;
export const selectSelectedDocs = (state: RootState) =>
state.preference.selectedDocs;
export const selectConversations = (state: RootState) =>
state.preference.conversations;
export const selectConversationId = (state: RootState) =>
state.conversation.conversationId;