add new conversation icon in sidebar

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

Hide file tree

Showing 4 changed files with 42 additions and 14 deletions.
diff --git a/src/components/shared/Buttons/Button.tsx b/src/components/shared/Buttons/Button.tsx
@@ -2,6 +2,8 @@ import { ReactNode } from "react";
 
 import { addInlineStyle } from "src/addStyles";
 import style from "./buttons.scss?inline";
+import IconButton from "./IconButton";
+import clsx from "clsx";
 addInlineStyle(style);
 
 export interface ButtonProps
@@ -10,13 +12,17 @@ export interface ButtonProps
   children?: ReactNode;
   className?: string;
   variant?: "filled" | "contained" | "outlined" | "text" | "text-alt";
+  RightIconComponent?: React.FC<{ size: number }>;
+  showIconOnHover?: boolean;
 }
 
 const Button = ({
   // size = "medium",
   variant = "text",
   className = "",
   onClick,
+  RightIconComponent,
+  showIconOnHover,
   ...rest
 }: ButtonProps) => {
   const variantClasses = `button-${variant?.toLowerCase()}`;
@@ -25,9 +31,23 @@ const Button = ({
     <button
       {...rest}
       onMouseDown={onClick}
-      className={variantClasses + " " + className}
+      className={variantClasses + " pos-relative " + 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>
+      )}
     </button>
   );
 };

diff --git a/src/components/shared/Buttons/buttons.scss b/src/components/shared/Buttons/buttons.scss
@@ -15,11 +15,18 @@ button {
   color: $almost-black;
   width: fit-content;
 }
+
 button:disabled {
   color: $muted !important;
   fill: $light;
   cursor: unset;
 }
+button .icon-hover {
+  opacity: 0;
+}
+button:hover .icon-hover {
+  opacity: 1;
+}
 
 // Variant - FILED
 .button-filled {

diff --git a/src/components/shared/Layout/SideNavbar.tsx b/src/components/shared/Layout/SideNavbar.tsx
@@ -5,10 +5,10 @@ import Button from "../Buttons/Button";
 import clsx from "clsx";
 import { Conversation } from "src/contexts/ConversationLayer";
 import React from "react";
-import { CHAT_INPUT_ID } from "src/widgets/copilot/components/ChatInput";
 import IconClose from "src/assets/SvgIcons/IconClose";
 import IconCollapse from "src/assets/SvgIcons/IconCollapse";
 import IconExpand from "src/assets/SvgIcons/IconExpand";
+import IconPencilEdit from "src/assets/SvgIcons/PencilEdit";
 
 // eslint-disable-next-line react-refresh/only-export-components
 export const toggleSidebarStyles = (isSidebarOpen: boolean) => {
@@ -173,15 +173,10 @@ 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"
-              onClick={() => {
-                handleNewConversation();
-                const shadowRoot = document.querySelector(
-                  (config?.target || "") as string
-                )?.firstElementChild?.shadowRoot;
-                const ele = shadowRoot?.getElementById(CHAT_INPUT_ID);
-                ele?.focus();
-              }}
+              className="w-100 d-flex pos-relative"
+              onClick={handleNewConversation}
+              RightIconComponent={IconPencilEdit}
+              showIconOnHover
             >
               <div
                 className="bot-avatar bg-primary gmr-12"
@@ -198,7 +193,7 @@ const SideNavbar = () => {
                   }}
                 />
               </div>
-              <p className="font_16_600">{branding?.name}</p>
+              <p className="font_16_600 text-left">{branding?.name}</p>
             </Button>
           </div>
 

diff --git a/src/contexts/MessagesContext.tsx b/src/contexts/MessagesContext.tsx
@@ -13,6 +13,7 @@ import useConversations, {
   updateLocalUser,
   USER_ID_LS_KEY,
 } from "./ConversationLayer";
+import { CHAT_INPUT_ID } from "src/widgets/copilot/components/ChatInput";
 
 interface IncomingMsg {
   input_text?: string;
@@ -36,6 +37,7 @@ export const MessagesContext: any = createContext({});
 const MessagesContextProvider = (props: any) => {
   const currentUserId = localStorage.getItem(USER_ID_LS_KEY) || "";
   const config = useSystemContext()?.config;
+  const layoutController = useSystemContext()?.layoutController;
   const { conversations, handleAddConversation } = useConversations(
     currentUserId,
     config?.integration_id as string
@@ -226,6 +228,10 @@ const MessagesContextProvider = (props: any) => {
       handleAddConversation(Object.assign({}, currentConversation.current));
     }
     if (isReceiving || isSending) cancelApiCall();
+    if (layoutController?.isMobile && layoutController?.isSidebarOpen)
+      layoutController?.toggleSidebar();
+    const ele = gooeyShadowRoot?.getElementById(CHAT_INPUT_ID);
+    ele?.focus();
     setIsReceiving(false);
     setIsSendingMessage(false);
     purgeMessages();
@@ -305,7 +311,7 @@ const MessagesContextProvider = (props: any) => {
         currentConversation.current?.id === conversation.id
       )
         return setMessagesLoading(false);
-      setPreventAutoplay(true)
+      setPreventAutoplay(true);
       setMessagesLoading(true);
       const messages = await conversation.getMessages();
       preLoadData(messages);
@@ -319,7 +325,7 @@ const MessagesContextProvider = (props: any) => {
 
   useEffect(() => {
     // Load the latest conversation from DB
-    setPreventAutoplay(true)
+    setPreventAutoplay(true);
     if (!config?.enableConversations && conversations.length)
       setActiveConversation(conversations[0]);
     else setMessagesLoading(false);