set title to first user query

GooeyAI · Sep 3, 2024 · f1b4eb6 · f1b4eb6
1 parent 0ad2d37
commit f1b4eb6
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 42 deletions.
diff --git a/src/components/shared/Buttons/Button.tsx b/src/components/shared/Buttons/Button.tsx
@@ -14,6 +14,7 @@ export interface ButtonProps
   variant?: "filled" | "contained" | "outlined" | "text" | "text-alt";
   RightIconComponent?: React.FC<{ size: number }>;
   showIconOnHover?: boolean;
+  hideOverflow?: boolean;
 }
 
 const Button = ({
@@ -23,6 +24,7 @@ const Button = ({
   onClick,
   RightIconComponent,
   showIconOnHover,
+  hideOverflow,
   ...rest
 }: ButtonProps) => {
   const variantClasses = `button-${variant?.toLowerCase()}`;
@@ -31,23 +33,29 @@ const Button = ({
     <button
       {...rest}
       onMouseDown={onClick}
-      className={variantClasses + " pos-relative " + className}
+      className={variantClasses + " " + className}
     >
-      {rest.children}
-      {RightIconComponent && (
-        <div
-          className={clsx("pos-absolute", showIconOnHover && "icon-hover")}
-          style={{
-            top: "50%",
-            right: 0,
-            transform: "translateY(-50%)",
-          }}
-        >
-          <IconButton className="text-muted" disabled>
-            <RightIconComponent size={18} />
-          </IconButton>
-        </div>
-      )}
+      <div
+        className={clsx(
+          "pos-relative w-100 h-100",
+          hideOverflow && "btn-hide-overflow"
+        )}
+      >
+        {rest.children}
+        {RightIconComponent && (
+          <div
+            className={clsx(
+              "btn-icon right-icon",
+              showIconOnHover && "icon-hover"
+            )}
+          >
+            <IconButton className="text-muted gp-4" disabled>
+              <RightIconComponent size={18} />
+            </IconButton>
+          </div>
+        )}
+        {hideOverflow && <div className="button-right-blur" />}
+      </div>
     </button>
   );
 };

diff --git a/src/components/shared/Buttons/buttons.scss b/src/components/shared/Buttons/buttons.scss
@@ -21,14 +21,30 @@ button:disabled {
   fill: $light;
   cursor: unset;
 }
+
+button .btn-icon {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 0;
+  z-index: 2;
+}
+
 button .icon-hover {
   opacity: 0;
 }
+
+button .btn-hide-overflow p {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 button:hover .icon-hover {
   opacity: 1;
 }
 
-// Variant - FILED
+// Variant - FILLED
 .button-filled {
   background-color: #eee;
 }

diff --git a/src/components/shared/Layout/SideNavbar.tsx b/src/components/shared/Layout/SideNavbar.tsx
@@ -173,27 +173,32 @@ const SideNavbar = () => {
         <div className="overflow-y-auto pos-relative h-100">
           <div className="d-flex flex-col gp-8">
             <Button
-              className="w-100 d-flex pos-relative"
+              className="w-100 pos-relative"
               onClick={handleNewConversation}
               RightIconComponent={IconPencilEdit}
-              showIconOnHover
             >
-              <div
-                className="bot-avatar bg-primary gmr-12"
-                style={{ width: "24px", height: "24px", borderRadius: "100%" }}
-              >
-                <img
-                  src={branding?.photoUrl}
-                  alt="bot-avatar"
+              <div className="d-flex align-center">
+                <div
+                  className="bot-avatar bg-primary gmr-12"
                   style={{
                     width: "24px",
                     height: "24px",
                     borderRadius: "100%",
-                    objectFit: "cover",
                   }}
-                />
+                >
+                  <img
+                    src={branding?.photoUrl}
+                    alt="bot-avatar"
+                    style={{
+                      width: "24px",
+                      height: "24px",
+                      borderRadius: "100%",
+                      objectFit: "cover",
+                    }}
+                  />
+                </div>
+                <p className="font_16_600 text-left">{branding?.name}</p>
               </div>
-              <p className="font_16_600 text-left">{branding?.name}</p>
             </Button>
           </div>
 
@@ -243,23 +248,22 @@ const ConversationButton: React.FC<{
   isActive: boolean;
   onClick: () => void;
 }> = React.memo(({ conversation, isActive, onClick }) => {
-  const lastMessage =
-    conversation?.messages?.[conversation.messages.length - 1];
   // use timestamp in day, time format for title if no message is present
-  const tempTitle = lastMessage?.title
-    ? lastMessage.title
-    : new Date(conversation.timestamp as string).toLocaleString("default", {
-        day: "numeric",
-        month: "short",
-        hour: "numeric",
-        minute: "numeric",
-        hour12: true,
-      });
+  const tempTitle =
+    conversation?.title ||
+    new Date(conversation.timestamp as string).toLocaleString("default", {
+      day: "numeric",
+      month: "short",
+      hour: "numeric",
+      minute: "numeric",
+      hour12: true,
+    });
   return (
     <Button
-      className="w-100 d-flex gp-8 gmb-6"
+      className="w-100 gp-8 gmb-6 text-left"
       variant={isActive ? "filled" : "text-alt"}
       onClick={onClick}
+      hideOverflow
     >
       <p className="font_14_400">{tempTitle}</p>
     </Button>

diff --git a/src/contexts/ConversationLayer.tsx b/src/contexts/ConversationLayer.tsx
@@ -21,6 +21,11 @@ export const updateLocalUser = (userId: string) => {
   }
 };
 
+const getConversationTitle = (conversation: Conversation) => {
+  console.log(conversation?.messages?.[0]?.input_prompt);
+  return conversation?.messages?.[0]?.input_prompt;
+};
+
 const initDB = (dbName: string) => {
   return new Promise<IDBDatabase>((resolve, reject) => {
     const request = indexedDB.open(dbName, 1);
@@ -76,6 +81,7 @@ const fetchAllConversations = (
         )
         .map((conversation: Conversation) => {
           const conversationCopy = Object.assign({}, conversation);
+          conversationCopy.title = getConversationTitle(conversation);
           delete conversationCopy.messages; // reduce memory usage
           conversationCopy.getMessages = async () => {
             const _c = await fetchConversation(db, conversation.id as string);
@@ -138,7 +144,11 @@ export const useConversations = (user_id: string, bot_id: string) => {
 
     const db = await initDB(DB_NAME);
     await addConversation(db, c);
-    const updatedConversations = await fetchAllConversations(db, user_id, bot_id);
+    const updatedConversations = await fetchAllConversations(
+      db,
+      user_id,
+      bot_id
+    );
     setConversations(updatedConversations);
   };