feat: configurable panel for console + ai assistant

quadratic-client/package.json

@@ -35,6 +35,7 @@
     "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
+    "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@sentry/react": "^7.76.0",
     "@sentry/vite-plugin": "^2.15.0",

quadratic-client/src/shadcn/ui/tabs.tsx

@@ -0,0 +1,53 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/shadcn/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

quadratic-client/src/ui/menus/CodeEditor/AITab.tsx → quadratic-client/src/ui/menus/CodeEditor/AiAssistant.tsx

@@ -1,17 +1,18 @@
 import { Send, Stop } from '@mui/icons-material';
-import { Avatar, CircularProgress, FormControl, IconButton, InputAdornment, OutlinedInput } from '@mui/material';
+import { Avatar, CircularProgress, IconButton } from '@mui/material';
 import { useEffect, useRef, useState } from 'react';
 import { apiClient } from '../../../api/apiClient';
 import { EditorInteractionState } from '../../../atoms/editorInteractionStateAtom';
 import { authClient } from '../../../auth';
 // import { CodeCellRunOutput } from '../../../quadratic-core/types';
+import { Input } from '@/shadcn/ui/input';
 import { useRootRouteLoaderData } from '../../../router';
 import { colors } from '../../../theme/colors';
 import ConditionalWrapper from '../../components/ConditionalWrapper';
 import { TooltipHint } from '../../components/TooltipHint';
 import { AI } from '../../icons';
 import { CodeBlockParser } from './AICodeBlockParser';
-import './AITab.css';
+import './AiAssistant.css';
 import { QuadraticDocs } from './QuadraticDocs';
 
 // todo: fix types
@@ -28,7 +29,7 @@ type Message = {
   content: string;
 };
 
-export const AITab = ({ evalResult, editorMode, editorContent, isActive }: Props) => {
+export const AiAssistant = ({ evalResult, editorMode, editorContent, isActive }: Props) => {
   const evalResultObj = evalResult;
   const stdErr = evalResultObj?.std_err;
 
@@ -175,64 +176,7 @@ export const AITab = ({ evalResult, editorMode, editorContent, isActive }: Props
   return (
     <>
       <div
-        style={{
-          position: 'absolute',
-          bottom: '0',
-          left: '0',
-          right: '1rem',
-          padding: '1rem 0 .5rem 1rem',
-          background: 'linear-gradient(0deg, rgba(255,255,255,1) 85%, rgba(255,255,255,0) 100%)',
-          zIndex: 10,
-        }}
-      >
-        <FormControl fullWidth>
-          <OutlinedInput
-            id="prompt-input"
-            value={prompt}
-            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-              setPrompt(event.target.value);
-            }}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter' && prompt.length > 0) {
-                submitPrompt();
-              }
-            }}
-            placeholder="Ask a question"
-            endAdornment={
-              <InputAdornment position="end">
-                {loading && <CircularProgress size="1.25rem" sx={{ mx: '1rem' }} />}
-                {loading ? (
-                  <TooltipHint title="Stop generating">
-                    <IconButton size="small" color="primary" onClick={abortPrompt} edge="end">
-                      <Stop />
-                    </IconButton>
-                  </TooltipHint>
-                ) : (
-                  <ConditionalWrapper
-                    condition={prompt.length !== 0}
-                    Wrapper={({ children }) => <TooltipHint title="Send">{children as React.ReactElement}</TooltipHint>}
-                  >
-                    <IconButton
-                      size="small"
-                      color="primary"
-                      onClick={submitPrompt}
-                      edge="end"
-                      {...(prompt.length === 0 ? { disabled: true } : {})}
-                    >
-                      <Send />
-                    </IconButton>
-                  </ConditionalWrapper>
-                )}
-              </InputAdornment>
-            }
-            size="small"
-            fullWidth
-            inputRef={inputRef}
-            sx={{ py: '.25rem', pr: '1rem', fontSize: '.875rem' }}
-          />
-        </FormControl>
-      </div>
-      <div
+        className="overflow-y-auto whitespace-pre-wrap pb-2 pl-3 pr-4 text-sm outline-none"
         spellCheck={false}
         onKeyDown={(e) => {
           if (((e.metaKey || e.ctrlKey) && e.key === 'a') || ((e.metaKey || e.ctrlKey) && e.key === 'c')) {
@@ -241,11 +185,6 @@ export const AITab = ({ evalResult, editorMode, editorContent, isActive }: Props
             e.preventDefault();
           }
         }}
-        style={{
-          outline: 'none',
-          whiteSpace: 'pre-wrap',
-          paddingBottom: '5rem',
-        }}
         // Disable Grammarly
         data-gramm="false"
         data-gramm_editor="false"
@@ -295,6 +234,53 @@ export const AITab = ({ evalResult, editorMode, editorContent, isActive }: Props
           <div id="ai-streaming-output-anchor" key="ai-streaming-output-anchor" />
         </div>
       </div>
+      <form
+        className="z-10 flex gap-2 px-3 pb-2"
+        onSubmit={(e) => {
+          e.preventDefault();
+        }}
+      >
+        <Input
+          id="prompt-input"
+          value={prompt}
+          onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+            setPrompt(event.target.value);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' && prompt.length > 0) {
+              submitPrompt();
+            }
+          }}
+          autoComplete="off"
+          placeholder="Ask a question"
+        />
+
+        <div className="relative flex items-center">
+          {loading && <CircularProgress size="1rem" className="absolute right-14 top-2.5" />}
+          {loading ? (
+            <TooltipHint title="Stop generating">
+              <IconButton size="small" color="primary" onClick={abortPrompt} edge="end">
+                <Stop />
+              </IconButton>
+            </TooltipHint>
+          ) : (
+            <ConditionalWrapper
+              condition={prompt.length !== 0}
+              Wrapper={({ children }) => <TooltipHint title="Send">{children as React.ReactElement}</TooltipHint>}
+            >
+              <IconButton
+                size="small"
+                color="primary"
+                onClick={submitPrompt}
+                edge="end"
+                {...(prompt.length === 0 ? { disabled: true } : {})}
+              >
+                <Send />
+              </IconButton>
+            </ConditionalWrapper>
+          )}
+        </div>
+      </form>
     </>
   );
 };