docs: Add multiple files in editor demo

docs/components/editor-demo.tsx

@@ -1,47 +1,132 @@
+import {useState} from 'react';
+
+import {Tabs, TabsList, TabsTrigger} from '@/components/ui/tabs';
+import {TabsContent} from '@radix-ui/react-tabs';
 import {motion} from 'framer-motion';
-import {Editor, Theme} from 'monacopilot';
+import {Editor, EditorProps, Theme} from 'monacopilot';
 import {useTheme} from 'next-themes';
 
-const EDITOR_DEFAULTS = {
-  value: `// Try editing this code to see the AI auto-completion in action
-const reverse = (str) => {
-  return str.split("").reverse().join("");
-};
+interface File {
+  filename: string;
+  language: string;
+  path: string;
+  content: string;
+}
 
-const isPalindrome = (str) => {};`,
-  language: 'javascript',
-  options: {
-    padding: {top: 16, bottom: 16},
-    overviewRulerBorder: false,
-    overviewRulerLanes: 0,
-    scrollBeyondLastLine: false,
-    fontFamily: 'var(--font-mono)',
-    fontSize: 15,
-    scrollbar: {alwaysConsumeMouseWheel: false},
-  },
+const COPILOT_ENDPOINT = '/api/copilot';
+
+const EDITOR_OPTIONS: EditorProps['options'] = {
+  padding: {top: 60, bottom: 16},
+  overviewRulerBorder: false,
+  overviewRulerLanes: 0,
+  scrollBeyondLastLine: false,
+  fontFamily: 'var(--font-mono)',
+  fontSize: 15,
+  scrollbar: {alwaysConsumeMouseWheel: false},
+  renderLineHighlightOnlyWhenFocus: true,
+  lineDecorationsWidth: 0,
+  cursorSmoothCaretAnimation: 'on',
 };
 
 const EditorDemo = () => {
-  const {resolvedTheme} = useTheme();
-  const theme: Theme =
-    resolvedTheme === 'dark' ? 'codesandbox-dark' : 'github-light';
+  const [files, setFiles] = useState<Array<File>>([
+    {
+      filename: 'index.js',
+      language: 'javascript',
+      path: './index.js',
+      content: `import { add } from './utils';\n\nconst result = add(1, 2);`,
+    },
+    {
+      filename: 'utils.js',
+      language: 'javascript',
+      path: './utils.js',
+      content:
+        'export function add(a, b) { return a + b; }\nexport function subtract(a, b) { return a - b; }',
+    },
+    {
+      filename: 'constants.js',
+      language: 'javascript',
+      path: './constants.js',
+      content: 'export const PI = 3.14159;',
+    },
+  ]);
 
   return (
     <motion.div
       initial={{opacity: 0, y: 6}}
       animate={{opacity: 1, y: 0}}
       transition={{duration: 0.4, delay: 0.6}}
-      className="rounded-xl my-8 overflow-hidden bg-background border shadow-md shadow-neutral-50 dark:shadow-neutral-900 md:w-[700px] w-full h-[400px]">
-      <Editor
-        endpoint="/api/copilot"
-        language={EDITOR_DEFAULTS.language}
-        theme={theme}
-        className="w-full"
-        defaultValue={EDITOR_DEFAULTS.value}
-        options={EDITOR_DEFAULTS.options}
-      />
+      className="rounded-xl my-8 overflow-hidden bg-background border shadow-md shadow-neutral-50 dark:shadow-neutral-900 md:w-[700px] w-full h-[400px] relative">
+      <Tabs defaultValue="index.js" className="w-full h-full">
+        <TabsList className="absolute top-0 left-0 rounded-b-none z-50 w-full justify-start px-3 h-12 gap-2">
+          {files.map(file => (
+            <TabsTrigger
+              key={file.filename}
+              value={file.filename}
+              className="rounded-md border dark:border-neutral-700 font-mono border-neutral-300">
+              {file.filename}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+        {files.map(file => (
+          <TabsContent
+            key={file.filename}
+            value={file.filename}
+            className="w-full h-full">
+            <RenderEditor
+              filename={file.filename}
+              value={file.content}
+              language={file.language}
+              externalContext={files
+                .filter(f => f.filename !== file.filename)
+                .map(f => ({path: f.path, content: f.content}))}
+              setValue={(filename, value) =>
+                setFiles(prevFiles =>
+                  prevFiles.map(f =>
+                    f.filename === filename ? {...f, content: value} : f,
+                  ),
+                )
+              }
+            />
+          </TabsContent>
+        ))}
+      </Tabs>
     </motion.div>
   );
 };
 
+interface RenderEditorProps extends EditorProps {
+  setValue: (filename: string, value: string) => void;
+}
+
+const RenderEditor = ({
+  setValue,
+  filename,
+  value,
+  language,
+  externalContext,
+}: RenderEditorProps) => {
+  const {resolvedTheme} = useTheme();
+  const theme: Theme =
+    resolvedTheme === 'dark' ? 'codesandbox-dark' : 'github-light';
+
+  return (
+    <Editor
+      endpoint={COPILOT_ENDPOINT}
+      theme={theme}
+      options={EDITOR_OPTIONS}
+      onChange={newValue => {
+        if (filename && newValue) {
+          setValue(filename, newValue);
+        }
+      }}
+      value={value}
+      language={language}
+      className="w-full z-10"
+      loading=""
+      externalContext={externalContext}
+    />
+  );
+};
+
 export default EditorDemo;

docs/components/ui/tabs.tsx

@@ -0,0 +1,53 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/utils/misc"
+
+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-10 items-center justify-center rounded-md 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-sm px-3 py-1.5 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-sm",
+      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 }

docs/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tabs": "^1.0.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "copy-to-clipboard": "^3.3.3",

docs/style.css

@@ -81,3 +81,7 @@ h3,
 h4 {
   letter-spacing: -0.025em;
 }
+
+.monaco-editor .line-numbers {
+  width: 25px !important;
+}