feat: implement improved highlights form with ai auto-summarise

components/atoms/Fab/fab.tsx

@@ -0,0 +1,30 @@
+import clsx from "clsx";
+import React from "react";
+
+interface FabProps extends React.HTMLAttributes<HTMLButtonElement> {
+  position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+  onClick?: () => void;
+}
+const Fab = ({ position, children, className }: FabProps) => {
+  const getFabPositionStyles = () => {
+    switch (position) {
+      case "top-left":
+        return "top-4 left-4";
+      case "top-right":
+        return "top-4 right-4";
+      case "bottom-left":
+        return "bottom-4 left-4";
+      case "bottom-right":
+        return "bottom-4 right-4";
+      default:
+        return "bottom-8 right-8";
+    }
+  };
+  return (
+    <button type="button" className={clsx("fixed", getFabPositionStyles(), className)}>
+      {children}
+    </button>
+  );
+};
+
+export default Fab;

components/atoms/TextInput/text-input.tsx

@@ -7,7 +7,6 @@ interface TextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   state?: "default" | "valid" | "invalid";
   borderless?: boolean;
   descriptionText?: string;
-  classNames?: string;
   errorMsg?: string;
   fieldRef?: React.RefObject<HTMLInputElement>;
   handleChange?: (value: string) => void;
