Skip to content

Commit 04facd6

Browse files
bajrangCoderbajrangCoder
committed
feat: basic ai assistant setup and ui
1 parent a34b547 commit 04facd6

File tree

5 files changed

+1304
-0
lines changed

5 files changed

+1304
-0
lines changed

‎src/ace/commands.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -309,6 +309,14 @@ const commands = [
309309
},
310310
readOnly: true,
311311
},
312+
{
313+
name: "openAiAssistant",
314+
description: "AI Assistant",
315+
exec() {
316+
acode.exec("open", "ai_assistant");
317+
},
318+
readOnly: true,
319+
},
312320
{
313321
name: "openFileExplorer",
314322
description: "File Explorer",

‎src/lib/commands.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import select from "dialogs/select";
66
import fsOperation from "fileSystem";
77
import actions from "handlers/quickTools";
88
import recents from "lib/recents";
9+
import AiAssistant from "pages/aiAssistant";
910
import FileBrowser from "pages/fileBrowser";
1011
import plugins from "pages/plugins";
1112
import Problems from "pages/problems/problems";
@@ -187,6 +188,10 @@ export default {
187188
FileBrowser();
188189
break;
189190

191+
case "ai_assistant":
192+
AiAssistant();
193+
break;
194+
190195
default:
191196
return;
192197
}

‎src/pages/aiAssistant/assistant.js‎

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
import EditorFile from "lib/editorFile";
2+
import styles from "./assistant.module.scss";
3+
4+
export default function openAIAssistantPage() {
5+
const aiAssistantContainer = (
6+
<div className="chat-container">
7+
{/* Header */}
8+
<div className="chat-header">
9+
<div className="header-left">
10+
<button className="btn btn-sm btn-outline" id="new-chat-btn">
11+
<i className="icon add"></i>
12+
<span className="btn-text">New Chat</span>
13+
</button>
14+
<div className="separator"></div>
15+
<button className="btn btn-sm btn-outline" id="toggle-history-btn">
16+
<i className="icon historyrestore"></i>
17+
<span className="btn-text">History</span>
18+
</button>
19+
<div className="separator"></div>
20+
<div className="profile-switcher">
21+
<button className="profile-button" id="profile-btn">
22+
<i className="icon edit"></i>
23+
<span>Write</span>
24+
<i className="icon keyboard_arrow_down"></i>
25+
</button>
26+
<div className="profile-dropdown" id="profile-dropdown">
27+
<div className="profile-option" data-profile="ask">
28+
<div className="profile-option-header">
29+
<i className="icon info_outline"></i>
30+
<span>Ask</span>
31+
</div>
32+
<div className="profile-option-description">
33+
Suggest approaches without writing code
34+
</div>
35+
</div>
36+
<div className="profile-option" data-profile="write">
37+
<div className="profile-option-header">
38+
<i className="icon edit"></i>
39+
<span>Write</span>
40+
</div>
41+
<div className="profile-option-description">
42+
Write and implement code
43+
</div>
44+
</div>
45+
<div className="profile-option" data-profile="custom">
46+
<div className="profile-option-header">
47+
<i className="icon settings"></i>
48+
<span>Custom</span>
49+
</div>
50+
<div className="profile-option-description">
51+
Custom permissions and capabilities
52+
</div>
53+
<div className="permission-toggles" id="custom-permissions">
54+
<div className="permission-toggle">
55+
<div className="permission-label">
56+
<i data-feather="globe" className="feather-xs"></i>
57+
<span>Network Requests</span>
58+
</div>
59+
<label className="toggle-switch">
60+
<input type="checkbox" checked />
61+
<span className="toggle-slider"></span>
62+
</label>
63+
</div>
64+
<div className="permission-toggle">
65+
<div className="permission-label">
66+
<i data-feather="file" className="feather-xs"></i>
67+
<span>Read Files</span>
68+
</div>
69+
<label className="toggle-switch">
70+
<input type="checkbox" checked />
71+
<span className="toggle-slider"></span>
72+
</label>
73+
</div>
74+
<div className="permission-toggle">
75+
<div className="permission-label">
76+
<i data-feather="edit" className="feather-xs"></i>
77+
<span>Write Files</span>
78+
</div>
79+
<label className="toggle-switch">
80+
<input type="checkbox" />
81+
<span className="toggle-slider"></span>
82+
</label>
83+
</div>
84+
<div className="permission-toggle">
85+
<div className="permission-label">
86+
<i data-feather="terminal" className="feather-xs"></i>
87+
<span>Execute Commands</span>
88+
</div>
89+
<label className="toggle-switch">
90+
<input type="checkbox" />
91+
<span className="toggle-slider"></span>
92+
</label>
93+
</div>
94+
</div>
95+
</div>
96+
</div>
97+
</div>
98+
</div>
99+
<div className="header-right">
100+
<button className="btn btn-icon btn-outline" id="settings-btn">
101+
<i className="icon settings"></i>
102+
</button>
103+
</div>
104+
</div>
105+
106+
{/* Main content */}
107+
<div className="chat-main">
108+
{/* Chat history sidebar */}
109+
<div className="chat-sidebar hidden" id="chat-sidebar">
110+
<div className="sidebar-header">
111+
<h3 className="sidebar-title">CHAT HISTORY</h3>
112+
<button className="btn btn-icon">
113+
<i className="icon add"></i>
114+
</button>
115+
</div>
116+
<div className="chat-history">
117+
<div className="history-item active">
118+
<div className="history-icon">
119+
<i className="icon chat_bubble"></i>
120+
</div>
121+
<div className="history-text">File upload component</div>
122+
</div>
123+
<div className="history-item">
124+
<div className="history-icon">
125+
<i className="icon chat_bubble"></i>
126+
</div>
127+
<div className="history-text">Authentication implementation</div>
128+
</div>
129+
<div className="history-item">
130+
<div className="history-icon">
131+
<i className="icon chat_bubble"></i>
132+
</div>
133+
<div className="history-text">React state management</div>
134+
</div>
135+
</div>
136+
</div>
137+
138+
{/* Messages area */}
139+
<div className="messages-wrapper" id="messages-wrapper">
140+
<div className="messages-container" id="messages-container">
141+
{/* Messages will be added here dynamically */}
142+
</div>
143+
</div>
144+
</div>
145+
146+
{/* Input area */}
147+
<div className="chat-input-container">
148+
<div className="chat-input-wrapper">
149+
<textarea
150+
className="chat-input"
151+
id="chat-input"
152+
placeholder="Message..."
153+
></textarea>
154+
<div className="chat-input-actions">
155+
<div className="input-tools">
156+
<button className="btn btn-icon" title="Attach file">
157+
<i className="icon attach_file"></i>
158+
</button>
159+
{/* <button className="btn btn-icon" title="Code snippet">
160+
<i data-feather="code" className="feather-sm"></i>
161+
</button>
162+
<button className="btn btn-icon" title="Format text">
163+
<i data-feather="type" className="feather-sm"></i>
164+
</button> */}
165+
</div>
166+
<div className="input-send">
167+
<button className="btn btn-sm btn-outline" id="clear-btn">
168+
<i className="icon clearclose"></i>
169+
<span className="btn-text">Clear</span>
170+
</button>
171+
<button className="btn btn-sm btn-primary" id="send-btn" disabled>
172+
<i className="icon telegram"></i>
173+
<span className="btn-text">Send</span>
174+
</button>
175+
</div>
176+
</div>
177+
</div>
178+
</div>
179+
</div>
180+
);
181+
182+
const uri = "ai://assistant";
183+
184+
// Check if the tab is already open
185+
const existingFile = editorManager.getFile(uri, "uri");
186+
187+
if (existingFile) {
188+
existingFile.makeActive();
189+
return;
190+
}
191+
192+
// Create a new EditorFile instance for the AI Assistant tab
193+
new EditorFile("AI Assistant", {
194+
uri: uri,
195+
type: "page",
196+
tabIcon: "file file_type_assistant",
197+
content: aiAssistantContainer,
198+
render: true,
199+
stylesheets: styles,
200+
hideQuickTools: true,
201+
});
202+
203+
console.log("Opened AI Assistant tab.");
204+
}

0 commit comments

Comments
 (0)