Export Editor as the default and rename it to CopilotEditor

docs/components/editor-demo.tsx

@@ -1,5 +1,5 @@
 import {motion} from 'framer-motion';
-import {Editor, Theme} from 'monacopilot';
+import CopilotEditor, {Theme} from 'monacopilot';
 import {useTheme} from 'next-themes';
 
 const EDITOR_DEFAULTS = {
@@ -27,7 +27,7 @@ const EditorDemo = () => {
       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
+      <CopilotEditor
         endpoint="/api/copilot"
         language={EDITOR_DEFAULTS.language}
         theme={theme}

docs/pages/docs/faq.mdx

@@ -22,7 +22,7 @@ export function FAQBox({ title, children }) {
 </FAQBox>
 
 <FAQBox title="Can i easily switch from @monaco-editor/react to monacopilot?">
-  Yes, you can easily switch from @monaco-editor/react to monacopilot. Just replace the import statement and you are good to go.
+  Yes, you can easily switch from @monaco-editor/react to monacopilot. Just replace the import statements and you are good to go.
 </FAQBox>
 
 <FAQBox title="Is AI Auto Completion Free?">

docs/pages/docs/guide/copilot-options.mdx

@@ -11,7 +11,7 @@ import { Callout } from 'nextra/components'
 Provide additional code, such as neighboring code snippets. This facilitates more accurate and workspace-specific completions by Copilot. The `externalContext` is structured as an array, allowing you to include content from multiple files.
 
 ```jsx
-<Editor 
+<CopilotEditor 
   externalContext={[
     {
       // Relative path from the current code in the editor
@@ -44,7 +44,7 @@ const copilot = new Copilot(process.env.GROQ_API_KEY, {
 By default, Copilot uses the `normal` completion speed. You can change this to `little-faster` for less latency in completions.
 
 ```jsx 
-<Editor 
+<CopilotEditor 
   completionSpeed="little-faster"
   ...
 />
@@ -60,18 +60,18 @@ The name of the file you are editing. This is used to provide more relevant comp
 For example, if you are editing a file named `utils.js`, the completions will be more relevant to utility functions.
 
 ```jsx
-<Editor 
+<CopilotEditor 
   filename="utils.js" // or "index.js", "utils/objects.js", etc.
   ...
 />
 ```
 
 #### Completions for Specific Technologies
 
-Currently, the completions are shown based on the language specified in the editor. To enable completions for specific technologies, pass the `technologies` prop to the `Editor` component.
+Currently, the completions are shown based on the language specified in the editor. To enable completions for specific technologies, pass the `technologies` prop to the `CopilotEditor` component.
 
 ```jsx 
-<Editor 
+<CopilotEditor 
   technologies={['react', 'next.js', 'tailwindcss']}
   ...
 />

docs/pages/docs/guide/copilot-setup.mdx

@@ -76,14 +76,14 @@ export default async function handler(req: GatsbyFunctionRequest, res: GatsbyFun
 
 #### Integrating Copilot to the Editor
 
-Utilize the `Editor` component with the AI auto-completion by setting the `endpoint` to the API handler:
+Utilize the `CopilotEditor` component with the AI auto-completion by setting the `endpoint` to the API handler:
 
 ```jsx {6}
-import { Editor } from "monacopilot";
+import CopilotEditor from "monacopilot";
 
 function App() {
   return (
-    <Editor 
+    <CopilotEditor 
       endpoint="/api/copilot"
       language="javascript"
     />

docs/pages/docs/index.mdx

@@ -32,28 +32,28 @@ To get started with Monacopilot, you can install it first:
     </Tabs.Tab>
 </Tabs>
 
-Just import the `Editor` component and use it in your code:
+Just import the `CopilotEditor` and use it in your code:
 
 ```jsx
-import { Editor } from "monacopilot";
+import CopilotEditor from "monacopilot";
 
 function App() {
-  return <Editor value="console.log('Hello, world!')" language="javascript" />;
+  return <CopilotEditor value="console.log('Hello, world!')" language="javascript" />;
 }
 ```
 
 The above code is a simple example of how to use Monacopilot in your React application.
 
 ### Themes
 
-Monacopilot comes with a wide range of themes that you can use in your editor. To use a theme, you can just pass the `theme` prop to the `Editor` component:
+Monacopilot comes with a wide range of themes that you can use in your editor. To use a theme, you can just pass the `theme` prop to the `CopilotEditor` component:
 
 ```jsx {8}
-import { Editor } from "monacopilot";
+import CopilotEditor from "monacopilot";
 
 function App() {
   return (
-    <Editor
+    <CopilotEditor
       value="console.log('Hello, world!')"
       language="javascript"
       theme="github-light"
@@ -62,7 +62,7 @@ function App() {
 }
 ```
 
-The above code uses the `github-light` theme in the editor. There are many other themes available. If you want to play around with the themes, you can check out the [themes](/themes) page.
+The above code uses the `github-light` theme in the editor. There are many other themes available.
 
 ### More Options and Usage
 

src/editor.tsx → src/copilot-editor.tsx

@@ -13,10 +13,10 @@ import type {
   EditorOptions,
   StandaloneCodeEditor,
 } from './types/common';
-import type EditorProps from './types/editor-props';
+import type EditorProps from './types/copilot-editor-props';
 import {deepMerge} from './utils/common';
 
-const Editor = ({
+const CopilotEditor = ({
   filename,
   endpoint,
   technologies,
@@ -67,4 +67,4 @@ const Editor = ({
   );
 };
 
-export default Editor;
+export default CopilotEditor;

src/helpers/prompt.ts

@@ -1,5 +1,5 @@
 import type {CompletionMetadata, CompletionMode} from '../types/completion';
-import type {Technologies} from '../types/editor-props';
+import type {Technologies} from '../types/copilot-editor-props';
 import {joinWithAnd} from '../utils/common';
 
 const CURSOR_PLACEHOLDER = '<<CURSOR>>';
@@ -15,7 +15,7 @@ const getDescriptionForMode = (mode: CompletionMode): string => {
     case 'completion':
       return 'completing the code';
     default:
-      return 'unknown mode';
+      return 'completing the code';
   }
 };
 

src/hooks/use-start-completion.ts

@@ -14,7 +14,7 @@ import type {
   ExternalContext,
   Filename,
   Technologies,
-} from '../types/editor-props';
+} from '../types/copilot-editor-props';
 import useDebounceFn from './use-debounce-fn';
 
 const localPredictionEngine = new LocalCodePredictionEngine();

src/index.ts

@@ -1,14 +1,31 @@
 import Copilot from './classes/copilot';
-import Editor from './editor';
+import CopilotEditor from './copilot-editor';
 import type {CompletionRequest, CompletionResponse} from './types/completion';
-import type EditorProps from './types/editor-props';
-import type {Endpoint, Technologies, Theme} from './types/editor-props';
+import type CopilotEditorProps from './types/copilot-editor-props';
+import type {Endpoint, Technologies, Theme} from './types/copilot-editor-props';
 
-export * from '@monaco-editor/react';
+// Export everything from `@monaco-editor/react` except `Editor`, `EditorProps`, and `Theme`
+// We have our own `Editor` as `CopilotEditor` and `EditorProps` as `CopilotEditorProps`
+// We have our own `Theme` exported.
+export type {
+  BeforeMount,
+  DiffBeforeMount,
+  DiffEditor,
+  DiffEditorProps,
+  DiffOnMount,
+  Monaco,
+  MonacoDiffEditor,
+  OnChange,
+  OnMount,
+  OnValidate,
+  useMonaco,
+  loader,
+} from '@monaco-editor/react';
+
+export {CopilotEditor as default};
 
 export {
-  Editor,
-  EditorProps,
+  CopilotEditorProps,
   Theme,
   Endpoint,
   Technologies,

src/types/completion.ts

@@ -13,7 +13,7 @@ import type {
   ExternalContext,
   Filename,
   Technologies,
-} from './editor-props';
+} from './copilot-editor-props';
 
 export type CompletionModel = 'llama';
 

src/types/editor-props.ts → src/types/copilot-editor-props.ts

@@ -43,7 +43,7 @@ export type ExternalContext = {
   content: string;
 }[];
 
-export default interface EditorProps extends MonacoEditorProps {
+export default interface CopilotEditorProps extends MonacoEditorProps {
   /**
    * The name of the file you are editing. This is used to provide more relevant completions based on the file's purpose.
    * For example, if you are editing a file named `utils.js`, the completions will be more relevant to utility functions.

test/src/app/page.tsx

@@ -2,7 +2,7 @@
 
 import {useState} from 'react';
 
-import {Editor} from 'monacopilot';
+import CopilotEditor from 'monacopilot';
 
 export default function Home() {
   const [isFastCompletion, setFastCompletion] = useState(false);
@@ -20,7 +20,7 @@ export default function Home() {
           />
         </div>
       </div>
-      <Editor
+      <CopilotEditor
         endpoint="/api/copilot"
         language="javascript"
         theme="one-dark-pro-darker"