From 5ba99f54c0010d88d2197cff5b1c8baed813e4eb Mon Sep 17 00:00:00 2001
From: Varun Thakkar <varunthakkar2013@gmail.com>
Date: Wed, 3 Jul 2024 16:21:11 -0700
Subject: [PATCH] adjusting layout and logic

---
 src/interfaces/coral_web/.env.development     |  2 +-
 .../src/components/Citations/Citation.tsx     | 19 ++++++++++--
 .../Conversation/MessagingContainer.tsx       |  4 +--
 .../src/components/Conversation/index.tsx     | 11 -------
 .../coral_web/src/components/Layout.tsx       |  8 ++---
 .../coral_web/src/components/StartModes.tsx   | 31 +------------------
 src/interfaces/coral_web/tailwind.config.js   |  3 ++
 7 files changed, 27 insertions(+), 51 deletions(-)

diff --git a/src/interfaces/coral_web/.env.development b/src/interfaces/coral_web/.env.development
index 82b9fcf7a9..88a2539b77 100644
--- a/src/interfaces/coral_web/.env.development
+++ b/src/interfaces/coral_web/.env.development
@@ -1,3 +1,3 @@
 # Client
-NEXT_PUBLIC_API_HOSTNAME=http://localhost:8000
+NEXT_PUBLIC_API_HOSTNAME=https://cohere-toolkit-backend-lfdlhmdyqa-uc.a.run.app/
 NEXT_PUBLIC_HAS_CUSTOM_LOGO=false
\ No newline at end of file
diff --git a/src/interfaces/coral_web/src/components/Citations/Citation.tsx b/src/interfaces/coral_web/src/components/Citations/Citation.tsx
index e68bebd27c..703ec69526 100644
--- a/src/interfaces/coral_web/src/components/Citations/Citation.tsx
+++ b/src/interfaces/coral_web/src/components/Citations/Citation.tsx
@@ -1,6 +1,6 @@
 import { Transition } from '@headlessui/react';
 import { flatten, sortBy, uniqBy } from 'lodash';
