OcularEngineering · MichaelMoyoMushabati · May 22, 2024 · May 22, 2024 · May 22, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/apps/github/package.json b/packages/apps/github/package.json
@@ -20,10 +20,10 @@
   "dependencies": {
     "@octokit/app": "^14.0.2",
     "@octokit/auth-app": "^6.0.4",
-    "@octokit/rest": "^20.0.2",
+    "@octokit/rest": "^20.1.1",
     "@ocular/ocular": "*",
     "@ocular/types": "*",
     "@ocular/utils": "*",
-    "octokit": "^3.1.2"
+    "octokit": "^3.2.1"
   }
 }
diff --git a/packages/apps/notion/package.json b/packages/apps/notion/package.json
@@ -19,6 +19,7 @@
     "@babel/preset-react": "^7.23.3"
   },
   "dependencies": {
-    "async-sema": "^3.1.1"
+    "async-sema": "^3.1.1",
+    "randomatic": "^3.1.1"
   }
 }
diff --git a/packages/apps/webconnector/package.json b/packages/apps/webconnector/package.json
@@ -22,6 +22,6 @@
     "@ocular/ocular": "*",
     "@ocular/types": "*",
     "@ocular/utils": "*",
-    "puppeteer": "^22.8.0"
+    "puppeteer": "^22.9.0"
   }
 }
diff --git a/packages/apps/webconnector/src/services/oauth.ts b/packages/apps/webconnector/src/services/oauth.ts
@@ -30,13 +30,13 @@ class webConnectorOauth extends OauthService {
       name: AppNameDefinitions.WEBCONNECTOR,
       logo: "/asana.svg",
       description:
-        "WebConnector is an innovative app designed to streamline the process of data extraction from websites. Simply enter a URL and quickly gather all relevant data from the webpage. This tool makes it easier to access and analyze online information efficiently",
+        "WebConnector",
       oauth_url: "",
       slug: AppNameDefinitions.WEBCONNECTOR,
       category: AppCategoryDefinitions.SOTWARE_DEVELOPMENT,
       developer: "Ocular AI",
       images: ["/asana.svg"],
-      overview: "WebConnector: Your Gateway to Efficient Web Data Extraction",
+      overview: "WebConnector",
       docs: "https://developer.atlassian.com/",
       website: "https://www.atlassian.com/software/confluence",
     };

diff --git a/packages/ocular-ui/components/marketplace/integration-tile-grid.tsx b/packages/ocular-ui/components/marketplace/integration-tile-grid.tsx
@@ -2,6 +2,7 @@ import Image from 'next/image'
 import Link from 'next/link'
 import { Integration } from '@/types/types'
 import { Badge } from "@/components/ui/badge"
