Merge pull request #13 from GooeyAI/2.1.15

Version 2.1.15 with new Sources section

src/assets/SvgIcons/IconBooks.tsx

@@ -0,0 +1,22 @@
+import SvgIcon from "src/components/shared/SvgIcon";
+
+const IconBooks = (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.7.2 by @fontawesome - https://fontawesome.com
+        License - https://fontawesome.com/license (Commercial License) Copyright
+        2024 Fonticons, Inc. */
+        <path d="M128 416l0 48c0 8.8-7.2 16-16 16l-64 0c-8.8 0-16-7.2-16-16l0-48 96 0zm-16 96c12.3 0 23.5-4.6 32-12.2c8.5 7.6 19.7 12.2 32 12.2l64 0c26.5 0 48-21.5 48-48l0-48 0-16 0-16 0-190.2 51.4 198.1 4 15.5 18 69.2c6.6 25.5 32 40.6 56.7 33.8l59.6-16.5c24.7-6.8 39.3-33 32.7-58.5l-13.9-53.7-4-15.5-63.9-246-4-15.5-18-69.2C400 9.9 374.6-5.2 349.9 1.6L290.3 18.1c-3.5 1-6.8 2.3-9.9 4C271.9 8.8 257 0 240 0L176 0c-12.3 0-23.5 4.6-32 12.2C135.5 4.6 124.3 0 112 0L48 0C21.5 0 0 21.5 0 48L0 96l0 16 0 16L0 384l0 16 0 16 0 48c0 26.5 21.5 48 48 48l64 0zM288 64.8l0-1.3c.3-7.2 5.1-13 10.8-14.6l59.6-16.5c6.6-1.8 14.8 2 17.2 11l14.1 54.2-87.3 24.2L288.6 68.6c-.3-1.3-.5-2.6-.6-3.8zm-32-.6c0 0 0 0 0 0L256 96l-96 0 0-48c0-8.8 7.2-16 16-16l64 0c8.8 0 16 7.2 16 16l0 16.2zM176 480c-8.8 0-16-7.2-16-16l0-48 96 0 0 48c0 8.8-7.2 16-16 16l-64 0zM128 128l0 256-96 0 0-256 96 0zm0-80l0 48L32 96l0-48c0-8.8 7.2-16 16-16l64 0c8.8 0 16 7.2 16 16zM256 384l-96 0 0-256 96 0 0 256zM397.7 128.7l59.8 230.5-87.3 24.2L310.4 152.8l87.3-24.2zm67.9 261.5l13.8 53.2c2.4 9.4-3.2 17.7-10.3 19.6l-59.6 16.5c-6.6 1.8-14.8-2-17.2-11l-14.1-54.2 87.3-24.2z" />
+      </svg>
+    </SvgIcon>
+  );
+};
+
+export default IconBooks;

src/components/shared/Buttons/CollapisbleButton.tsx