-import React, { useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { useMemo, useState } from 'react';
 
 import { Document } from '@/cohere-client';
@@ -81,6 +81,19 @@ export const Citation = React.forwardRef<HTMLDivElement, Props>(function Citatio
     'document_id'
   );
 
+  console.log(highlightedDocumentIds)
+
+  useEffect(() => {
+    if (selectedCitation) {
+      const generationId = selectedCitation['generationId']
+      const minimapCitations = Object.values(citationReferences[generationId]).flat().filter(citation =>
+        citation.tool_name === 'MiniMap' && highlightedDocumentIds.includes(citation.document_id)
+      )
+      const minimapCitationsUnique = new Set(minimapCitations.map(c => c.url))
+      window.top && window.top.postMessage({ type: 'newCitations', urls: Array.from(minimapCitationsUnique) }, '*')
+    }
+  }, [highlightedDocumentIds, selectedCitation])
+
   const handleMouseEnter = () => {
     hoverCitation(generationId);
   };
@@ -109,8 +122,8 @@ export const Citation = React.forwardRef<HTMLDivElement, Props>(function Citatio
         ...styles,
         ...(translateY !== 0 && isSelected
           ? {
-              '--selectedTranslateY': `${translateY}px`,
-            }
+            '--selectedTranslateY': `${translateY}px`,
+          }
           : {}),
       }}
       className={cn(
diff --git a/src/interfaces/coral_web/src/components/Conversation/MessagingContainer.tsx b/src/interfaces/coral_web/src/components/Conversation/MessagingContainer.tsx
index c4fab97200..8d20d21dc7 100644
--- a/src/interfaces/coral_web/src/components/Conversation/MessagingContainer.tsx
+++ b/src/interfaces/coral_web/src/components/Conversation/MessagingContainer.tsx
@@ -163,11 +163,11 @@ const Messages = forwardRef<HTMLDivElement, MessagesProps>(function MessagesInte
   const isConversationEmpty = messages.length === 0;
   return (
     <div className="flex h-full flex-col gap-y-4 px-4 py-6 md:gap-y-6" ref={ref}>
-      {startOptionsEnabled && (
+      {/* {startOptionsEnabled && (
         <div className="flex h-full w-full flex-col justify-center p-4">
           <StartModes show={isConversationEmpty} onPromptSelected={onPromptSelected} />
         </div>
-      )}
+      )} */}
 
       <div className="mt-auto flex flex-col gap-y-4 md:gap-y-6">
         {messages.map((m, i) => {
diff --git a/src/interfaces/coral_web/src/components/Conversation/index.tsx b/src/interfaces/coral_web/src/components/Conversation/index.tsx
index 30e66bce84..ee38019dc3 100644
--- a/src/interfaces/coral_web/src/components/Conversation/index.tsx
+++ b/src/interfaces/coral_web/src/components/Conversation/index.tsx
@@ -117,17 +117,6 @@ const Conversation: React.FC<Props> = ({ conversationId, startOptionsEnabled = f
     };
   }, [handleClickOutside]);
 
-  useEffect(() => {
-    if (selectedCitation) {
-      const generationId = selectedCitation['generationId']
-      console.log(selectedCitation)
-      const minimapCitations = Object.values(citationReferences[generationId]).flat().filter(citation => citation.tool_name === 'MiniMap')
-      const minimapCitationsUnique = new Set(minimapCitations.map(c => c.url))
-      console.log(minimapCitationsUnique)
-      window.top && window.top.postMessage({ type: 'newCitations', urls: Array.from(minimapCitationsUnique) }, '*')
-    }
-  }, [selectedCitation])
-
   const [isRouteChanging] = useRouteChange();
 
   if (isRouteChanging) {
diff --git a/src/interfaces/coral_web/src/components/Layout.tsx b/src/interfaces/coral_web/src/components/Layout.tsx
index 0d3c3fd683..b28b84cb7f 100644
--- a/src/interfaces/coral_web/src/components/Layout.tsx
+++ b/src/interfaces/coral_web/src/components/Layout.tsx
@@ -60,18 +60,18 @@ export const Layout: React.FC<Props> = ({ title = 'Chat', children }) => {
     <>
       <PageHead title={capitalize(title)} />
       <div className="flex h-screen w-full flex-1 flex-col gap-3 bg-secondary-100 p-3">
-        <NavigationBar>
+        {/* <NavigationBar>
           <span className="flex items-center gap-x-2">
             <DeploymentsDropdown />
             <EditEnvVariablesButton className="py-0" />
           </span>
-        </NavigationBar>
+        </NavigationBar> */}
         {bannerMessage && <Banner size="sm">{bannerMessage}</Banner>}
 
         <div className={cn('relative flex h-full flex-grow flex-nowrap overflow-hidden')}>
           <Transition
             as="div"
-            show={isMobileConvListPanelOpen || (isConvListPanelOpen && isDesktop)}
+            show={false}
             enterFrom={cn(
               '-translate-x-full lg:translate-x-0',
               'lg:mr-0 lg:opacity-0 lg:min-w-0 lg:max-w-0'
@@ -105,7 +105,7 @@ export const Layout: React.FC<Props> = ({ title = 'Chat', children }) => {
           </Transition>
           <Transition
             as="main"
-            show={!isMobileConvListPanelOpen || isDesktop}
+            show={true}
             enterFrom="translate-x-full lg:translate-x-0"
             enterTo="translate-x-0"
             leaveFrom="translate-x-0"
diff --git a/src/interfaces/coral_web/src/components/StartModes.tsx b/src/interfaces/coral_web/src/components/StartModes.tsx
index 9897aa76bd..cd9ff65344 100644
--- a/src/interfaces/coral_web/src/components/StartModes.tsx
+++ b/src/interfaces/coral_web/src/components/StartModes.tsx
@@ -46,37 +46,8 @@ export const StartModes: React.FC<Props> = ({ show, className = '', onPromptSele
       className={cn('flex flex-col items-center gap-y-6', className)}
     >
       <Text styleAs="h5" className="text-center">
-        Choose an option to get started
+        Ask about news
       </Text>
-
-      <div className={cn('w-full max-w-[820px]', 'rounded-lg border border-marble-400')}>
-        <Tabs
-          tabs={modes.map((m) => m.title)}
-          selectedIndex={selectedMode}
-          onChange={handleTabChange}
-          panelsClassName="lg:pt-5 pt-5 pb-4"
-          fitTabsContent={false}
-          tabClassName="pt-1"
-          tabGroupClassName="px-4"
-        >
-          {modes.map((m) => (
-            <div key={m.title} className="flex flex-col gap-y-5">
-              <Text>{m.description}</Text>
-              <div className="flex flex-col gap-2.5 md:flex-row">
-                {m.promptOptions.map((promptOption) => (
-                  <PromptOptionButton
-                    {...promptOption}
-                    key={promptOption.title}
-                    onClick={() => {
-                      onPromptSelected?.({ prompt: promptOption.prompt, params: m.params });
-                    }}
-                  />
-                ))}
-              </div>
-            </div>
-          ))}
-        </Tabs>
-      </div>
     </Transition>
   );
 };
diff --git a/src/interfaces/coral_web/tailwind.config.js b/src/interfaces/coral_web/tailwind.config.js
index de920e2dc9..1d6de1851c 100644
--- a/src/interfaces/coral_web/tailwind.config.js
+++ b/src/interfaces/coral_web/tailwind.config.js
@@ -4,6 +4,9 @@ module.exports = {
   plugins: [require('@tailwindcss/typography')],
   theme: {
     extend: {
+      colors: {
+        'dark': "#121212"
+      },
       screens: {
         '3xl': '2000px',
       },