Text-to-SQL proof of concept (#5788)

Added:
- An "Ask AI" command to the command menu.
- A simple GraphQL resolver that converts the user's question into a
relevant SQL query using an LLM, runs the query, and returns the result.

<img width="428" alt="Screenshot 2024-06-09 at 20 53 09"
src="https://github.com/twentyhq/twenty/assets/171685816/57127f37-d4a6-498d-b253-733ffa0d209f">

No security concerns have been addressed, this is only a
proof-of-concept and not intended to be enabled in production.

All changes are behind a feature flag called `IS_ASK_AI_ENABLED`.

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>

packages/twenty-front/src/modules/ui/input/components/AutosizeTextInput.tsx

@@ -30,6 +30,8 @@ type AutosizeTextInputProps = {
   value?: string;
   className?: string;
   onBlur?: () => void;
+  autoFocus?: boolean;
+  disabled?: boolean;
 };
 
 const StyledContainer = styled.div`
@@ -123,6 +125,8 @@ export const AutosizeTextInput = ({
   value = '',
   className,
   onBlur,
+  autoFocus,
+  disabled,
 }: AutosizeTextInputProps) => {
   const [isFocused, setIsFocused] = useState(false);
   const [isHidden, setIsHidden] = useState(
@@ -212,7 +216,9 @@ export const AutosizeTextInput = ({
           {!isHidden && (
             <StyledTextArea
               ref={textInputRef}
-              autoFocus={variant === AutosizeTextInputVariant.Button}
+              autoFocus={
+                autoFocus || variant === AutosizeTextInputVariant.Button
+              }
               placeholder={placeholder ?? 'Write a comment'}
               maxRows={MAX_ROWS}
               minRows={computedMinRows}
@@ -221,6 +227,7 @@ export const AutosizeTextInput = ({
               onFocus={handleFocus}
               onBlur={handleBlur}
               variant={variant}
+              disabled={disabled}
             />
           )}
           {variant === AutosizeTextInputVariant.Icon && (

packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerRouter.tsx

@@ -2,6 +2,7 @@ import styled from '@emotion/styled';
 import { useRecoilState, useRecoilValue } from 'recoil';
 
 import { RightDrawerCalendarEvent } from '@/activities/calendar/right-drawer/components/RightDrawerCalendarEvent';
+import { RightDrawerAIChat } from '@/activities/copilot/right-drawer/components/RightDrawerAIChat';
 import { RightDrawerEmailThread } from '@/activities/emails/right-drawer/components/RightDrawerEmailThread';
 import { RightDrawerCreateActivity } from '@/activities/right-drawer/components/create/RightDrawerCreateActivity';
 import { RightDrawerEditActivity } from '@/activities/right-drawer/components/edit/RightDrawerEditActivity';
@@ -50,6 +51,10 @@ const RIGHT_DRAWER_PAGES_CONFIG = {
     page: <RightDrawerRecord />,
     topBar: <RightDrawerTopBar page={RightDrawerPages.ViewRecord} />,
   },
+  [RightDrawerPages.Copilot]: {
+    page: <RightDrawerAIChat />,
+    topBar: <RightDrawerTopBar page={RightDrawerPages.Copilot} />,
+  },
 };
 
 export const RightDrawerRouter = () => {

packages/twenty-front/src/modules/ui/layout/right-drawer/constants/RightDrawerPageIcons.ts

@@ -6,4 +6,5 @@ export const RIGHT_DRAWER_PAGE_ICONS = {
   [RightDrawerPages.ViewEmailThread]: 'IconMail',
   [RightDrawerPages.ViewCalendarEvent]: 'IconCalendarEvent',
   [RightDrawerPages.ViewRecord]: 'Icon123',
+  [RightDrawerPages.Copilot]: 'IconSparkles',
 };

packages/twenty-front/src/modules/ui/layout/right-drawer/constants/RightDrawerPageTitles.ts

@@ -6,4 +6,5 @@ export const RIGHT_DRAWER_PAGE_TITLES = {
   [RightDrawerPages.ViewEmailThread]: 'Email Thread',
   [RightDrawerPages.ViewCalendarEvent]: 'Calendar Event',
   [RightDrawerPages.ViewRecord]: 'Record Editor',
+  [RightDrawerPages.Copilot]: 'Copilot',
 };

packages/twenty-front/src/modules/ui/layout/right-drawer/types/RightDrawerPages.ts

@@ -4,4 +4,5 @@ export enum RightDrawerPages {
   ViewEmailThread = 'view-email-thread',
   ViewCalendarEvent = 'view-calendar-event',
   ViewRecord = 'view-record',
+  Copilot = 'copilot',
 }

packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx

@@ -11,7 +11,7 @@ type TabProps = {
   className?: string;
   onClick?: () => void;
   disabled?: boolean;
-  hasBetaPill?: boolean;
+  pill?: string;
 };
 
 const StyledTab = styled.div<{ active?: boolean; disabled?: boolean }>`
@@ -59,7 +59,7 @@ export const Tab = ({
   onClick,
   className,
   disabled,
-  hasBetaPill,
+  pill,
 }: TabProps) => {
   const theme = useTheme();
   return (
@@ -73,7 +73,7 @@ export const Tab = ({
       <StyledHover>
         {Icon && <Icon size={theme.icon.size.md} />}
         {title}
-        {hasBetaPill && <Pill label="Beta" />}
+        {pill && <Pill label={pill} />}
       </StyledHover>
     </StyledTab>
   );

packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx

@@ -15,7 +15,7 @@ type SingleTabProps = {
   id: string;
   hide?: boolean;
   disabled?: boolean;
-  hasBetaPill?: boolean;
+  pill?: string;
 };
 
 type TabListProps = {
@@ -62,7 +62,7 @@ export const TabList = ({ tabs, tabListId, loading }: TabListProps) => {
                   setActiveTabId(tab.id);
                 }}
                 disabled={tab.disabled ?? loading}
-                hasBetaPill={tab.hasBetaPill}
+                pill={tab.pill}
               />
             ))}
         </StyledContainer>