Bring back inline sources

package.json

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

src/components/shared/Buttons/CollapisbleButton.tsx

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

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

@@ -274,15 +274,21 @@ export const SourcesSection = (data: any) => {
   );
 };
 
-const Sources = ({ data }: any) => {
+const Sources = ({
+  data,
+  isInline = false,
+}: {
+  data: any;
+  isInline?: boolean;
+}) => {
   if (!data || !data.length) return null;
   return (
     <div className="text-reveal-container">
       <div className="gooey-scroll-wrapper">
         <div className="gpb-8 gpt-4 sources-listContainer gooey-scroll-container">
           {data.map((source: any, index: number) => (
             <div
-              className={clsx(index === 0 && "gml-52")}
+              className={clsx(index === 0 && !isInline && "gml-52")}
               key={source?.title + index}
             >
               <SourcesCard data={source} index={index} />

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

@@ -14,14 +14,17 @@ import IconGoogleSlides from "src/assets/SvgIcons/IconGoogleSlides";
 import IconPDF from "src/assets/SvgIcons/IconPDF";
 import IconYoutube from "src/assets/SvgIcons/IconYoutube";
 import IconGlobeNet from "src/assets/SvgIcons/IconGlobeNet";
+import CollapsibleButton from "src/components/shared/Buttons/CollapisbleButton";
+import React from "react";
+import Sources from "./Sources";
 
 const GOOEY_META_SCRAPPER_API = "https://metascraper.gooey.ai";
-// const NUMBER_REFERENCE_REGEX = /\[\d+(,\s*\d+)*\]/g;
+const NUMBER_REFERENCE_REGEX = /\[\d+(,\s*\d+)*\]/g;
 
 export const findSourceIcon = (
   contentType: string,
   url: string,
-  size: number = 12
+  size: number = 12,
 ): JSX.ElementType | null => {
   const urlLower = url.toLowerCase();
   // try to guess from url first
@@ -123,7 +126,7 @@ export function extractMainDomain(url: string) {
 export const fetchUrlMeta = async (url: string): Promise<any> => {
   try {
     const response: any = await axios.get(
-      `${GOOEY_META_SCRAPPER_API}/fetchUrlMeta?url=${url}`
+      `${GOOEY_META_SCRAPPER_API}/fetchUrlMeta?url=${url}`,
     );
     return response?.data;
   } catch (err) {
@@ -175,9 +178,9 @@ export const getReactParserOptions = (data: any): HTMLReactParserOptions => ({
     }
   },
   transform(reactNode, domNode) {
-    // if (domNode.type === "text" && data.showSources) {
-    //   return customizedSources(reactNode, domNode, data);
-    // }
+    if (domNode.type === "text" && data.showSources) {
+      return customizedSources(reactNode, domNode, data);
+    }
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-expect-error
     switch (domNode.name) {
@@ -225,50 +228,51 @@ const customizedLinks = (reactNode: any, domNode: any, data: any) => {
   );
 };
 
-// const customizedSources = (reactNode: any, domNode: any, data: any) => {
-//   if (!domNode) return domNode;
-//   let text = domNode.data || "";
+const customizedSources = (reactNode: any, domNode: any, data: any) => {
+  if (!domNode) return domNode;
+  let text = domNode.data || "";
+
+  // match regex pattern[1,2]/[1]/[1][2] in text and replace with custom component (IconButton)
+  // and add the text before and after the match to parts final render array
+  const matches: any = Array.from(
+    new Set(
+      (text.match(NUMBER_REFERENCE_REGEX) || []).map((match: string) =>
+        parseInt(match.slice(1, -1), 10),
+      ),
+    ),
+  );
 
-//   // match regex pattern[1,2]/[1]/[1][2] in text and replace with custom component (IconButton)
-//   // and add the text before and after the match to parts final render array
-//   const matches: any = Array.from(
-//     new Set(
-//       (text.match(NUMBER_REFERENCE_REGEX) || []).map((match: string) =>
-//         parseInt(match.slice(1, -1), 10),
-//       ),
-//     ),
-//   );
+  // return the text as it is if no match found
+  if (!matches || !matches.length) return reactNode;
 
-//   // return the text as it is if no match found
-//   if (!matches || !matches.length) return reactNode;
+  const { references = [] }: any = data;
+  const sources = [...references].splice(
+    matches[0] - 1,
+    matches[matches.length - 1],
+  );
 
-//   const { references = [] }: any = data;
-//   const sources = [...references].splice(
-//     matches[0] - 1,
-//     matches[matches.length - 1],
-//   );
+  text = text.replaceAll(NUMBER_REFERENCE_REGEX, "");
+  // remove trailing dot and space
+  if (text[text.length - 1] === "." && text[text.length - 2] === " ") {
+    text = text.slice(0, -2) + ".";
+  }
 
-//   text = text.replaceAll(NUMBER_REFERENCE_REGEX, "");
-//   // remove trailing dot and space
-//   if (text[text.length - 1] === "." && text[text.length - 2] === " ") {
-//     text = text.slice(0, -2) + ".";
-//   }
-//   return (
-//     <React.Fragment>
-//       {text}{" "}
-//       {!!references.length && (
-//         <CollapsibleButton>
-//           <Sources data={sources} />
-//         </CollapsibleButton>
-//       )}
-//     </React.Fragment>
-//   );
-// };
+  return (
+    <React.Fragment>
+      {text}{" "}
+      {!!references.length && (
+        <CollapsibleButton>
+          <Sources data={sources} isInline />
+        </CollapsibleButton>
+      )}
+    </React.Fragment>
+  );
+};
 
 export const formatTextResponse = (
   data: any,
   linkColor: string,
-  showSources: boolean
+  showSources: boolean,
 ) => {
   const body = getOutputText(data);
   if (!body) return "";
@@ -285,7 +289,11 @@ export const formatTextResponse = (
   });
   const parsedElements = parse(
     rawHtml as string,
-    getReactParserOptions({ ...data, showSources, linkColor })
+    getReactParserOptions({
+      ...data,
+      showSources,
+      linkColor,
+    }),
   );
   return parsedElements;
 };