Merge branch 'new-session-flow' into dev

web-app/src/components/sections/IndexConversation/TabContainer/AccessControlTab.tsx

@@ -9,13 +9,15 @@ import { IndexLink } from "@/types/entity";
 import FlexRow from "@/components/layout/base/Grid/FlexRow";
 import Col from "@/components/layout/base/Grid/Col";
 import Soon from "@/components/site/indexes/Soon";
+import { useIndexConversation } from "../IndexConversationContext";
 
-export default function AccessControlTabSection({ noLinks }: { noLinks?: boolean }) {
+export default function AccessControlTabSection() {
   const { id: indexID } = useRouteParams();
   // const [links, setLinks] = useState<IndexLink[]>([]);
   const { isOwner } = useRole();
   const { apiService: api } = useApi();
   const { viewedIndex } = useApp();
+  const { itemsState } = useIndexConversation();
 
   // const loadLinks = useCallback(async () => {
   //   // Logic to load chat links and update state

web-app/src/components/sections/IndexConversation/TabContainer/ChatTab.tsx

@@ -1,14 +1,12 @@
 import React from "react";
 import AskIndexes from "@/components/site/indexes/AskIndexes";
 import { useApp } from "@/components/site/context/AppContext";
-import { useRouteParams } from "@/hooks/useRouteParams";
 import { useIndexConversation } from "../IndexConversationContext";
 import LoadingSection from "../../Loading";
 import { EmptyScreen } from "@/components/ai/empty-screen";
 
 export default function ChatTabSection() {
-  const { id: indexID } = useRouteParams();
-  const { viewedIndex } = useApp();
+  const { viewedIndex, chatID } = useApp();
   const { itemsState, loading: indexLoading } = useIndexConversation();
 
   if (indexLoading) {
@@ -28,7 +26,9 @@ export default function ChatTabSection() {
   }
 
   if (itemsState.items.length > 0) {
-    return <AskIndexes id={indexID} indexes={[viewedIndex?.id!]} />;
+    return chatID ? (
+      <AskIndexes chatID={chatID} indexes={[viewedIndex?.id!]} />
+    ) : null;
   } else {
     return <EmptyScreen setInput={() => {}} contextMessage="your responses" />;
   }

web-app/src/components/sections/IndexConversation/TabContainer/IndexTab.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from "react";
+import { useCallback, useState } from "react";
 import SearchInput from "@/components/base/SearchInput";
 import Col from "@/components/layout/base/Grid/Col";
 import FlexRow from "@/components/layout/base/Grid/FlexRow";
@@ -16,7 +16,7 @@ export default function IndexTabSection() {
     useIndexConversation();
   const { isCreator } = useRole();
   const { apiService: api } = useApi();
-  const [search, setSearch] = React.useState("");
+  const [search, setSearch] = useState("");
 
   const { viewedIndex } = useApp();
 
@@ -66,11 +66,6 @@ export default function IndexTabSection() {
     [api, viewedIndex, setItemsState, setLoading],
   );
 
-  // useEffect(() => {
-  //   // Assuming there's a fetch function to initially load items or based on search
-  //   // loadItems(); // Load initial items or based on search criteria
-  // }, [search, viewedIndex, loadMoreItems]);
-
   return (
     <Flex flexdirection="column" className="idxflex-grow-1">
       <FlexRow className={"mt-6"}>

web-app/src/components/sections/UserConversation.tsx

@@ -1,18 +1,14 @@
-import React, { useEffect, useState } from "react";
-
 import AskIndexes from "components/site/indexes/AskIndexes";
 import { useRouteParams } from "hooks/useRouteParams";
-import { v4 as uuidv4 } from "uuid";
-// import { createHash } from "crypto";
+import { useApp } from "../site/context/AppContext";
 
 export default function UserConversationSection() {
-  const [chatId, setChatID] = useState<string>(uuidv4());
   const { id } = useRouteParams();
+  const { chatID } = useApp();
 
-  // useEffect(() => {
-  //   const suffix = createHash("sha256").update(id).digest("hex");
-  //   setChatID(`${localStorage.getItem("chatterID")}-${suffix}`);
-  // }, [id]);
+  if (!chatID) {
+    return null;
+  }
 
-  return <AskIndexes id={chatId} did={id} />;
+  return <AskIndexes chatID={chatID} did={id} />;
 }

web-app/src/components/site/context/AppContext.tsx

@@ -61,6 +61,7 @@ export interface AppContextValue {
   fetchIndex: () => void;
   handleCreate: (title: string) => Promise<void>;
   handleTransactionCancel: () => void;
+  chatID: string | undefined;
 }
 
 export const AppContext = createContext<AppContextValue>({} as AppContextValue);
@@ -84,6 +85,7 @@ export const AppContextProvider = ({ children }: AppContextProviderProps) => {
   const [rightTabKey, setRightTabKey] = useState<TabKey>("history");
   const [leftTabKey, setLeftTabKey] = useState<TabKey>("all");
   const [loading, setLoading] = useState(false);
+  const [chatID, setChatID] = useState<string | undefined>(undefined);
 
   const discoveryType = useMemo(
     () => (id.includes("did:") ? DiscoveryType.did : DiscoveryType.index),
@@ -182,10 +184,15 @@ export const AppContextProvider = ({ children }: AppContextProviderProps) => {
   );
 
   useEffect(() => {
-    if (!localStorage.getItem("chatterID")) {
-      localStorage.setItem("chatterID", uuidv4());
-    }
-  }, [id]);
+    setChatID((prevChatID) => {
+      if (!prevChatID) {
+        const newChatID = uuidv4();
+        localStorage.setItem("chatterID", newChatID);
+        return newChatID;
+      }
+      return prevChatID;
+    });
+  }, []);
 
   useEffect(() => {
     // const determineDiscoveryType = () => {
@@ -256,6 +263,7 @@ export const AppContextProvider = ({ children }: AppContextProviderProps) => {
     handleCreate,
     loading,
     handleTransactionCancel,
+    chatID,
   };
 
   return (

web-app/src/components/site/indexes/AskIndexes/index.tsx

@@ -21,7 +21,7 @@ export interface ChatProps extends React.ComponentProps<"div"> {
   id?: string;
 }
 export interface AskIndexesProps {
-  id: string;
+  chatID: string;
   did?: string;
   indexes?: string[];
 }
@@ -30,7 +30,7 @@ export interface MessageWithIndex extends Message {
   index?: number;
 }
 
-const AskIndexes: React.FC<AskIndexesProps> = ({ id, did, indexes }) => {
+const AskIndexes: React.FC<AskIndexesProps> = ({ chatID, did, indexes }) => {
   // const index = useIndex();
   const { viewedProfile, indexes: indexesFromApp, discoveryType } = useApp();
 
@@ -62,7 +62,7 @@ const AskIndexes: React.FC<AskIndexesProps> = ({ id, did, indexes }) => {
       setEditingMessage(undefined);
       setEditInput("");
       await append({
-        id,
+        id: chatID,
         content: newMessage.content,
         role: "user",
       });
@@ -110,9 +110,9 @@ const AskIndexes: React.FC<AskIndexesProps> = ({ id, did, indexes }) => {
   } = useChat({
     api: apiUrl,
     initialMessages,
-    id,
+    id: chatID,
     body: {
-      id,
+      id: chatID,
       did,
       indexes,
     },
@@ -137,8 +137,8 @@ const AskIndexes: React.FC<AskIndexesProps> = ({ id, did, indexes }) => {
   return (
     <>
       <Flex
-        id={id}
-        key={id}
+        id={chatID}
+        key={chatID}
         className={
           indexes
             ? "scrollable-area px-0 pt-7"
@@ -218,7 +218,7 @@ const AskIndexes: React.FC<AskIndexesProps> = ({ id, did, indexes }) => {
               contextMessage={getChatContextMessage()}
               onSubmit={async (value) => {
                 await append({
-                  id,
+                  id: chatID,
                   content: value,
                   role: "user",
                 });