Merge pull request #12 from GooeyAI/reduced_buttons

Reduced buttons
GooeyAI · Dec 23, 2024 · b119491 · b119491
2 parents 44a5168 + 542e13c
commit b119491
Show file tree

Hide file tree

Showing 15 changed files with 256 additions and 257 deletions.
diff --git a/dist/lib.js b/dist/lib.js
diff --git a/src/assets/SvgIcons/IconChevronDown.tsx b/src/assets/SvgIcons/IconChevronDown.tsx
@@ -0,0 +1,22 @@
+import SvgIcon from "src/components/shared/SvgIcon";
+
+const IconChevronDown = (props: any) => {
+  const size = props.size || 16;
+  return (
+    <SvgIcon>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 512 512"
+        width={size}
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        height={size}
+      >
+        <path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z" />
+      </svg>
+    </SvgIcon>
+  );
+};
+
+export default IconChevronDown;
diff --git a/src/components/shared/Layout/AppLayout.tsx b/src/components/shared/Layout/AppLayout.tsx
@@ -1,6 +1,5 @@
 import clsx from "clsx";
-import { useMessagesContext, useSystemContext } from "src/contexts/hooks";
-import { CHAT_INPUT_ID } from "src/widgets/copilot/components/ChatInput";
+import { useSystemContext } from "src/contexts/hooks";
 import Header from "src/widgets/copilot/components/Header";
 
 import { addInlineStyle } from "src/addStyles";
