AI Assistant Plugin

import { Editor, AIAssistantPlugin } from 'on-codemerge';

const editor = new Editor(container, {
  plugins: [AIAssistantPlugin()],
});

// OpenAI options
{
  model: 'gpt-4o-mini',
  temperature: 0.7,
  maxTokens: 1000,
  topP: 1.0
}

// DeepSeek options
{
  model: 'deepseek-chat',
  temperature: 0.5,
  maxTokens: 2000
}

// HuggingFace options
{
  model: 'meta-llama/Llama-3.1-8B-Instruct',
  temperature: 0.8,
  maxTokens: 500
}

Write an article about the benefits of using artificial intelligence in web development. Include examples of JavaScript code and explain how AI can simplify the development process.

The response should be formatted as HTML code that can be inserted into a text editor. Follow these rules:
1. Headings should be wrapped in <h1>, <h2>, <h3>, etc.
2. Paragraphs should be wrapped in <p>.
3. Lists should use <ul>, <ol>, and <li>.
4. Code should be wrapped in <pre><code>.
5. Use <strong> and <em> for emphasis.
6. For images, use the <img> tag with the src attribute.
7. Links should use the <a> tag.
8. Tables should use <table>, <tr>, <th>, and <td>.
9. Do not include unnecessary tags like <html>, <head>, or <body>.
10. Ensure code examples are properly formatted.

// Settings are saved under the key 'aiAssistantSettings'
const settings = {
  apiKey: 'your-api-key',
  driverName: 'openai',
  structurePrompt: '...',
  prompt: '...',
  driverOptions: {
    model: 'gpt-4o-mini',
    temperature: 0.7,
    maxTokens: 1000,
  },
};

import React, { useEffect, useRef } from 'react';
import { Editor, AIAssistantPlugin } from 'on-codemerge';

function MyEditor() {
  const editorRef = useRef(null);
  const editorInstance = useRef(null);

  useEffect(() => {
    if (editorRef.current && !editorInstance.current) {
      editorInstance.current = new Editor(editorRef.current);
      editorInstance.current.use(AIAssistantPlugin());
    }

    return () => {
      if (editorInstance.current) {
        editorInstance.current.destroy();
      }
    };
  }, []);

  return <div ref={editorRef} className="editor-container" />;
}

<template>
  <div ref="editorContainer" class="editor-container"></div>
</template>

<script>
import { Editor, AIAssistantPlugin } from 'on-codemerge';

export default {
  name: 'MyEditor',
  mounted() {
    this.editor = new Editor(this.$refs.editorContainer);
    this./* use plugins: [AIAssistantPlugin()] in Editor(...) */;
  },
  beforeDestroy() {
    if (this.editor) {
      this.editor.destroy();
    }
  }
};
</script>

import { AIDriver, DriverOptions, OptionsDescription } from './AIDriver';

export class CustomAIDriver implements AIDriver<DriverOptions> {
  constructor(private apiKey: string) {}

  async generateText(prompt: string, options?: DriverOptions): Promise<string> {
    // Implement your custom AI generation logic
    const response = await fetch('your-ai-endpoint', {
      method: 'POST',
      headers: {
        Authorization: `Bearer ${this.apiKey}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        prompt,
        model: options?.model,
        temperature: options?.temperature,
        maxTokens: options?.maxTokens,
      }),
    });

    const data = await response.json();
    return data.text;
  }

  getOptionsDescription(): OptionsDescription {
    return {
      model: {
        type: 'list',
        label: 'Model',
        options: ['custom-model-1', 'custom-model-2'],
        default: 'custom-model-1',
      },
      temperature: {
        type: 'number',
        label: 'Temperature',
        default: 0.7,
        min: 0,
        max: 2,
      },
      maxTokens: {
        type: 'number',
        label: 'Max Tokens',
        default: 1000,
        min: 1,
        max: 4000,
      },
    };
  }
}

// Add console logging
console.log('AI Assistant plugin initialized');

// Check API responses
editor.on('ai:error', (error) => {
  console.error('AI Error:', error);
});