@@ -21,7 +20,7 @@ const TextInput = ({
   id,
   value,
   descriptionText,
-  classNames,
+  className,
   fieldRef,
   disabled = false,
   borderless = false,
@@ -52,7 +51,7 @@ const TextInput = ({
             borderless && "!border-none",
             state === "invalid" ? "focus-within:border-light-red-10" : "focus-within:border-light-orange-9 ",
             disabled && "bg-light-slate-3 text-light-slate-6",
-            classNames
+            className
           )}
         >
           <input
@@ -64,7 +63,7 @@ const TextInput = ({
             className={clsx(
               "flex-1 focus:outline-none",
               disabled && "bg-light-slate-3 cursor-not-allowed text-light-slate-9",
-              classNames
+              className
             )}
             disabled={disabled}
             value={value}
@@ -74,7 +73,7 @@ const TextInput = ({
           {!disabled && (
             <>
               {state === "valid" ? (
-                <CheckCircleFillIcon className="ml-1  text-light-orange-9" size={12} />
+                <CheckCircleFillIcon className="ml-1 text-light-orange-9" size={12} />
               ) : !!value ? (
                 <span title="Clear input" className="flex items-center ml-1" onClick={handleResetInput}>
                   <XCircleFillIcon

components/atoms/Toast/toast.tsx

@@ -13,7 +13,7 @@ const ToastViewport = React.forwardRef<
   <ToastPrimitives.Viewport
     ref={ref}
     className={clsx(
-      "fixed z-[10] top-24 md:top-14 flex max-h-screen w-full flex-col-reverse right-0 lg:right-4  sm:flex-col md:max-w-[420px]",
+      "fixed z-50 top-24 md:top-14 flex max-h-screen w-full flex-col-reverse right-0 lg:right-4  sm:flex-col md:max-w-[420px]",
       className
     )}
     {...props}

components/atoms/Tooltip/tooltip.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import clsx from "clsx";
 
 interface TooltipProps {
   children: React.ReactNode;
@@ -10,7 +11,7 @@ interface TooltipProps {
   tipClassName?: string;
 }
 const Tooltip = ({ children, content, className, direction }: TooltipProps): JSX.Element => {
-  const { Portal, Root, Content, Trigger } = TooltipPrimitive;
+  const { Portal, Root, Content, Trigger, Arrow } = TooltipPrimitive;
 
   return (
     <Root>
@@ -19,13 +20,10 @@ const Tooltip = ({ children, content, className, direction }: TooltipProps): JSX
       </Trigger>
       <Portal>
         <Content sideOffset={4} collisionPadding={10} side={!!direction ? direction : "bottom"} avoidCollisions>
-          <div
-            className={`${
-              className && className
-            } text-xs py-1 px-2 rounded shadow-lg  bg-dark-slate-2 text-dark-slate-12  `}
-          >
+          <div className={clsx("text-xs py-1 px-2 rounded shadow-lg  bg-dark-slate-2 text-dark-slate-12", className)}>
             {content}
           </div>
+          <Arrow className="fill-dark " />
         </Content>
       </Portal>
     </Root>

components/atoms/TypeWriterTextArea/type-writer-text-area.tsx

@@ -0,0 +1,65 @@
+import React, { ChangeEvent, useEffect, useRef } from "react";
+import clsx from "clsx";
+
+interface TypeWriterTextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  onChangeText?: (value: string) => void;
+  typewrite?: boolean;
+  textContent?: string;
+  defaultRow?: number;
+}
+
+const TypeWriterTextArea = React.forwardRef<HTMLTextAreaElement, TypeWriterTextAreaProps>(
+  ({ className, onChangeText, typewrite, textContent, defaultRow, ...props }) => {
+    const textareaRef = useRef<HTMLTextAreaElement>(null);
+    const autoGrowTextarea = () => {
+      const textarea = textareaRef.current;
+      if (textarea) {
+        textarea.style.height = "auto";
+        textarea.style.height = `${textarea.scrollHeight}px`;
+      }
+    };
+
+    const typeWrite = (text: string) => {
+      const textarea = textareaRef.current;
+      if (textarea) {
+        textarea.focus();
+        textarea.value = "";
+        textarea.selectionStart = textarea.selectionEnd = textarea.value.length;
+        const interval = setInterval(() => {
+          if (textarea.value.length === text.length) {
+            clearInterval(interval);
+          } else {
+            textarea.value = text.slice(0, textarea.value.length + 1);
+          }
+        }, 10);
+      }
+    };
+
+    useEffect(() => {
+      if (typewrite && textContent) {
+        typeWrite(textContent);
+      }
+    }, [typewrite, textContent]);
+
+    const handleInputChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+      onChangeText?.(event.target.value);
+      autoGrowTextarea();
+    };
+
+    return (
+      <textarea
+        onChange={handleInputChange}
+        className={clsx(
+          "flex h-20 md:min-h-26 md:h-auto w-full rounded-md  py-2  text-sm placeholder:text-slate-400 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        rows={defaultRow}
+        ref={textareaRef}
+        {...props}
+      />
+    );
+  }
+);
+TypeWriterTextArea.displayName = "TypeWriterTextArea";
+
+export { TypeWriterTextArea };

components/molecules/AuthSection/auth-section.tsx

@@ -5,7 +5,6 @@ import Link from "next/link";
 
 import { IoNotifications } from "react-icons/io5";
 import { FiLogOut, FiSettings } from "react-icons/fi";
-import { BiLinkExternal } from "react-icons/bi";
 import { Divider } from "@supabase/ui";
 
 import useSession from "lib/hooks/useSession";
@@ -86,14 +85,6 @@ const AuthSection: React.FC = ({}) => {
         </div>
         <Text className="group-hover:text-light-orange-10">{user?.user_metadata.user_name}</Text>
       </Link>,
-      <Link
-        href={"https://docs.opensauced.pizza/community/faqs/"}
-        key="faqs"
-        className="flex items-center px-4 py-2 text-lg transition rounded-md cursor-pointer group gap-x-3 hover:bg-light-orange-3"
-      >
-        <BiLinkExternal className="group-hover:text-light-orange-10" />
-        <Text className="group-hover:text-light-orange-10">FAQs</Text>
-      </Link>,
       <Link
         href="/user/settings"
         key="settings"
@@ -121,6 +112,7 @@ const AuthSection: React.FC = ({}) => {
       </span>,
     ],
   };
+
   return (
     <div className="flex p-2 m-1 sm:py-0">
       <div className="flex items-center gap-2 lg:gap-3">

components/molecules/GhOpenGraphImg/gh-open-graph-img.tsx

@@ -2,15 +2,16 @@ import { generateGhOgImage } from "lib/utils/github";
 import InvalidImage from "img/icons/fallback-image-disabled-square.svg";
 interface GhOpenGraphImgProps {
   githubLink: string;
+  className?: string;
 }
 
-const GhOpenGraphImg = ({ githubLink }: GhOpenGraphImgProps): JSX.Element => {
+const GhOpenGraphImg = ({ githubLink, className }: GhOpenGraphImgProps): JSX.Element => {
   const { isValid, url } = generateGhOgImage(githubLink);
 
   return (
     <>
       {url && (
-        <picture>
+        <picture className={className}>
           <img src={isValid ? url : InvalidImage} alt={isValid ? "github og image" : "invalid url image"} />
         </picture>
       )}