Merge pull request #5 from GooeyAI/new_layout_code

New layout code with sidebar

package.json

@@ -1,7 +1,7 @@
 {
   "name": "gooey-chat",
   "private": true,
-  "version": "0.0.0",
+  "version": "2.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/assets/SvgIcons/IconSideBar.tsx

@@ -0,0 +1,22 @@
+import SvgIcon from "src/components/shared/SvgIcon";
+
+const IconSidebar = (props: any) => {
+  const size = props.size || 16;
+  return (
+    <SvgIcon>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 512 512"
+        width={size}
+        height={size}
+      >
+        //--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com
+        License - https://fontawesome.com/license (Commercial License) Copyright
+        2024 Fonticons, Inc.--
+        <path d="M448 64c17.7 0 32 14.3 32 32l0 320c0 17.7-14.3 32-32 32l-224 0 0-384 224 0zM64 64l128 0 0 384L64 448c-17.7 0-32-14.3-32-32L32 96c0-17.7 14.3-32 32-32zm0-32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zM80 96c-8.8 0-16 7.2-16 16s7.2 16 16 16l64 0c8.8 0 16-7.2 16-16s-7.2-16-16-16L80 96zM64 176c0 8.8 7.2 16 16 16l64 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-64 0c-8.8 0-16 7.2-16 16zm16 48c-8.8 0-16 7.2-16 16s7.2 16 16 16l64 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-64 0z" />
+      </svg>
+    </SvgIcon>
+  );
+};
+
+export default IconSidebar;

src/components/containers/withFabLauncher.tsx

@@ -8,16 +8,9 @@ type WithFabLauncherType = {
 
 const WithFabLauncher: FC<WithFabLauncherType> = ({ children, open }) => (
   <div
-    tabIndex={-1}
     role="reigon"
+    tabIndex={-1}
     className="pos-relative"
-    style={{
-      height: "100%",
-      width: "100%",
-      background: "none",
-      overflow: "auto",
-      zIndex: 1,
-    }}
   >
     {!open && <Launcher />}
     {open && <>{children}</>}

src/components/shared/Buttons/Button.tsx

@@ -2,6 +2,7 @@ import { ReactNode } from "react";
 
 import { addInlineStyle } from "src/addStyles";
 import style from "./buttons.scss?inline";
+import clsx from "clsx";
 addInlineStyle(style);
 
 export interface ButtonProps
@@ -10,13 +11,19 @@ export interface ButtonProps
   children?: ReactNode;
   className?: string;
   variant?: "filled" | "contained" | "outlined" | "text" | "text-alt";
+  RightIconComponent?: React.FC<any>;
+  showIconOnHover?: boolean;
+  hideOverflow?: boolean;
 }
 
 const Button = ({
   // size = "medium",
   variant = "text",
   className = "",
   onClick,
+  RightIconComponent,
+  showIconOnHover,
+  hideOverflow,
   ...rest
 }: ButtonProps) => {
   const variantClasses = `button-${variant?.toLowerCase()}`;
@@ -27,7 +34,25 @@ const Button = ({
       onMouseDown={onClick}
       className={variantClasses + " " + className}
     >
-      {rest.children}
+      <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"
+            )}
+          >
+            <RightIconComponent />
+          </div>
+        )}
+        {hideOverflow && <div className="button-right-blur" />}
+      </div>
     </button>
   );
 };

src/components/shared/Buttons/buttons.scss

@@ -13,14 +13,38 @@ button {
   border-radius: 8px;
   padding: 8px;
   color: $almost-black;
+  width: fit-content;
 }
+
 button:disabled {
   color: $muted !important;
   fill: $light;
   cursor: unset;
 }
 
-// Variant - FILED
+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 - FILLED
 .button-filled {
   background-color: #eee;
 }
@@ -64,7 +88,7 @@ button:disabled {
 }
 
 .button-text-alt:hover {
-  border: 1px solid transparent;
+  background-color: $light;
 }
 
 .collapsed-area {