+import { formatLabel } from '@/lib/utils';
 
 export default function IntegrationTileGrid({
   integrationsByCategory,
@@ -34,17 +35,12 @@ export default function IntegrationTileGrid({
                           height={80}
                           className=""
                           src={p.logo}
-                          alt={p.name}
+                          alt={formatLabel(p.name)}
                         />
                       </div>
                       <div>
                         <h3 className="text-scale-1100 group-hover:text-scale-1200 font-semibold mb-2 text-lg transition-colors items-center justify-center">
-                          {
-                            p.name
-                              .split('-')
-                              .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-                              .join(' ')
-                          }
+                            {formatLabel(p.name)}
                         </h3>
                         <p className="text-scale-900 text-sm" style={{ display: '-webkit-box', WebkitBoxOrient: 'vertical', WebkitLineClamp: '3', overflow: 'hidden' }}>
                           {p.description}

diff --git a/packages/ocular-ui/components/search/app-filter-option.tsx b/packages/ocular-ui/components/search/app-filter-option.tsx
@@ -36,7 +36,7 @@ export default function AppFilterOption({ src, label, value, results }: AppFilte
         </p>
       </div>
       <p className="hidden text-sm text-gray-500 sm:inline-flex">
-        {results ? results : Math.floor(Math.random() * 1000) + 1}
+        3
       </p>
     </div>
   );

diff --git a/packages/ocular-ui/components/search/app-filter-options.tsx b/packages/ocular-ui/components/search/app-filter-options.tsx
@@ -31,14 +31,14 @@ export default function AppFilterOptions({results, resultSources}: AppFilterOpti
         <div className="mt-3 flex w-full text-sm text-gray-700 lg:justify-start lg:text-base dark:text-gray-400">
             <div className="flex w-full flex-col justify-start space-y-2 sm:w-auto">
                 <div
-                    className={`hover:dark:bg-muted box-border flex h-10 w-64 min-w-10 cursor-pointer items-center justify-start rounded-full px-5 hover:bg-gray-100 ${isSelected ? 'bg-blue-100 dark:bg-muted border border-input' : 'bg-background border-input'}`}
+                    className={`hover:dark:bg-muted box-border flex h-10 w-64 min-w-10 cursor-pointer items-center justify-start rounded-full px-5 hover:bg-gray-100 ${isSelected ? 'bg-blue-100 dark:bg-muted border border-input' : 'border-input'}`}
                     onClick={handleClick}
                 >
                     <div className='flex grow gap-2'>
                         <Image src="/All.svg" alt="All" width={20} height={20} />
                         <p className="hidden font-semibold text-sm sm:inline-flex dark:text-white">All</p>
                     </div>
-                    <p className="hidden text-sm text-gray-500 sm:inline-flex">{results ? results : Math.floor(Math.random() * 1000) + 1}</p>
+                    <p className="hidden text-sm text-gray-500 sm:inline-flex">3</p>
                 </div>
                 {mappedResultSources.map((iconName) => (
                     <AppFilterOption src={iconName.icon} label={iconName.label} key={iconName.value} value={iconName.value} />

diff --git a/packages/ocular-ui/components/search/search-results.tsx b/packages/ocular-ui/components/search/search-results.tsx
@@ -2,66 +2,59 @@ import React, { useState } from 'react';
 import Image from 'next/image';
 import AppFilterOptions from "./app-filter-options";
 import ReactMarkdown from 'react-markdown';
+import { formatLabel } from '@/lib/utils';
 import {
   ChevronDownIcon,
 } from "@heroicons/react/outline";
 
 import { SearchCopilotSkeleton, SearchResultsSkeleton, SearchByAppFilterSkeleton } from '@/components/ui/skeletons';
-import { Skeleton } from "@/components/ui/skeleton"
 
-// AI Results Component
-export const AIResults = ({ content, search_results, isLoadingCopilot }) => {
+export const AIResults = ({ content, ai_citations }) => {
   const [showResults, setShowResults] = useState(false);
 
   return (
-    <>
-      {isLoadingCopilot ? (
-        <SearchCopilotSkeleton />
-      ) : (
-        <div className='flex flex-col rounded-3xl px-6 py-4 max-w-4xl space-y-3'>
-          <div className='flex flex-row'>
-            <div className="flex items-center space-x-2">
-              <Image src="/Ocular-logo-light.svg" alt="Ocular Copilot" className="size-[50px]" width={50} height={10} /> 
-              <h1 className='font-semibold text-l'>Copilot</h1>
+    <div className="flex flex-col rounded-3xl py-4 max-w-6xl space-y-3 justify-start items-start">
+      <div className="flex flex-row justify-start items-start w-full">
+        <div className="flex items-center space-x-2 justify-start w-full">
+          <Image src="/Ocular-logo-light.svg" alt="Ocular Copilot" className="size-[50px]" width={50} height={10} />
+          <h1 className="font-semibold text-l">Copilot</h1>
+        </div>
+      </div>
+      <ReactMarkdown className="font-regular text-md space-y-4 text-left">{content}</ReactMarkdown>
+      <div className="mt-2 mb-3 text-left w-full">
+        {ai_citations && ai_citations.length > 0 && (
+          <button onClick={() => setShowResults(!showResults)} className="text-left">
+            <div className="flex flex-row bg-blue-100/50 dark:bg-muted border border-input p-2 px-3 rounded-2xl text-sm items-center gap-2 justify-start">
+              {ai_citations.length} sources
+              <ChevronDownIcon className={`h-4 ${showResults ? 'rotate-180' : ''}`} />
             </div>
-          </div>
-          <ReactMarkdown className="font-regular text-md space-y-4">{content}</ReactMarkdown>
-          <div className='mt-2 mb-3'>
-            {search_results && search_results.length > 0 && (
-              <button onClick={() => setShowResults(!showResults)}>
-                <div className='flex flex-row bg-blue-100/50 dark:bg-muted border border-input p-2 px-3 rounded-2xl text-sm items-center gap-2'>
-                  {search_results.length} sources
-                  <ChevronDownIcon className={`h-4 ${showResults ? 'rotate-180' : ''}`} />
-                </div>
-              </button>
-            )}
-            <div className={`flex flex-row space-x-5 mt-5 overflow-auto scrollbar-hide transition-all duration-300 ${showResults ? 'opacity-100 max-h-[1000px]' : 'opacity-0 max-h-0'}`}>
-              { search_results && search_results.slice(0, 13).map((result: any, index: any) => (
-                <div
-                  className="bg-blue-100/50 dark:bg-muted border flex flex-row rounded-2xl p-4 text-xs sm:text-base w-[200px] flex-none"
-                  key={index}
-                >
-                  <div className='space-y-1 overflow-hidden'>
-                    <a href={result.location} target="_blank" rel="noopener noreferrer" className='flex flex-row space-x-0'>
-                      <Image src={result && result.source === 'pagerduty' ? '/PagerDuty.png' : result && result.source ? `/${result.source}.svg` : '/default.png'} alt={result.title} className="mr-4 size-[20px]" width={10} height={10} />
-                      <h3 className="text-sm mb-2 truncate font-semibold text-blue-800 group-hover:underline dark:text-blue-400">
-                        {result.source.charAt(0).toUpperCase() + result.source.slice(1)}
-                      </h3>
-                    </a>
-                    <p className="font-regular line-clamp-1 text-sm" dangerouslySetInnerHTML={{ __html: result.content }}></p>
-                  </div>
-                </div>
-              ))}
+          </button>
+        )}
+        <div className={`flex flex-row space-x-5 mt-5 overflow-auto scrollbar-hide transition-all duration-300 ${showResults ? 'opacity-100 max-h-[1000px]' : 'opacity-0 max-h-0'} justify-start items-start w-full`}>
+          {ai_citations && ai_citations.slice(0, 13).map((citation, index) => (
+            <div
+              className="bg-blue-100/50 dark:bg-muted border flex flex-row rounded-2xl p-4 text-xs sm:text-base w-[200px] flex-none justify-start items-start text-left"
+              key={index}
+            >
+              <div className="space-y-1 overflow-hidden text-left w-full">
+                <a href={citation.location} target="_blank" rel="noopener noreferrer" className="flex flex-row space-x-0 justify-start items-start text-left w-full">
+                  <Image src={citation && citation.source === 'pagerduty' ? '/PagerDuty.png' : citation && citation.source ? `/${citation.source}.svg` : '/default.png'} alt={citation.title} className="mr-4 size-[20px]" width={10} height={10} />
+                  <h3 className="text-sm mb-2 truncate font-semibold text-blue-800 group-hover:underline dark:text-blue-400">
+                    {formatLabel(citation.source)}
+                  </h3>
+                </a>
+                <p className="font-regular line-clamp-1 text-sm" dangerouslySetInnerHTML={{ __html: citation.content }}></p>
+              </div>
             </div>
-          </div>
+          ))}
         </div>
-      )}
-    </>
+      </div>
+    </div>
   );
 };
 
 // Results Component
-const Results = ({ results, isLoadingResults }) => (
+const Results = ({ results }) => (
   <>
     <div className="w-3/5 max-w-5xl items-start justify-start">
       {
@@ -108,7 +101,7 @@ const Results = ({ results, isLoadingResults }) => (
 );
 
 // Results Filter Component
-const ResultsFilter = ({ results, isLoadingResults, resultSources }) => (
+const ResultsFilter = ({ results, resultSources }) => (
   <div className="flex w-2/5 flex-col items-end">
     <div className="flex flex-col">
       {
@@ -121,22 +114,26 @@ const ResultsFilter = ({ results, isLoadingResults, resultSources }) => (
 );
 
 // Main Component
-export default function SearchResults({ search_results, ai_content, isLoadingResults, isLoadingCopilot, resultSources }) {
+export default function SearchResults({ search_results, ai_content, isLoadingResults, isLoadingCopilot, resultSources, ai_citations }) {
   return (
-    <div className="font-open-sans dark:bg-background flex flex-col dark:text-white items-center justify-start" >
-      {/* <div className='sm:pl-[5%] md:pl-[14%] lg:pl-52' style={{background: 'linear-gradient(to bottom, rgba(0, 0, 255, 0.015) 1%, transparent)'}}>
-        <AIResults content={ai_content} search_results={search_results} isLoadingCopilot={isLoadingCopilot}/>
-      </div> */}
-      <div className='flex flex-row items-center justify-center'>
-        <div className='flex flex-row justify-center mt-5'>
+    <div className="font-open-sans dark:bg-background flex flex-row dark:text-white items-center justify-start">
+      <div style={{flex: 1}} />
+      <div style={{flex: 3}} className='bg-background flex flex-col'>
+        {isLoadingCopilot ? (
+          <SearchCopilotSkeleton />
+        ): (
+          <AIResults content={ai_content} ai_citations={ai_citations}/>
+          )}
+        <div className='flex flex-row max-w-full justify-center mt-5'>
           {isLoadingResults ? (
             <SearchResultsSkeleton />
             ) : (
-              <Results results={search_results} isLoadingResults={isLoadingResults} />
+              <Results results={search_results} />
           )}
-          <ResultsFilter results={search_results} isLoadingResults={isLoadingResults} resultSources={resultSources} />
+          <ResultsFilter results={search_results} resultSources={resultSources} />
         </div>
       </div>
+      <div style={{flex: 1}} />
     </div>
   );
-}
+}
diff --git a/packages/ocular-ui/components/ui/skeletons.tsx b/packages/ocular-ui/components/ui/skeletons.tsx
@@ -9,9 +9,9 @@ export function SearchResultSkeleton() {
             <div className={`space-y-5 w-[743px]`}>
                 <Skeleton className={`relative overflow-hidden dark:bg-muted bg-gray-200 h-5 rounded-xl`}/>
                 <div className={`space-y-2`}>
-                    <Skeleton className={`relative overflow-hidden bg-gray-200 dark:bg-muted rounded-xl h-2 w-4/5`}/>
-                    <Skeleton className={`relative overflow-hidden bg-gray-200 dark:bg-muted rounded-xl h-2 w-3/5`}/>
-                    <Skeleton className={`relative overflow-hidden bg-gray-200 dark:bg-muted rounded-xl h-2 w-2/5`}/>
+                    <Skeleton className={`relative overflow-hidden bg-gray-200 dark:bg-muted rounded-xl h-4 w-4/5`}/>
+                    <Skeleton className={`relative overflow-hidden bg-gray-200 dark:bg-muted rounded-xl h-4 w-3/5`}/>
+                    <Skeleton className={`relative overflow-hidden bg-gray-200 dark:bg-muted rounded-xl h-4 w-2/5`}/>
                 </div>
                 <div className="flex flex-row gap-3">
                     <Skeleton className={`relative overflow-hidden bg-gray-200 dark:bg-muted rounded-xl h-3 w-[100px]`}/>
@@ -27,32 +27,38 @@ export function SearchResultsSkeleton() {
             <SearchResultSkeleton />
             <SearchResultSkeleton />
             <SearchResultSkeleton />
-            <SearchResultSkeleton />
         </div>
     )
 }
 
 export function SearchCopilotSkeleton() {
     return (
         <div
-            className={`flex flex-col rounded-3xl px-6 py-4 space-y-5 max-w-4xl`}
+            className="flex flex-col rounded-3xl py-4 max-w-6xl space-y-3 justify-start items-start"
         >   
-            <div className='flex flex-row'>
+            <div className='flex flex-row mb-5'>
                 <div className="flex items-center space-x-2">
                     <Skeleton className={`relative overflow-hidden bg-gray-200 dark:bg-muted size-[50px] h-5 w-[80px] rounded-lg`}/>
                     <Skeleton className={`relative overflow-hidden bg-gray-200 dark:bg-muted size-[50px] h-5 w-[80px] rounded-lg`}/>
                 </div>
             </div>
             <div className={`space-y-3 w-full`}>
-                <Skeleton className={`relative overflow-hidden bg-gray-200 dark:bg-muted rounded-xl h-3 w-4/5`}/>
-                <Skeleton className={`relative overflow-hidden bg-gray-200 dark:bg-muted rounded-xl h-3 w-3/5`}/>
-                <Skeleton className={`relative overflow-hidden bg-gray-200 dark:bg-muted rounded-xl h-3 w-2/5`}/>
+                <Skeleton className={`relative overflow-hidden bg-gray-200 dark:bg-muted rounded-xl h-5 w-4/5`}/>
+                <Skeleton className={`relative overflow-hidden bg-gray-200 dark:bg-muted rounded-xl h-5 w-3/5`}/>
+                <Skeleton className={`relative overflow-hidden bg-gray-200 dark:bg-muted rounded-xl h-5 w-2/5`}/>
+            </div>
+            <Skeleton className={`relative overflow-hidden bg-gray-200 dark:bg-muted size-[50px] h-8 w-[80px] rounded-2xl`}/>
+            <div className="flex flex-row">
+                <div className="flex items-center space-x-5">
+                    <Skeleton className={`relative overflow-hidden bg-gray-200 dark:bg-muted size-[50px] h-[80px] w-[200px] rounded-2xl`}/>
+                    <Skeleton className={`relative overflow-hidden bg-gray-200 dark:bg-muted size-[50px] h-[80px] w-[200px] rounded-2xl`}/>
+                </div>
             </div>
+
         </div>
     )
 }
 
-
 export function SearchByAppFilterSkeleton() {
     return (
         <div className="mt-3 flex w-full lg:justify-start">
@@ -65,4 +71,4 @@ export function SearchByAppFilterSkeleton() {
             </div>
         </div>
     )
-}
+}
diff --git a/packages/ocular-ui/lib/global-state.tsx b/packages/ocular-ui/lib/global-state.tsx
@@ -131,8 +131,8 @@ export const GlobalState: FC<GlobalStateProps> = ({ children }) => {
   // });
 
   const [resultFilterDate, setResultFilterDate] = useState<DateRange | undefined>({
-    from: new Date(2024, 3, 20),
-    to: addDays(new Date(2024, 3, 20), 20),
+    from: undefined,
+    to: undefined,
   })
 
   useEffect(() => {

diff --git a/packages/ocular-ui/pages/dashboard/search/index.tsx b/packages/ocular-ui/pages/dashboard/search/index.tsx
@@ -49,7 +49,7 @@ export function Search() {
                 alt=""
               />
 
-            <div className="dark:bg-gray-700 md:dark:hover:border-gray-100 mt-5 flex w-full max-w-md bg-background items-center rounded-full border px-5 py-2 focus-within:shadow hover:shadow sm:max-w-xl sm:py-3 md:hover:border-white lg:max-w-4xl">
+            <div className="dark:bg-transparent md:dark:hover:border-gray-100 mt-5 flex w-full max-w-md bg-background items-center rounded-full border px-5 py-2 focus-within:shadow hover:shadow sm:max-w-xl sm:py-3 md:hover:border-white lg:max-w-4xl">
                 <SearchIcon className="mr-3 h-5 text-gray-500 " />
                 <input
                   ref={searchInputRef}

diff --git a/packages/ocular-ui/pages/dashboard/search/results/index.tsx b/packages/ocular-ui/pages/dashboard/search/results/index.tsx
@@ -12,6 +12,7 @@ import api from "@/services/api"
 
 export default function Search() {
   const [ai_content, setAiResults] = useState(null);
+  const [ai_citations, setai_citations] = useState(null);
   const [search_results, setSearchResults] = useState(null);
   const [isLoadingResults, setIsLoadingResults] = useState(false);
   const [isLoadingCopilot, setIsLoadingCopilot] = useState(false);
@@ -34,9 +35,10 @@ const selectedDate = useMemo(() => {
     setIsLoadingResults(true); 
     setIsLoadingCopilot(true);
     api.search.search(router.query.q, selectedResultSources, selectedDate)
-      .then(data => {
-        // setAiResults(data.data.message.content);
-        // setIsLoadingCopilot(false);
+      .then(data => { 
+        setAiResults(data.data.chat_completion.content);
+        setai_citations(data.data.chat_completion.citations);
+        setIsLoadingCopilot(false);
         setSearchResults(data.data.hits); 
         setResultSources(data.data.sources); 
         setIsLoadingResults(false); 
@@ -54,7 +56,7 @@ const selectedDate = useMemo(() => {
         <link rel="icon" href="/Ocular-Profile-Logo.png" />
       </Head>
       <Header />
-      <SearchResults search_results={search_results} ai_content={ai_content} isLoadingResults={isLoadingResults} isLoadingCopilot={isLoadingCopilot} resultSources={resultSources} />
+      <SearchResults search_results={search_results} ai_content={ai_content} ai_citations={ai_citations} isLoadingResults={isLoadingResults} isLoadingCopilot={isLoadingCopilot} resultSources={resultSources} />
     </div>
   );
 }
diff --git a/packages/ocular-ui/tailwind.config.js b/packages/ocular-ui/tailwind.config.js
@@ -77,6 +77,9 @@ module.exports = {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
       },
+      flexGrow: {
+        '3': '3',
+      },
     },
   },
   plugins: [require("tailwindcss-animate")],
-Original file line number
+Diff line change
@@ Expand Up @@
             </p>
           </div>
           <p className="hidden text-sm text-gray-500 sm:inline-flex">
-            {results ? results : Math.floor(Math.random() * 1000) + 1}
           </p>
         </div>
       );
@@ Expand Down @@