feat: global AI integrations into playground, initial phase

.env.example

@@ -0,0 +1,5 @@
+# Hugging Face API Key (required)
+VITE_HUGGINGFACE_API_KEY=your_huggingface_api_key_here
+
+# Gemini API Key (optional, used as fallback)
+VITE_GEMINI_API_KEY=your_gemini_api_key_here

.gitignore

@@ -8,6 +8,7 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
+.env
 dist
 dist-ssr
 *.local

src/.env.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_HUGGINGFACE_API_KEY: string;
+  readonly VITE_GEMINI_API_KEY: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

src/components/AIAssistant/AIButton.tsx

@@ -0,0 +1,82 @@
+import { useState } from "react";
+import { FaMagic } from "react-icons/fa";
+import { message } from "antd";
+import { useAI } from "../../hooks/useAI";
+import { AIModal } from "./AIModal";
+import { EditorType } from "../../services/ai/AIService";
+import { DiffModal } from "./DiffModal";
+
+interface AIButtonProps {
+  editorType: EditorType;
+  currentContent: string;
+  onComplete: (completion: string) => void;
+}
+
+export function AIButton({ editorType, currentContent, onComplete }: AIButtonProps) {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isDiffModalOpen, setIsDiffModalOpen] = useState(false);
+  const [diffInfo, setDiffInfo] = useState({ content: "", diff: "", explanation: "" });
+  const { isProcessing, getCompletion } = useAI();
+
+  const handleSubmit = async (prompt: string) => {
+    try {
+      const completion = await getCompletion({
+        prompt,
+        editorType,
+        currentContent,
+      });
+
+      if (completion.diff && completion.diff.trim()) {
+        setDiffInfo({
+          content: completion.content,
+          diff: completion.diff,
+          explanation: completion.explanation || "",
+        });
+        setIsModalOpen(false);
+        setIsDiffModalOpen(true);
+      } else {
+        onComplete(completion.content);
+        setIsModalOpen(false);
+        if (completion.explanation) {
+          message.info(completion.explanation);
+        }
+      }
+    } catch (error) {
+      console.error("AI completion error:", error);
+      message.error("Failed to get AI completion");
+    }
+  };
+
+  const handleAcceptChanges = () => {
+    onComplete(diffInfo.content);
+    setIsDiffModalOpen(false);
+  };
+
+  return (
+    <>
+      <FaMagic
+        onClick={() => setIsModalOpen(true)}
+        title="AI Assist"
+        style={{
+          cursor: isProcessing ? "wait" : "pointer",
+          opacity: isProcessing ? 0.5 : 1,
+          marginRight: "8px",
+        }}
+      />
+      <AIModal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        onSubmit={handleSubmit}
+        isProcessing={isProcessing}
+        editorType={editorType}
+      />
+      <DiffModal
+        isOpen={isDiffModalOpen}
+        onClose={() => setIsDiffModalOpen(false)}
+        onAccept={handleAcceptChanges}
+        diff={diffInfo.diff}
+        explanation={diffInfo.explanation}
+      />
+    </>
+  );
+}

src/components/AIAssistant/AICommandPalette.tsx

@@ -0,0 +1,56 @@
+import { useState } from "react";
+import { Modal, Input, message } from "antd";
+import { useAI } from "../../hooks/useAI";
+import type { EditorType } from "../../services/ai/AIService";
+
+interface AICommandPaletteProps {
+  isOpen: boolean;
+  onClose: () => void;
+  editorType: EditorType;
+  currentContent: string;
+  onComplete: (completion: any) => void;
+}
+
+const { TextArea } = Input;
+
+export function AICommandPalette({ isOpen, onClose, editorType, currentContent, onComplete }: AICommandPaletteProps) {
+  const [prompt, setPrompt] = useState("");
+  const { isProcessing, getCompletion } = useAI();
+
+  const handleSubmit = async () => {
+    if (!prompt.trim()) {
+      return;
+    }
+
+    try {
+      const completion = await getCompletion({
+        prompt,
+        editorType,
+        currentContent,
+      });
+      onComplete(completion);
+      onClose();
+      setPrompt("");
+    } catch (error) {
+      console.error("AI completion error:", error);
+      message.error("Failed to get AI completion. Please try again.");
+    }
+  };
+
+  return (
+    <Modal
+      title="AI Assistant"
+      open={isOpen}
+      onOk={handleSubmit}
+      onCancel={onClose}
+      okButtonProps={{ loading: isProcessing }}
+    >
+      <TextArea
+        value={prompt}
+        onChange={(e: any) => setPrompt(e.target.value)}
+        placeholder="What would you like me to help you with?"
+        rows={4}
+      />
+    </Modal>
+  );
+}

src/components/AIAssistant/AIModal.tsx

