Multi-Model AI Assistant

by Froala_marketing

HTML

<link
  href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css"
  rel="stylesheet"
  type="text/css"
/>

<div class="container">
  <p>In the script, update the AI models' API keys with valid ones.</p>
  <p>From the editor toolbar, use the "Select AI Model" dropdown to switch AI models.</p>

  <div id="editor"></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>

JavaScript

const OPENAI_API_KEY = '****',
  DEEPSEEK_API_KEY = '****',
  GEMINI_API_KEY = '****',
  GROQ_API_KEY = '****',
  OPENROUTER_API_KEY = '****';

const AI_MODELS = {
  chatgpt: 'ChatGPT',
  deepseek: 'DeepSeek',
  gemini: 'Gemini',
  groq: 'Groq Cloud',
  openrouter: 'OpenRouter',
};

const aiDefaultModel = 'gemini';

const aiReqHandler = {
  chatgpt: openAIRequest,
  claude: claudeRequest,
  deepseek: deepSeekRequest,
  gemini: geminiRequest,
  groq: groqRequest,
  openrouter: openRouterRequest,
};

FroalaEditor.DefineIcon('aiModel', {
  template: 'svgMultiplePath',
  VIEWBOX: '0 0 48 48',
  PATHS:
    '\n                  <path d="M17.9,2h-.4L7.6,6.6a1,1,0,0,0-.6.9v7.4l-.6.5-4,3.3a.8.8,0,0,0-.4.8v9a.9.9,0,0,0,.4.8l4,3.3.6.5v7.4a1,1,0,0,0,.6.9l9.9,4.5h.4l.6-.2,4-2.7V25.5H21a1.5,1.5,0,0,1,0-3h1.5V4.9l-4-2.7ZM9,13.5l2.8,1.9a1.5,1.5,0,0,1,.4,2.1,1.4,1.4,0,0,1-1.2.7,1.1,1.1,0,0,1-.8-.3L9,17.1Zm-5,9H7.5a1.5,1.5,0,0,1,0,3H4Zm5,8.4,1.2-.8a1.4,1.4,0,0,1,2,.4,1.5,1.5,0,0,1-.4,2.1L9,34.5ZM19.5,18.6l-4,4v2.8l4,4v5.2l-3.4,3.5a2.1,2.1,0,0,1-1.1.4,2.1,2.1,0,0,1-1.1-.4,1.6,1.6,0,0,1,0-2.2l2.6-2.5V30.6l-4-4V21.4l4-4V14.6l-2.6-2.5a1.6,1.6,0,1,1,2.2-2.2l3.4,3.5Z"></path> <path d="M45.6,18.7l-4-3.3-.6-.5V7.5a1,1,0,0,0-.6-.9L30.5,2.1h-.4l-.6.2-4,2.7V22.5H27a1.5,1.5,0,0,1,0,3H25.5V43.1l4,2.7.6.2h.4l9.9-4.5a1,1,0,0,0,.6-.9V33.1l.6-.5,4-3.3a.9.9,0,0,0,.4-.8v-9A.8.8,0,0,0,45.6,18.7ZM39,17.1l-1.2.8a1.1,1.1,0,0,1-.8.3,1.4,1.4,0,0,1-1.2-.7,1.5,1.5,0,0,1,.4-2.1L39,13.5ZM28.5,29.4l4-4V22.6l-4-4V13.4l3.4-3.5a1.6,1.6,0,0,1,2.2,2.2l-2.6,2.5v2.8l4,4v5.2l-4,4v2.8l2.6,2.5a1.6,1.6,0,0,1,0,2.2,1.7,1.7,0,0,1-2.2,0l-3.4-3.5ZM39,34.5l-2.8-1.9a1.5,1.5,0,0,1-.4-2.1,1.4,1.4,0,0,1,2-.4l1.2.8Zm5-9H40.5a1.5,1.5,0,0,1,0-3H44Z"></path> \n  ',
});

FroalaEditor.RegisterCommand('aiModelList', {
  title: 'Select AI Model',
  type: 'dropdown',
  icon: 'aiModel',
  options: AI_MODELS,
  undo: true,
  focus: true,
  refreshAfterCallback: true,
  callback: function (cmd, val)...