Skip to content

Commit

Permalink
feat(refactor): Integrated the refactor flow along with subtle UI cha…
Browse files Browse the repository at this point in the history 
…nges
  • Loading branch information
@wadhia-yash
wadhia-yash committed Mar 28, 2024
1 parent c5ba116 commit 4115f04
Show file tree
Hide file tree
Showing 11 changed files with 353 additions and 398 deletions.
24 changes: 6 additions & 18 deletions vscode/media/agent-provider/agent-provider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,8 @@ class AgentProvider {

this.json.forEach(agent => {
if (agent.name.trim().length > 0) {
agent.supported_commands.forEach(commands => {
this.agents.push(`${agent.name} - ${commands.slug}`);
});
this.agents.push(agent.name);
} else {
this.commands.push();
agent.supported_commands.forEach(commands => {
this.commands.push(commands.slug);
});
Expand All @@ -19,22 +16,13 @@ class AgentProvider {
}

getInputs(inputString) {
const [agent, command] = inputString.split(' - ');
if (agent && command) {
const agentData = data.find(item => item.name === agent);
if (agentData) {
const commandData = agentData.supported_commands.find(cmd => cmd.slug === command);
if (commandData) {
return commandData;
for (const item of data) {
for (const command of item.supported_commands) {
if (command.slug === inputString) {
return command;
}
}
} else if (inputString.startsWith('/')) {
const commandData = data.find(item => item.name.trim().length === 0).supported_commands.find(cmd => cmd.slug === inputString);
if (commandData) {
return commandData;
}
}

return [];
return []; // Return null if no matching slug is found
}
}
24 changes: 15 additions & 9 deletions vscode/media/agent-ui-builder/agent-ui-builder.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,11 @@ class AgentUIBuilder {
inputSpan.id = id;
inputSpan.contentEditable = true;
inputSpan.tabIndex = 0;
inputSpan.classList.add("px-2", "inline-block", "rounded-tr-[4px]", "rounded-br-[4px]", "string_input", id);
inputSpan.classList.add("px-2", "inline-block", "rounded-tr-[4px]", "rounded-br-[4px]", "string_input", id, "mb-1", "ml-[1px]", "mr-[1px]");
inputSpan.textContent = '\u200B';

this.ref.addEventListener('input', (event) => this.onStringInput(event, inputSpan));
this.ref.addEventListener('input', (event) => this.onStringInput(event, id));
this.ref.addEventListener('paste', () => this.onTextPaste(id));

inputContainer.appendChild(inputSpan);

Expand All @@ -49,7 +50,7 @@ class AgentUIBuilder {
codePlaceholder.id = id;
codePlaceholder.contentEditable = "false";
codePlaceholder.tabIndex = 0;
codePlaceholder.classList.add("ml-1", "mb-1", "px-[7px]", "inline-block", "cursor-pointer", "rounded-[4px]", "mt-1", "code_input");
codePlaceholder.classList.add("ml-1", "mb-1", "px-[7px]", "inline-flex", "cursor-pointer", "rounded-[4px]", "mt-1", "code_input", "items-center");
codePlaceholder.textContent = display_text;
codeContainer.id = "code-container";
codeContainer.appendChild(codePlaceholder);
Expand All @@ -58,23 +59,28 @@ class AgentUIBuilder {
}
}

onStringInput(event, input) {
onTextPaste(id) {
const inputSpan = document.getElementById(id);
inputSpan.dispatchEvent(new Event('input', { bubbles: true }));
}

onStringInput(event, id) {
const sel = window.getSelection();
const inputSpan = document.getElementById(input.id);
if (sel.anchorNode.parentNode.classList.contains(input.id)) {
const inputIndex = agentInputsJson.inputs.findIndex(_input => _input.id === input.id);
const inputSpan = document.getElementById(id);
if (event.target === inputSpan || (sel.anchorNode && sel.anchorNode.parentNode && sel.anchorNode.parentNode.classList.contains(id))) {
const inputIndex = agentInputsJson.inputs.findIndex(_input => _input.id === id);
if (inputIndex !== -1) {
agentInputsJson.inputs[inputIndex].value = inputSpan.textContent.trim();
}
}
}

onCodeInput(chipsData, chipName) {
const firstCodeInput = agentInputsJson.inputs.find(input => input.type === "code_input" && !input.value);
const firstCodeInput = agentInputsJson.inputs.find(input => input.type === "code_input");
if (firstCodeInput) {
const codeInputSpan = document.getElementById(firstCodeInput.id);
firstCodeInput.value = JSON.stringify(chipsData);
codeInputSpan.textContent = chipName;
codeInputSpan.innerHTML = `${dartIcon}<span class="ml-1">${chipName}</span>`;
}
}
}
50 changes: 37 additions & 13 deletions vscode/media/command-deck/command-deck.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,20 +124,44 @@ class CommandDeck {

selectItem(active) {
return () => {
this.ref.textContent = '';
debugger;
const option = this.options[active];

const agentUIBuilder = new AgentUIBuilder(this.ref);
agentInputsJson = this.agentProvider.getInputs(option);
agentUIBuilder.buildAgentUI(agentInputsJson);

this.ref.focus();
this.closeMenu();

setTimeout(() => {
adjustHeight();
commandEnable = true;
}, 0);
if (!option.startsWith('/')) {
this.ref.textContent = '';
}
if (option.startsWith('/')) {
const textContent = this.ref.innerHTML;
const atIndex = textContent.lastIndexOf('/');
this.ref.innerHTML = textContent.substring(0, atIndex) + textContent.substring(atIndex + 1);
}
if (option.startsWith('@')) {
const agentSpan = document.createElement('span');
agentSpan.classList.add("inline-block", "text-[#287CEB]");
agentSpan.contentEditable = false;
agentSpan.textContent = `${option}\u200B`;
this.ref.appendChild(agentSpan);
const name = option;
const item = this.json.find(item => item.name === name);
if (item && item.supported_commands) {
this.options = item.supported_commands.map(command => command.slug);
this.renderMenu();
} else {
this.options = [];
this.closeMenu();
}
} else {
const agentUIBuilder = new AgentUIBuilder(this.ref);
agentInputsJson = this.agentProvider.getInputs(option);
agentUIBuilder.buildAgentUI(agentInputsJson);

this.ref.focus();
this.closeMenu();

setTimeout(() => {
adjustHeight();
commandEnable = true;
}, 0);
}
};
}

Expand Down
4 changes: 1 addition & 3 deletions vscode/media/onboarding/onboarding.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,7 @@
</svg>
</div>
</a>

<div class="py-3 my-2 px-5" id="google-api-key-header">
<div class="py-3 my-2 px-5 hidden" id="google-api-key-header">
<p class="text-lg font-bold mb-5">Let's get started</span>
<p class="break-words">Step 1. Create and enter <span class="font-bold">Free Gemini Key</span></p>
<p class="break-words mb-5">Visit <a class="underline cursor-pointer"
Expand Down Expand Up @@ -152,7 +151,6 @@
<label
class="text-center inline-flex text-2xl justify-center items-center text-white cursor-pointer"
title="Attach" id="attach-file" for="file-upload">

</label>
<input id="file-upload" type="file" accept="image/*" class="hidden" />
<button class="ml-2" id="send-chat" title="tool tip on the send button">
Expand Down
Loading

0 comments on commit 4115f04

Please sign in to comment.