Skip to content

Commit

Permalink
Merge branch 'chat' into dev
Browse files Browse the repository at this point in the history
  • Loading branch information
@serefyarar
serefyarar committed Jun 17, 2024
2 parents 586396a + 26a136c commit 703b586
Show file tree
Hide file tree
Showing 9 changed files with 214 additions and 113 deletions.
0 web-app/src/app/[id]/app.css → web-app/src/app/[...id]/app.css
View file
File renamed without changes.
4 changes: 4 additions & 0 deletions web-app/src/app/[id]/page.tsx → web-app/src/app/[...id]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import UserConversationSection from "components/sections/UserConversation";
import "./app.css";
import { useEffect } from "react";
import { useAuth } from "@/context/AuthContext";
import ConversationSection from "@/components/sections/Conversation";

const Discovery = () => {
const { discoveryType } = useApp();
Expand Down Expand Up @@ -56,6 +57,9 @@ const Discovery = () => {

return (
<DiscoveryLayout>
{discoveryType === DiscoveryType.CONVERSATION && (
<UserConversationSection />
)}
{discoveryType === DiscoveryType.DID && <UserConversationSection />}
{discoveryType === DiscoveryType.INDEX && <IndexConversationSection />}
</DiscoveryLayout>
Expand Down
29 changes: 29 additions & 0 deletions web-app/src/components/sections/Conversation.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { useApp } from "@/context/AppContext";
import AskIndexes from "components/site/indexes/AskIndexes";
import { useRouteParams } from "hooks/useRouteParams";

export default function ConversationSection() {
return (
<div
style={{
display: "flex",
justifyContent: "center",
height: "100%",
}}
>
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "start",
flex: 1,
overflowY: "auto",
maxHeight: "calc(100dvh - 12em)",
height: "100%",
}}
>
<AskIndexes />
</div>
</div>
);
}
11 changes: 1 addition & 10 deletions web-app/src/components/sections/UserConversation.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,6 @@
import { useApp } from "@/context/AppContext";
import AskIndexes from "components/site/indexes/AskIndexes";
import { useRouteParams } from "hooks/useRouteParams";

export default function UserConversationSection() {
const { id } = useRouteParams();
const { chatID } = useApp();

if (!chatID || !id) {
return null;
}

return (
<div
style={{
Expand All @@ -29,7 +20,7 @@ export default function UserConversationSection() {
height: "100%",
}}
>
<AskIndexes chatID={chatID} sources={[id]} />
<AskIndexes />
</div>
</div>
);
Expand Down
137 changes: 79 additions & 58 deletions web-app/src/components/site/indexes/AskIndexes/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,34 +26,37 @@ import {
useRef,
useState,
} from "react";
import { API_ENDPOINTS } from "utils/constants";
import { maskDID } from "utils/helper";
import { generateId } from "ai";
import NoIndexes from "../NoIndexes";
import { useRouter } from "next/navigation";
import { API_ENDPOINTS } from "@/utils/constants";

export interface ChatProps extends ComponentProps<"div"> {
initialMessages?: Message[];
id?: string;
}

export interface AskIndexesProps {
chatID: string;
sources?: string[];
}
export interface AskIndexesProps {}

export interface MessageWithIndex extends Message {
index?: number;
}

const AskIndexes: FC<AskIndexesProps> = ({ chatID, sources }) => {
const { viewedProfile, leftSectionIndexes, leftTabKey } = useApp();

const AskIndexes: FC<AskIndexesProps> = () => {
const { session } = useAuth();
const { viewedIndex } = useApp();
const {
leftSectionIndexes,
leftTabKey,
viewedProfile,
viewedIndex,
setViewedConversation,
viewedConversation,
} = useApp();
const { isIndex, id, discoveryType } = useRouteParams();
const { ready: apiReady, api } = useApi();

const [conversation, setConversation] = useState<Message[]>([]);
const router = useRouter();
const [messages, setMessages] = useState<Message[]>([]);
const [stoppedMessages, setStoppedMessages] = useState<string[]>([]);
const [deletedMessages, setDeletedMessages] = useState<string[]>([]);

Expand Down Expand Up @@ -104,53 +107,65 @@ const AskIndexes: FC<AskIndexesProps> = ({ chatID, sources }) => {
content: message,
role: "user",
});

setConversation((prevConversation) =>
prevConversation.map((m) =>
m.id === newMessage.id ? { ...m, id: response.id } : m,
),
);
currentConv.messages = [messageResp];
setViewedConversation(currentConv);
router.push(`/conversation/${currentConv.id}`);
} catch (error) {
console.error("Error sending message", error);
}
},
[apiReady, api, isLoading, chatID],
[viewedConversation, apiReady, api, isLoading],
);

const updateMessage = useCallback(
async (messageId: string, message: string) => {
if (!viewedConversation) return;
if (!apiReady || isLoading) return;
try {
await api!.updateMessage(
chatID,
messageId,
{
role: "user",
content: message,
},
true,
);
} catch (error) {
console.error("Error sending message", error);
const newMessage: Message = {
id: generateId(),
role: "user",
content: message,
};
setMessages((prevMessages) => {
return [...prevMessages, newMessage];
});

let currentConv = viewedConversation;
if (!currentConv) {
currentConv = await api!.createConversation({
sources: [
"did:pkh:eip155:1:0x1b9Aceb609a62bae0c0a9682A9268138Faff4F5f",
],
});
}
const messageResp = await api!.sendMessage(currentConv.id, {
content: message,
role: "user",
});
currentConv.messages.push(messageResp);
setViewedConversation(currentConv);
router.push(`/conversation/${currentConv.id}`);
} catch (e) {
console.error("Error sending message", e);
}
},
[apiReady, api, id, isIndex, conversation, isLoading],
[apiReady, api, id, isIndex, viewedConversation, isLoading],
);

const getConversation = useCallback(async () => {
if (!apiReady || !chatID) return;
setIsLoading(true);
const response = await api!.getConversation(chatID);
setConversation(response.messages);
setIsLoading(false);
}, [apiReady, api, chatID]);
useEffect(() => {
getConversation();
}, [getConversation, chatID]);
useEffect(() => {
fetchDefaultQuestions();
}, [fetchDefaultQuestions]);

useEffect(() => {
if (viewedConversation && viewedConversation.messages) {
setMessages(viewedConversation.messages);
console.log(`messageedit`);
} else {
setMessages([]);
}
}, [viewedConversation]);

const handleEditClick = (message: Message, indexOfMessage: number) => {
setEditingMessage(message);
setEditingIndex(indexOfMessage);
Expand All @@ -177,7 +192,7 @@ const AskIndexes: FC<AskIndexesProps> = ({ chatID, sources }) => {
setEditingMessage(undefined);
setEditInput("");
setIsLoading(false);
setConversation([...messagesBeforeEdit, newMessage]);
setMessages([...messagesBeforeEdit, newMessage]);

await updateMessage(editingMessage.id, editInput); // TODO
} catch (error: any) {
Expand Down Expand Up @@ -285,12 +300,12 @@ const AskIndexes: FC<AskIndexesProps> = ({ chatID, sources }) => {

useEffect(() => {
scrollToBottom();
}, [conversation, isLoading, scrollToBottom]);
}, [viewedConversation, isLoading, scrollToBottom]);

const stop = () => {
setIsLoading(false);
// TODO send stop signal to backend.
setStoppedMessages(conversation.map((c) => c.id));
setStoppedMessages(messages.map((c) => c.id));
};

const handleMessage = (data: any) => {
Expand All @@ -311,7 +326,7 @@ const AskIndexes: FC<AskIndexesProps> = ({ chatID, sources }) => {
}

setIsLoading(true);
setConversation((prevConversation) => {
setMessages((prevConversation) => {
let streamingMessage = prevConversation.find(
(c) => c.id === payload.data.messageId,
);
Expand All @@ -335,13 +350,13 @@ const AskIndexes: FC<AskIndexesProps> = ({ chatID, sources }) => {
: message,
);
}

return prevConversation;
});
};

useEffect(() => {
const eventUrl = `${process.env.NEXT_PUBLIC_API_URL!}${API_ENDPOINTS.CONVERSATION_UPDATES.replace(":conversationId", chatID)}?session=${session?.serialize()}`;
if (!viewedConversation) return;
const eventUrl = `${process.env.NEXT_PUBLIC_API_URL!}${API_ENDPOINTS.CONVERSATION_UPDATES.replace(":conversationId", viewedConversation.id)}?session=${session?.serialize()}`;
const eventSource = new EventSource(eventUrl);
eventSource.onmessage = (event) => {
console.log("Received message from server", event.data);
Expand All @@ -354,20 +369,23 @@ const AskIndexes: FC<AskIndexesProps> = ({ chatID, sources }) => {
return () => {
eventSource.close();
};
}, [stoppedMessages, deletedMessages, chatID, API_ENDPOINTS]);
}, [stoppedMessages, deletedMessages, viewedConversation, API_ENDPOINTS]);

if (leftSectionIndexes.length === 0) {
return <NoIndexes tabKey={leftTabKey} />;
// return <NoIndexes tabKey={leftTabKey} />;
}

return (
<>
<Flex
id={chatID}
key={chatID}
id={`chatID`}
key={`chatID`}
className={
sources &&
sources?.filter((source) => !source.includes("did:")).length > 0
viewedConversation &&
viewedConversation.sources &&
viewedConversation.sources?.filter(
(source) => !source.includes("did:"),
).length > 0
? "px-0 pt-7"
: "px-md-10 px-4 pt-7"
}
Expand All @@ -391,10 +409,10 @@ const AskIndexes: FC<AskIndexesProps> = ({ chatID, sources }) => {
flexDirection: "column",
}}
>
{conversation.length ? (
{viewedConversation && viewedConversation.messages.length ? (
<>
<ChatList
messages={conversation}
messages={messages}
handleEditClick={handleEditClick}
editingMessage={editingMessage}
setEditInput={setEditInput}
Expand All @@ -418,9 +436,12 @@ const AskIndexes: FC<AskIndexesProps> = ({ chatID, sources }) => {
<EmptyScreen
contextMessage={getChatContextMessage()}
setInput={setInput}
indexIds={sources?.filter(
(source) => !source.includes("did:"),
)}
indexIds={
viewedConversation &&
viewedConversation.sources?.filter(
(source) => !source.includes("did:"),
)
}
defaultQuestions={defaultQuestions}
/>
</Flex>
Expand All @@ -438,7 +459,7 @@ const AskIndexes: FC<AskIndexesProps> = ({ chatID, sources }) => {
stop={stop}
reload={regenerateMessage}
// reload={reload}
messages={conversation}
messages={messages}
/>
</FlexRow>
<FlexRow fullWidth className={"idxflex-grow-1"} colGap={0}>
Expand Down
Loading

0 comments on commit 703b586

Please sign in to comment.