@@ -0,0 +1,66 @@
+import { useState } from "react";
+import { Modal, Input } from "antd";
+import { LoadingOutlined } from "@ant-design/icons";
+import styled from "styled-components";
+import { AiFillOpenAI } from "react-icons/ai";
+
+const { TextArea } = Input;
+
+const StyledModal = styled(Modal)`
+  .ant-modal-content {
+    background: ${(props) => props.theme.backgroundColor};
+    color: ${(props) => props.theme.textColor};
+  }
+`;
+
+const LoadingContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+`;
+
+interface AIModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: (prompt: string) => Promise<void>;
+  isProcessing: boolean;
+  editorType: string;
+}
+
+export function AIModal({ isOpen, onClose, onSubmit, isProcessing, editorType }: AIModalProps) {
+  const [prompt, setPrompt] = useState("");
+
+  const handleSubmit = async () => {
+    if (!prompt.trim()) return;
+    await onSubmit(prompt);
+    setPrompt("");
+  };
+
+  return (
+    <StyledModal
+      title={
+        <>
+          <AiFillOpenAI /> AI Assistant
+        </>
+      }
+      open={isOpen}
+      onOk={handleSubmit}
+      onCancel={onClose}
+      okButtonProps={{ loading: isProcessing }}
+    >
+      <TextArea
+        value={prompt}
+        onChange={(e: any) => setPrompt(e.target.value)}
+        placeholder={`What would you like me to help with in the ${editorType}?`}
+        rows={4}
+      />
+      {isProcessing && (
+        <LoadingContainer>
+          <LoadingOutlined spin />
+          <span>Processing your request...</span>
+        </LoadingContainer>
+      )}
+    </StyledModal>
+  );
+}

src/components/AIAssistant/DiffModal.tsx

@@ -0,0 +1,79 @@
+import { Modal, Button, Typography } from "antd";
+import styled from "styled-components";
+
+const { Text, Paragraph } = Typography;
+
+const DiffContainer = styled.pre`
+  background-color: #f5f5f5;
+  padding: 10px;
+  border-radius: 4px;
+  max-height: 300px;
+  overflow-y: auto;
+  font-family: monospace;
+  white-space: pre-wrap;
+
+  .removed {
+    background-color: #ffdddd;
+    color: #b30000;
+  }
+
+  .added {
+    background-color: #ddffdd;
+    color: #006600;
+  }
+`;
+
+interface DiffModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onAccept: () => void;
+  diff: string;
+  explanation: string;
+}
+
+export function DiffModal({ isOpen, onClose, onAccept, diff, explanation }: DiffModalProps) {
+  const formattedDiff = diff.split("\n").map((line, index) => {
+    if (line.startsWith("+")) {
+      return (
+        <div key={index} className="added">
+          {line}
+        </div>
+      );
+    } else if (line.startsWith("-")) {
+      return (
+        <div key={index} className="removed">
+          {line}
+        </div>
+      );
+    }
+    return <div key={index}>{line}</div>;
+  });
+
+  return (
+    <Modal
+      title="Review AI Changes"
+      open={isOpen}
+      onCancel={onClose}
+      footer={[
+        <Button key="back" onClick={onClose}>
+          Cancel
+        </Button>,
+        <Button key="submit" type="primary" onClick={onAccept}>
+          Accept Changes
+        </Button>,
+      ]}
+      width={700}
+    >
+      {explanation && (
+        <Paragraph>
+          <Text strong>Explanation:</Text>
+          <br />
+          {explanation}
+        </Paragraph>
+      )}
+
+      <Text strong>Changes:</Text>
+      <DiffContainer>{formattedDiff}</DiffContainer>
+    </Modal>
+  );
+}

src/config/ai.config.ts

@@ -0,0 +1,11 @@
+export const AI_CONFIG = {
+  huggingfaceApiKey: import.meta.env.VITE_HUGGINGFACE_API_KEY,
+  geminiApiKey: import.meta.env.VITE_GEMINI_API_KEY,
+  temperature: 0.7,
+  maxTokens: 2000,
+  huggingFaceModels: {
+    primary: "mistralai/Mistral-7B-Instruct-v0.1",
+    fallback1: "meta-llama/Llama-2-7b-chat-hf",
+    fallback2: "gpt2",
+  },
+};

src/editors/MarkdownEditor.tsx

@@ -2,9 +2,7 @@ import { lazy, Suspense, useMemo, useCallback, useEffect } from "react";
 import useAppStore from "../store/store";
 import { useMonaco } from "@monaco-editor/react";
 
-const MonacoEditor = lazy(() =>
-  import("@monaco-editor/react").then((mod) => ({ default: mod.Editor }))
-);
+const MonacoEditor = lazy(() => import("@monaco-editor/react").then((mod) => ({ default: mod.Editor })));
 
 export default function MarkdownEditor({
   value,
@@ -17,10 +15,7 @@ export default function MarkdownEditor({
   const textColor = useAppStore((state) => state.textColor);
   const monaco = useMonaco();
 
-  const themeName = useMemo(
-    () => (backgroundColor ? "darkTheme" : "lightTheme"),
-    [backgroundColor]
-  );
+  const themeName = useMemo(() => (backgroundColor ? "darkTheme" : "lightTheme"), [backgroundColor]);
 
   useEffect(() => {
     if (monaco) {

src/editors/editorsContainer/AgreementData.tsx

@@ -3,6 +3,7 @@ import useAppStore from "../../store/store";
 import useUndoRedo from "../../components/useUndoRedo";
 
 import { FaUndo, FaRedo } from "react-icons/fa";
+import { AIButton } from "../../components/AIAssistant/AIButton";
 
 function AgreementData() {
   const textColor = useAppStore((state) => state.textColor);
@@ -27,6 +28,7 @@ function AgreementData() {
       <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
         <h3 style={{ color: textColor }}>Data</h3>
         <div>
+          <AIButton editorType="data" currentContent={value} onComplete={handleChange} />
           <FaUndo onClick={undo} title="Undo" style={{ cursor: "pointer", color: textColor, marginRight: "8px" }} />
           <FaRedo onClick={redo} title="Redo" style={{ cursor: "pointer", color: textColor }} />
         </div>
@@ -39,4 +41,4 @@ function AgreementData() {
   );
 }
 
-export default AgreementData;
+export default AgreementData;