@@ -6,8 +6,8 @@ import { useSystemContext } from "src/contexts/hooks";
 
 const CollapsibleButton = ({ children, ...restProps }: any) => {
   const { config } = useSystemContext();
-  const [isExpanded, setIsExpanded] = useState(
-    config?.expandedSources || false
+  const [isExpanded, setIsExpanded] = useState<boolean>(
+    config?.expandedSources || true,
   );
 
   const toggleExpansion = () => {

src/components/shared/Buttons/buttons.scss

@@ -87,6 +87,16 @@ button:hover .icon-hover {
   transition: transform 0.3s ease;
 }
 
+.chevron-down > svg {
+  transform: rotate(0);
+  transition: transform 0.3s ease;
+}
+
+.chevron-up > svg {
+  transform: rotate(180deg);
+  transition: transform 0.3s ease;
+}
+
 .button-text-alt:hover {
   background-color: $light;
 }

src/main.tsx

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

src/widgets/copilot/components/Messages/IncomingMsg.tsx

@@ -8,6 +8,7 @@ import { formatTextResponse, getFeedbackButtonIcon } from "./helpers";
 import clsx from "clsx";
 import Button from "src/components/shared/Buttons/Button";
 import { memo } from "react";
+import { SourcesSection } from "./Sources";
 addInlineStyle(style);
 
 export const BotMessageLayout = (props: Record<string, any>) => {
@@ -69,7 +70,12 @@ const IncomingMsg = memo(
     autoPlay: boolean | undefined;
     onFeedbackClick: (buttonId: string, botMessageId: string) => void;
   }) => {
-    const { output_audio = [], type, output_video = [] } = props.data;
+    const {
+      output_audio = [],
+      type,
+      output_video = [],
+      references = [],
+    } = props.data;
     const isAutoPlay = props.autoPlay === false ? false : true;
     const audioTrack = output_audio[0];
     const videoTrack = output_video[0];
@@ -85,6 +91,9 @@ const IncomingMsg = memo(
     if (!parsedElements) return <ResponseLoader show={true} />;
     return (
       <div className="gooey-incomingMsg gpb-12 mw-100">
+        {props.showSources && !!references.length && (
+          <SourcesSection {...props.data} />
+        )}
         <div className="gpl-16 mw-100">
           <BotMessageLayout>
             <div

src/widgets/copilot/components/Messages/Sources.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { useCallback, useEffect, useState } from "react";
+import { SyntheticEvent, useCallback, useEffect, useState } from "react";
 import {
   extractFileDetails,
   extractMainDomain,
@@ -12,6 +12,8 @@ import { useSystemContext } from "src/contexts/hooks";
 import IconButton from "src/components/shared/Buttons/IconButton";
 import IconExternalLink from "src/assets/SvgIcons/IconExternalLink";
 import IconClose from "src/assets/SvgIcons/IconClose";
+import IconBooks from "src/assets/SvgIcons/IconBooks";
+import IconCaretUp from "src/assets/SvgIcons/IconCaretUp";
 
 export const FullSourcePreview = (props: any) => {
   const { data, layoutController, metaData } = props;
@@ -173,6 +175,7 @@ const SourcesCard = (props: { data: Data; index: number }) => {
             filter: "brightness(0.6)",
             transition: "all 1s ease-in-out",
           }}
+          className="bg-filter"
         />
       )}
       <div
@@ -229,17 +232,58 @@ const SourcesCard = (props: { data: Data; index: number }) => {
   );
 };
 
+export const SourcesSection = (data: any) => {
+  const { references = [] }: any = data;
+  const sources = [...references];
+  const { config } = useSystemContext();
+  const [isExpanded, setIsExpanded] = useState<boolean>(
+    config?.expandedSources || true,
+  );
+
+  const toggleExpansion = (e: SyntheticEvent) => {
+    e.preventDefault();
+    setIsExpanded((prev) => !prev);
+  };
+
+  return (
+    <div className="gmb-8">
+      <div className="d-flex align-center gpt-4 gpb-8 gpl-16">
+        <span
+          style={{ height: "24px", width: "24px" }}
+          className="d-flex justify-center align-center gmr-12"
+        >
+          <IconBooks />
+        </span>
+        <h4 className="font_16_500 gmr-6">Sources</h4>
+        <IconButton
+          variant="filled"
+          className={clsx(
+            "bg-light gp-4",
+            isExpanded ? "chevron-down" : "chevron-up",
+          )}
+          onClick={toggleExpansion}
+        >
+          <IconCaretUp size={12} />
+        </IconButton>
+      </div>
+      {isExpanded && <Sources data={sources} />}
+    </div>
+  );
+};
+
 const Sources = ({ data }: any) => {
   if (!data || !data.length) return null;
   return (
     <div className="text-reveal-container">
-      <div className="gmt-16 sources-listContainer">
+      <div className="gpb-8 gpt-4 sources-listContainer">
         {data.map((source: any, index: number) => (
-          <SourcesCard
-            key={source?.title + index}
-            data={source}
-            index={index}
-          />
+          <div className={clsx(index === 0 && "gml-52")}>
+            <SourcesCard
+              key={source?.title + index}
+              data={source}
+              index={index}
+            />
+          </div>
         ))}
       </div>
     </div>

src/widgets/copilot/components/Messages/incoming.scss

@@ -20,7 +20,7 @@
   display: flex;
   min-height: 72px;
   max-width: calc(100% + 16px); // 16px is the padding of the parent container
-  overflow: hidden;
+  overflow: auto;
 }
 
 .sources-listContainer:hover {
@@ -33,7 +33,7 @@
   cursor: pointer;
   min-width: 160px;
   max-width: 160px;
-  height: 128px;
+  height: 74px;
   padding: 8px;
   border: 1px solid transparent;
 }