Add a unique_id field for identifiying conversations (#914)

* Add a unique_id field to the conversation object

- This helps us keep track of the unique identity of the conversation without expose the internal id
- Create three staged migrations in order to first add the field, then add unique values to pre-fill, and then set the unique constraint. Without this, it tries to initialize all the existing conversations with the same ID.

* Parse and utilize the unique_id field in the query parameters of the front-end view

- Handle the unique_id field when creating a new conversation from the home page
- Parse the id field with a lightweight parameter called v in the chat page
- Share page should not be affected, as it uses the public slug

* Fix suggested card category

src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx

@@ -67,7 +67,9 @@ interface ChatHistory {
     compressed: boolean;
     created: string;
     updated: string;
+    unique_id: string;
     showSidePanel: (isEnabled: boolean) => void;
+    selectedConversationId: string | null;
 }
 
 import {
@@ -398,6 +400,7 @@ interface SessionsAndFilesProps {
     conversationId: string | null;
     uploadedFiles: string[];
     isMobileWidth: boolean;
+    selectedConversationId: string | null;
 }
 
 function SessionsAndFiles(props: SessionsAndFilesProps) {
@@ -435,6 +438,10 @@ function SessionsAndFiles(props: SessionsAndFilesProps) {
                                                         agent_avatar={chatHistory.agent_avatar}
                                                         agent_name={chatHistory.agent_name}
                                                         showSidePanel={props.setEnabled}
+                                                        unique_id={chatHistory.unique_id}
+                                                        selectedConversationId={
+                                                            props.selectedConversationId
+                                                        }
                                                     />
                                                 ),
                                             )}
@@ -446,6 +453,7 @@ function SessionsAndFiles(props: SessionsAndFilesProps) {
                     <ChatSessionsModal
                         data={props.organizedData}
                         showSidePanel={props.setEnabled}
+                        selectedConversationId={props.selectedConversationId}
                     />
                 )}
             </div>
@@ -640,20 +648,18 @@ function ChatSessionActionMenu(props: ChatSessionActionMenuProps) {
 function ChatSession(props: ChatHistory) {
     const [isHovered, setIsHovered] = useState(false);
     const [title, setTitle] = useState(props.slug || "New Conversation 🌱");
-    var currConversationId = parseInt(
-        new URLSearchParams(window.location.search).get("conversationId") || "-1",
-    );
+    var currConversationId =
+        props.conversation_id &&
+        props.selectedConversationId &&
+        parseInt(props.conversation_id) === parseInt(props.selectedConversationId);
     return (
         <div
             onMouseEnter={() => setIsHovered(true)}
             onMouseLeave={() => setIsHovered(false)}
             key={props.conversation_id}
-            className={`${styles.session} ${props.compressed ? styles.compressed : "!max-w-full"} ${isHovered ? `${styles.sessionHover}` : ""} ${currConversationId === parseInt(props.conversation_id) && currConversationId != -1 ? "dark:bg-neutral-800 bg-white" : ""}`}
+            className={`${styles.session} ${props.compressed ? styles.compressed : "!max-w-full"} ${isHovered ? `${styles.sessionHover}` : ""} ${currConversationId ? "dark:bg-neutral-800 bg-white" : ""}`}
         >
-            <Link
-                href={`/chat?conversationId=${props.conversation_id}`}
-                onClick={() => props.showSidePanel(false)}
-            >
+            <Link href={`/chat?v=${props.unique_id}`} onClick={() => props.showSidePanel(false)}>
                 <p className={styles.session}>{title}</p>
             </Link>
             <ChatSessionActionMenu conversationId={props.conversation_id} setTitle={setTitle} />
@@ -664,9 +670,14 @@ function ChatSession(props: ChatHistory) {
 interface ChatSessionsModalProps {
     data: GroupedChatHistory | null;
     showSidePanel: (isEnabled: boolean) => void;
+    selectedConversationId: string | null;
 }
 
-function ChatSessionsModal({ data, showSidePanel }: ChatSessionsModalProps) {
+function ChatSessionsModal({
+    data,
+    showSidePanel,
+    selectedConversationId,
+}: ChatSessionsModalProps) {
     return (
         <Dialog>
             <DialogTrigger className="flex text-left text-medium text-gray-500 hover:text-gray-300 cursor-pointer my-4 text-sm p-[0.5rem]">
@@ -698,6 +709,8 @@ function ChatSessionsModal({ data, showSidePanel }: ChatSessionsModalProps) {
                                                 agent_avatar={chatHistory.agent_avatar}
                                                 agent_name={chatHistory.agent_name}
                                                 showSidePanel={showSidePanel}
+                                                unique_id={chatHistory.unique_id}
+                                                selectedConversationId={selectedConversationId}
                                             />
                                         ))}
                                     </div>
@@ -819,6 +832,7 @@ export default function SidePanel(props: SidePanelProps) {
                                         userProfile={authenticatedData}
                                         conversationId={props.conversationId}
                                         isMobileWidth={props.isMobileWidth}
+                                        selectedConversationId={props.conversationId}
                                     />
                                 </div>
                             ) : (
@@ -887,6 +901,7 @@ export default function SidePanel(props: SidePanelProps) {
                         userProfile={authenticatedData}
                         conversationId={props.conversationId}
                         isMobileWidth={props.isMobileWidth}
+                        selectedConversationId={props.conversationId}
                     />
                 </div>
             )}

src/interface/web/app/components/suggestions/suggestionsData.ts

@@ -408,7 +408,7 @@ export const suggestionsData: Suggestion[] = [
         link: "",
     },
     {
-        type: SuggestionType.Code,
+        type: SuggestionType.Interviewing,
         color: suggestionToColorMap[SuggestionType.Interviewing] || DEFAULT_COLOR,
         description: "Provide tips for writing an effective resume.",
         link: "",