Skip to content

Commit 297293e

Browse files
MrBlankCodingMrBlankCoding
committed
Added ai editor into the editor
1 parent 3c30708 commit 297293e

20 files changed

+2054
-1234
lines changed

‎package-lock.json‎

Lines changed: 26 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,10 @@
5050
"@codemirror/view": "6.38.6",
5151
"@replit/codemirror-minimap": "0.5.2",
5252
"codemirror": "^6.0.2",
53+
"diff": "^8.0.3",
54+
"diff-match-patch": "^1.0.5",
5355
"feather-icons": "4.29.2",
56+
"fuzzysort": "^3.1.0",
5457
"marked": "^17.0.0"
5558
},
5659
"lint-staged": {

‎src/_locales/en/messages.json‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -361,6 +361,45 @@
361361
"editorEnableAutosave": {
362362
"message": "Enable Autosave"
363363
},
364+
"editorAiAssistant": {
365+
"message": "AI Code Assistant"
366+
},
367+
"editorAiAssistantDesc": {
368+
"message": "Write, refactor, and explain code with AI"
369+
},
370+
"editorAiNoConfig": {
371+
"message": "AI is not configured"
372+
},
373+
"editorAiConfigure": {
374+
"message": "Configure AI Keys"
375+
},
376+
"editorAiModel": {
377+
"message": "Model"
378+
},
379+
"editorAiWelcome": {
380+
"message": "Hello! I can help you write or refactor your userscript. What would you like to do?"
381+
},
382+
"editorAiInputPlaceholder": {
383+
"message": "Ask AI to write or refactor code..."
384+
},
385+
"editorAiRefactor": {
386+
"message": "Refactor"
387+
},
388+
"editorAiExplain": {
389+
"message": "Explain"
390+
},
391+
"editorAiFixErrors": {
392+
"message": "Fix Errors"
393+
},
394+
"editorAiApply": {
395+
"message": "Apply"
396+
},
397+
"editorAiDiscard": {
398+
"message": "Discard"
399+
},
400+
"editorAiThinking": {
401+
"message": "Thinking..."
402+
},
364403

365404
"aiSettingsTitle": {
366405
"message": "AI DOM Editor Settings"

‎src/_locales/es/messages.json‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -360,6 +360,45 @@
360360
"editorEnableAutosave": {
361361
"message": "Habilitar Guardado Automático"
362362
},
363+
"editorAiAssistant": {
364+
"message": "Asistente de Código IA"
365+
},
366+
"editorAiAssistantDesc": {
367+
"message": "Escribe, refina y explica código con IA"
368+
},
369+
"editorAiNoConfig": {
370+
"message": "IA no está configurada"
371+
},
372+
"editorAiConfigure": {
373+
"message": "Configurar Claves de IA"
374+
},
375+
"editorAiModel": {
376+
"message": "Modelo"
377+
},
378+
"editorAiWelcome": {
379+
"message": "¡Hola! Puedo ayudarte a escribir o refinar tu script de usuario. ¿Qué te gustaría hacer?"
380+
},
381+
"editorAiInputPlaceholder": {
382+
"message": "Pide a la IA que escriba o refina código..."
383+
},
384+
"editorAiRefactor": {
385+
"message": "Refactorizar"
386+
},
387+
"editorAiExplain": {
388+
"message": "Explicar"
389+
},
390+
"editorAiFixErrors": {
391+
"message": "Corregir Errores"
392+
},
393+
"editorAiApply": {
394+
"message": "Aplicar"
395+
},
396+
"editorAiDiscard": {
397+
"message": "Descartar"
398+
},
399+
"editorAiThinking": {
400+
"message": "Pensando..."
401+
},
363402
"aiSettingsTitle": {
364403
"message": "Configuración del Editor DOM de IA"
365404
},

‎src/_locales/fr/messages.json‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -361,6 +361,45 @@
361361
"editorEnableAutosave": {
362362
"message": "Activer la Sauvegarde Automatique"
363363
},
364+
"editorAiAssistant": {
365+
"message": "Assistant de Code IA"
366+
},
367+
"editorAiAssistantDesc": {
368+
"message": "Écrivez, affinez et expliquez du code avec l'IA"
369+
},
370+
"editorAiNoConfig": {
371+
"message": "L'IA n'est pas configurée"
372+
},
373+
"editorAiConfigure": {
374+
"message": "Configurer les clés IA"
375+
},
376+
"editorAiModel": {
377+
"message": "Modèle"
378+
},
379+
"editorAiWelcome": {
380+
"message": "Bonjour ! Je peux vous aider à écrire ou à affiner votre script utilisateur. Que aimeriez-vous faire ?"
381+
},
382+
"editorAiInputPlaceholder": {
383+
"message": "Demandez à l'IA d'écrire ou d'affiner du code..."
384+
},
385+
"editorAiRefactor": {
386+
"message": "Refactoriser"
387+
},
388+
"editorAiExplain": {
389+
"message": "Expliquer"
390+
},
391+
"editorAiFixErrors": {
392+
"message": "Corriger les erreurs"
393+
},
394+
"editorAiApply": {
395+
"message": "Appliquer"
396+
},
397+
"editorAiDiscard": {
398+
"message": "Jeter"
399+
},
400+
"editorAiThinking": {
401+
"message": "En train de réfléchir..."
402+
},
364403
"aiSettingsTitle": {
365404
"message": "Paramètres de l'Éditeur DOM IA"
366405
},

‎src/ai_dom_editor/editor/ai_dom_editor.html‎

Lines changed: 65 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title data-i18n="aiEditorTitle">AI DOM Editor</title>
77
<link rel="stylesheet" href="../../assets/styles/ai/ai_dom_editor.css" />
8+
<link rel="stylesheet" href="../../assets/styles/ai/ai_chat_common.css" />
89
</head>
910
<body>
1011
<div class="ai-editor-container">
@@ -57,63 +58,76 @@ <h2 class="header-title" id="headerTitle" data-i18n="aiEditorTitle">AI DOM Edito
5758
</div>
5859

5960
<!-- Chat Container -->
60-
<div class="chat-container" id="chatContainer">
61-
<div class="welcome-message" id="welcomeMessage">
62-
<div class="welcome-icon">
63-
<i data-feather="layers" width="48" height="48"></i>
64-
</div>
65-
<h2 data-i18n="aiEditorWelcomeTitle">Ai Editor</h2>
66-
<p data-i18n="aiEditorWelcomeSubtitle">What's your idea?</p>
67-
<div class="example-prompts">
68-
<div class="example-prompt" data-i18n="aiEditorExamplePrompt1">
69-
Make the background pink and all headings blue
61+
<div class="ai-chat-container">
62+
<div class="ai-chat-history" id="chatContainer">
63+
<div class="welcome-message" id="welcomeMessage">
64+
<div class="welcome-icon">
65+
<i data-feather="layers" width="48" height="48"></i>
7066
</div>
71-
<div class="example-prompt" data-i18n="aiEditorExamplePrompt2">Remove all Ads</div>
72-
<div class="example-prompt" data-i18n="aiEditorExamplePrompt3">
73-
Make all buttons larger
67+
<h2 data-i18n="aiEditorWelcomeTitle">Ai Editor</h2>
68+
<p data-i18n="aiEditorWelcomeSubtitle">What's your idea?</p>
69+
<div class="example-prompts">
70+
<div class="example-prompt" data-i18n="aiEditorExamplePrompt1">
71+
Make the background pink and all headings blue
72+
</div>
73+
<div class="example-prompt" data-i18n="aiEditorExamplePrompt2">Remove all Ads</div>
74+
<div class="example-prompt" data-i18n="aiEditorExamplePrompt3">
75+
Make all buttons larger
76+
</div>
7477
</div>
7578
</div>
79+
<div id="messages"></div>
7680
</div>
77-
<div class="messages" id="messages"></div>
78-
</div>
79-
80-
<!-- Element Selector Indicator -->
81-
<div class="selector-active" id="selectorActive" style="display: none">
82-
<i data-feather="target" width="16" height="16"></i>
83-
<span data-i18n="aiEditorClickElement">Click an element on the page</span>
84-
<button class="btn-text" id="cancelSelector" data-i18n="aiEditorCancel">Cancel</button>
85-
</div>
8681

87-
<!-- Input Area -->
88-
<div class="input-area">
89-
<div class="model-selector-row">
90-
<select
91-
id="modelSelector"
92-
class="model-selector"
93-
title="Select AI Model"
94-
data-i18n-title="aiEditorSelectModel"
95-
>
96-
<option value="" data-i18n="aiEditorLoadingModels">Loading models...</option>
97-
</select>
82+
<!-- Element Selector Indicator -->
83+
<div class="selector-active" id="selectorActive" style="display: none">
84+
<i data-feather="target" width="16" height="16"></i>
85+
<span data-i18n="aiEditorClickElement">Click an element on the page</span>
86+
<button class="btn-text" id="cancelSelector" data-i18n="aiEditorCancel">Cancel</button>
9887
</div>
99-
<div class="input-wrapper">
100-
<button
101-
class="tool-btn"
102-
id="elementSelectorBtn"
103-
title="Select element on page"
104-
data-i18n-title="aiEditorSelectElement"
105-
>
106-
<i data-feather="target" width="18" height="18"></i>
107-
</button>
108-
<textarea
109-
id="userInput"
110-
placeholder="Describe what you want to change on this page..."
111-
data-i18n-placeholder="aiEditorPlaceholder"
112-
rows="1"
113-
></textarea>
114-
<button class="send-btn" id="sendBtn" disabled>
115-
<i data-feather="send" width="20" height="20"></i>
116-
</button>
88+
89+
<!-- Input Area -->
90+
<div class="input-area">
91+
<div class="model-selector-row">
92+
<select
93+
id="modelSelector"
94+
class="model-selector"
95+
title="Select AI Model"
96+
data-i18n-title="aiEditorSelectModel"
97+
>
98+
<option value="" data-i18n="aiEditorLoadingModels">Loading models...</option>
99+
</select>
100+
</div>
101+
<div class="ai-chat-input-wrapper">
102+
<button
103+
class="tool-btn"
104+
id="elementSelectorBtn"
105+
title="Select element on page"
106+
data-i18n-title="aiEditorSelectElement"
107+
style="
108+
position: absolute;
109+
left: 1.5rem;
110+
bottom: 1.5rem;
111+
z-index: 10;
112+
width: 32px;
113+
height: 32px;
114+
padding: 0;
115+
"
116+
>
117+
<i data-feather="target" width="18" height="18"></i>
118+
</button>
119+
<textarea
120+
id="userInput"
121+
class="ai-chat-input"
122+
placeholder="Describe what you want to change on this page..."
123+
data-i18n-placeholder="aiEditorPlaceholder"
124+
rows="1"
125+
style="padding-left: 3.5rem"
126+
></textarea>
127+
<button class="ai-send-btn" id="sendBtn" disabled>
128+
<i data-feather="send" width="18" height="18"></i>
129+
</button>
130+
</div>
117131
</div>
118132
</div>
119133
</div>

0 commit comments

Comments
 (0)