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/activities/copilot/right-drawer/components/RightDrawerAIChat.tsx

@@ -0,0 +1,54 @@
+import styled from '@emotion/styled';
+import { useSetRecoilState } from 'recoil';
+
+import { copilotQueryState } from '@/activities/copilot/right-drawer/states/copilotQueryState';
+import {
+  AutosizeTextInput,
+  AutosizeTextInputVariant,
+} from '@/ui/input/components/AutosizeTextInput';
+
+const StyledContainer = styled.div`
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: flex-start;
+  overflow-y: auto;
+  position: relative;
+`;
+
+const StyledChatArea = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow-y: scroll;
+  padding: ${({ theme }) => theme.spacing(6)};
+  padding-bottom: 0px;
+`;
+
+const StyledNewMessageArea = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: ${({ theme }) => theme.spacing(6)};
+  padding-top: 0px;
+`;
+
+export const RightDrawerAIChat = () => {
+  const setCopilotQuery = useSetRecoilState(copilotQueryState);
+
+  return (
+    <StyledContainer>
+      <StyledChatArea>{/* TODO */}</StyledChatArea>
+      <StyledNewMessageArea>
+        <AutosizeTextInput
+          autoFocus
+          placeholder="Ask anything"
+          variant={AutosizeTextInputVariant.Icon}
+          onValidate={(text) => {
+            setCopilotQuery(text);
+          }}
+        />
+      </StyledNewMessageArea>
+    </StyledContainer>
+  );
+};

packages/twenty-front/src/modules/activities/copilot/right-drawer/hooks/useOpenCopilotRightDrawer.ts

@@ -0,0 +1,14 @@
+import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
+import { RightDrawerHotkeyScope } from '@/ui/layout/right-drawer/types/RightDrawerHotkeyScope';
+import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages';
+import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
+
+export const useOpenCopilotRightDrawer = () => {
+  const { openRightDrawer } = useRightDrawer();
+  const setHotkeyScope = useSetHotkeyScope();
+
+  return () => {
+    setHotkeyScope(RightDrawerHotkeyScope.RightDrawer, { goto: false });
+    openRightDrawer(RightDrawerPages.Copilot);
+  };
+};

packages/twenty-front/src/modules/activities/copilot/right-drawer/states/copilotQueryState.ts

@@ -0,0 +1,6 @@
+import { createState } from 'twenty-ui';
+
+export const copilotQueryState = createState({
+  key: 'activities/copilot-query',
+  defaultValue: '',
+});