@@ -52,13 +51,6 @@ const ClickAwayListener = ({ onClick, children }: any) => {
 
 const AppLayout = ({ children }: Props) => {
   const { config, layoutController } = useSystemContext();
-  const { handleNewConversation }: any = useMessagesContext();
-
-  const handleEditClick = () => {
-    handleNewConversation();
-    const ele = gooeyShadowRoot?.getElementById(CHAT_INPUT_ID);
-    ele?.focus();
-  };
 
   return (
     <div
@@ -78,7 +70,7 @@ const AppLayout = ({ children }: Props) => {
           <ClickAwayListener onClick={layoutController?.toggleSidebar} />
         )}
         <main className="pos-relative d-flex flex-1 flex-col align-center overflow-hidden h-100 bg-white">
-          <Header onEditClick={handleEditClick} />
+          <Header />
           <div
             style={{ maxWidth: `${CHAT_WINDOW_WIDTH}px`, height: "100%" }}
             className="d-flex flex-col flex-1 gp-0 w-100 overflow-hidden bg-white w-100"

diff --git a/src/components/shared/Layout/SideNavbar.tsx b/src/components/shared/Layout/SideNavbar.tsx
@@ -5,9 +5,6 @@ import Button from "../Buttons/Button";
 import clsx from "clsx";
 import { Conversation } from "src/contexts/ConversationLayer";
 import React from "react";
-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";
 import GooeyTooltip from "../Tooltip";
 
@@ -41,7 +38,7 @@ const SideNavbar = () => {
 
     conversations.forEach((conversation: Conversation) => {
       const lastMessageTimestamp = new Date(
-        conversation.timestamp as string
+        conversation.timestamp as string,
       ).getTime();
       let subheading: string;
 
@@ -64,7 +61,7 @@ const SideNavbar = () => {
           "default",
           {
             month: "long",
-          }
+          },
         );
         if (!grouped.Months[monthName]) {
           grouped.Months[monthName] = [];
@@ -80,7 +77,7 @@ const SideNavbar = () => {
       ([monthName, conversations]) => ({
         subheading: monthName,
         conversations,
-      })
+      }),
     );
 
     // Combine all groups into a single array
@@ -123,43 +120,6 @@ const SideNavbar = () => {
         {/* Header */}
         <div className="gp-8 b-btm-1 h-header d-flex align-center">
           {/* Close / minimize button */}
-          {layoutController?.showCloseButton && layoutController?.isMobile && (
-            <GooeyTooltip text="Close" direction="bottom">
-              <IconButton
-                variant="text"
-                className="gp-4 cr-pointer"
-                onClick={layoutController?.toggleOpenClose}
-              >
-                <IconClose size={24} />
-              </IconButton>
-            </GooeyTooltip>
-          )}
-          {/* Focus mode button */}
-          {layoutController?.showFocusModeButton &&
-            layoutController?.isMobile && (
-              <GooeyTooltip
-                text={
-                  layoutController?.isFocusMode
-                    ? "Disable Focus"
-                    : "Enable Focus"
-                }
-                direction="bottom"
-              >
-                <IconButton
-                  variant="text"
-                  className="gp-8"
-                  onClick={layoutController?.toggleFocusMode}
-                  style={{ transform: "rotate(90deg)", height: "38px" }}
-                >
-                  {layoutController?.isFocusMode ? (
-                    <IconCollapse size={16} />
-                  ) : (
-                    <IconExpand size={16} />
-                  )}
-                </IconButton>
-              </GooeyTooltip>
-            )}
-
           {/* Sidebar button */}
           <GooeyTooltip text="Close sidebar" direction="right">
             <IconButton

diff --git a/src/contexts/MessagesContext.tsx b/src/contexts/MessagesContext.tsx
@@ -231,11 +231,11 @@ const MessagesContextProvider = (props: any) => {
     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();
+    const ele = gooeyShadowRoot?.getElementById(CHAT_INPUT_ID);
+    ele?.focus();
   };
 
   const purgeMessages = () => {
@@ -332,16 +332,21 @@ const MessagesContextProvider = (props: any) => {
       // Load the latest conversation from DB
       setActiveConversation(conversations[0]);
     else setMessagesLoading(false);
-    setTimeout(() => {
-      setPreventAutoplay(false);
-    }, 3000);
+    avoidAutoplay();
   }, [
     config,
     conversations,
     layoutController?.showNewConversationButton,
     setActiveConversation,
   ]);
 
+  const avoidAutoplay = () => {
+    setPreventAutoplay(true);
+    setTimeout(() => {
+      setPreventAutoplay(false);
+    }, 3000);
+  };
+
   const valueMessages = {
     sendPrompt,
     messages,
@@ -358,6 +363,7 @@ const MessagesContextProvider = (props: any) => {
     currentConversationId: currentConversation.current?.id || null,
     isMessagesLoading,
     preventAutoplay,
+    avoidAutoplay,
   };
 
   return (

diff --git a/src/contexts/SystemContext.tsx b/src/contexts/SystemContext.tsx
@@ -44,8 +44,8 @@ interface LayoutController extends LayoutStateType {
 type LayoutStateType = {
   isOpen: boolean;
   isFocusMode: boolean;
-  isInline: boolean;
-  isMobile: boolean;
+  isInline: boolean; // true - when widget is mounted in fullscreen / inline mode
+  isMobile: boolean; // true - when widget is <= mobile
 
   isSidebarOpen: boolean;
   isSecondaryDrawerOpen: boolean;

diff --git a/src/css/App.css b/src/css/App.css
@@ -56,20 +56,6 @@ ul {
   text-decoration-thickness: 2px;
 }
 
-.gooey-embed-container .gooey-link {
-  color: inherit;
-  text-decoration: underline;
-  text-decoration-color: rgba(0, 0, 0, 0.45);
-  text-decoration-thickness: 0.6px;
-  text-underline-offset: 0.15em;
-}
-
-.gooey-embed-container .gooey-link:hover {
-  color: inherit;
-  text-decoration-color: black;
-  text-decoration-thickness: 2px;
-}
-
 div:focus-visible {
   outline: none;
 }
@@ -94,6 +80,7 @@ code[class*="language-"] {
   color: inherit;
   white-space: pre-wrap;
   word-wrap: break-word;
+  max-width: 100%;
 }
 
 pre,
@@ -109,5 +96,4 @@ pre[class*="language-"] {
 
 svg {
   fill: currentColor;
-}
-
+}
diff --git a/src/css/_extra.scss b/src/css/_extra.scss
@@ -122,6 +122,7 @@
 .b-lt-1 {
   border-left: 1px solid $border-color;
 }
+
 .b-none {
   border: none !important;
 }
@@ -180,6 +181,9 @@
 .h-header {
   height: 56px;
 }
+.mw-100 {
+  max-width: 100%;
+}
 @media (max-width: 1100px) {
   .xs-text-center {
     text-align: center;

diff --git a/src/main.tsx b/src/main.tsx
@@ -1,4 +1,4 @@
 import GooeyEmbed from "src/lib.tsx";
 
-GooeyEmbed.mount({ target: "#popup", integration_id: "MqL", mode: "popup" });
-GooeyEmbed.mount({ target: "#inline", integration_id: "MqL", mode: "inline" });
+GooeyEmbed.mount({ target: "#popup", integration_id: "4rv", mode: "popup" });
+GooeyEmbed.mount({ target: "#inline", integration_id: "4rv", mode: "inline" });