Skip to content

Commit

Permalink
Add markdown support
Browse files Browse the repository at this point in the history
  • Loading branch information
@Tangeyo
Tangeyo committed Aug 20, 2024
1 parent 235f80c commit 40ce287
Show file tree
Hide file tree
Showing 2 changed files with 155 additions and 110 deletions.
35 changes: 35 additions & 0 deletions frontend/src/MarkdownRenderer.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
// MarkdownRenderer.js
import React from "react";
import ReactMarkdown from "react-markdown";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism";

const MarkdownRenderer = ({ content }) => {
return (
<ReactMarkdown
components={{
code({ node, inline, className, children, ...props }) {
const match = /language-(\w+)/.exec(className || "");
return !inline && match ? (
<SyntaxHighlighter
style={vscDarkPlus}
language={match[1]}
PreTag="div"
{...props}
>
{String(children).replace(/\n$/, "")}
</SyntaxHighlighter>
) : (
<code className={className} {...props}>
{children}
</code>
);
},
}}
>
{content}
</ReactMarkdown>
);
};

export default MarkdownRenderer;
230 changes: 120 additions & 110 deletions frontend/src/interface.js
View file
Original file line number Diff line number Diff line change
@@ -1,148 +1,158 @@
import ReactDOM from "react-dom";
import MarkdownRenderer from "./MarkdownRenderer";
// Download a codebase
export async function downloadCodebase() {
const ec2 = 'http://18.226.98.245:80';
const local = 'http://localhost:3000';
const apiURL = 'https://syntaxsorcerer-backend.fly.dev'
const url = document.getElementById('codebase-url').value;

const response = await fetch(`${local}/api/download`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ url })
});

const result = await response.json();
if (result.error) {
alert(result.error);
} else {
alert('Codebase downloaded and cached');
}
const ec2 = "http://18.226.98.245:80";
const local = "http://localhost:3000";
const apiURL = "https://syntaxsorcerer-backend.fly.dev";
const url = document.getElementById("codebase-url").value;

const response = await fetch(`${local}/api/download`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ url }),
});

const result = await response.json();
if (result.error) {
alert(result.error);
} else {
alert("Codebase downloaded and cached");
}
}

// Delete the existing codebase
export async function deleteCodebase() {
const ec2 = 'http://18.226.98.245:80';
const local = 'http://localhost:3000';
const apiURL = 'https://syntaxsorcerer-backend.fly.dev'

const response = await fetch(`${local}/api/delete`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ value: "Clicked" })
});

const result = await response.json();
if (result.error) {
alert(result.error);
} else {
alert('Codebase successfully deleted');
}
const ec2 = "http://18.226.98.245:80";
const local = "http://localhost:3000";
const apiURL = "https://syntaxsorcerer-backend.fly.dev";

const response = await fetch(`${local}/api/delete`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ value: "Clicked" }),
});

const result = await response.json();
if (result.error) {
alert(result.error);
} else {
alert("Codebase successfully deleted");
}
}

// Send a message to the ChatGPT API
export async function sendMessage() {
const userInput = document.getElementById('user-input').value;
if (userInput.trim() === '') return;
const userInput = document.getElementById("user-input").value;
if (userInput.trim() === "") return;

appendMessage('You', userInput);
document.getElementById('user-input').value = '';
appendMessage("You", userInput);
document.getElementById("user-input").value = "";

const sendButton = document.getElementById('send-button');
const queryButton = document.getElementById('query-button');
queryButton.disabled = true;
sendButton.disabled = true;
const sendButton = document.getElementById("send-button");
const queryButton = document.getElementById("query-button");
queryButton.disabled = true;
sendButton.disabled = true;

await fetchChatGPTResponse(userInput);
await fetchChatGPTResponse(userInput);

sendButton.disabled = false;
queryButton.disabled = false;
sendButton.disabled = false;
queryButton.disabled = false;
}

// Create a query from the user input that will be used to find the most relevant files
export async function sendCodebaseQuery() {
const userInput = document.getElementById('user-input').value;
if (userInput.trim() === '') return;
const userInput = document.getElementById("user-input").value;
if (userInput.trim() === "") return;

appendMessage('You', userInput);
document.getElementById('user-input').value = '';
appendMessage("You", userInput);
document.getElementById("user-input").value = "";

const sendButton = document.getElementById('send-button');
const queryButton = document.getElementById('query-button');
queryButton.disabled = true;
sendButton.disabled = true;
const sendButton = document.getElementById("send-button");
const queryButton = document.getElementById("query-button");
queryButton.disabled = true;
sendButton.disabled = true;

await fetchPineconeResponse(userInput);
await fetchPineconeResponse(userInput);

sendButton.disabled = false;
queryButton.disabled = false;
sendButton.disabled = false;
queryButton.disabled = false;
}

// Display a message on the frontend
export function appendMessage(sender, message) {
const messagesDiv = document.getElementById('messages');
const messageElement = document.createElement('div');
messageElement.classList.add('message');
const messagesDiv = document.getElementById("messages");
const messageElement = document.createElement("div");
messageElement.classList.add("message");

const senderElement = document.createElement('div');
senderElement.classList.add('sender');
senderElement.textContent = sender.toUpperCase();
const senderElement = document.createElement("div");
senderElement.classList.add("sender");
senderElement.textContent = sender.toUpperCase();

const contentElement = document.createElement('div');
contentElement.classList.add('content');
contentElement.textContent = message;
const contentElement = document.createElement("div");
contentElement.classList.add("content");

messageElement.appendChild(senderElement);
messageElement.appendChild(contentElement);
messagesDiv.appendChild(messageElement);
// Render the message using the MarkdownRenderer component
contentElement.innerHTML = `<div id="markdown-content"></div>`;

messagesDiv.scrollTop = messagesDiv.scrollHeight;
messageElement.appendChild(senderElement);
messageElement.appendChild(contentElement);
messagesDiv.appendChild(messageElement);

// Using React to render MarkdownRenderer into the div
ReactDOM.render(
<MarkdownRenderer content={message} />,
document.getElementById("markdown-content"),
);

messagesDiv.scrollTop = messagesDiv.scrollHeight;
}

// Fetch a response from the ChatGPT API
export async function fetchChatGPTResponse(userInput) {
const ec2 = 'https://18.226.98.245:443';
const local = 'http://localhost:3000';
const apiURL = 'https://syntaxsorcerer-backend.fly.dev'
const codebasePath = '../../codebases';

const response = await fetch(`${local}/api/chatgpt`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ prompt: userInput, codebasePath})
});

const botMessage = await response.json();
if (botMessage.error) {
appendMessage('Error', botMessage.error);
} else {
appendMessage('Assistant', botMessage.text);
}
const ec2 = "https://18.226.98.245:443";
const local = "http://localhost:3000";
const apiURL = "https://syntaxsorcerer-backend.fly.dev";
const codebasePath = "../../codebases";

const response = await fetch(`${local}/api/chatgpt`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ prompt: userInput, codebasePath }),
});

const botMessage = await response.json();
if (botMessage.error) {
appendMessage("Error", botMessage.error);
} else {
appendMessage("Assistant", botMessage.text);
}
}

// Fetch a response from the Pinecone API, generate an embedding from the user input
export async function fetchPineconeResponse(userInput) {
const ec2 = 'https://18.226.98.245:443';
const local = 'http://localhost:3000';
const apiURL = 'https://syntaxsorcerer-backend.fly.dev'

const response = await fetch(`${local}/api/pinecone`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ prompt: userInput })
});

const botMessage = await response.json();
if (botMessage.error) {
appendMessage('Error', botMessage.error);
} else {
appendMessage('Assistant', botMessage.text);
}
}
const ec2 = "https://18.226.98.245:443";
const local = "http://localhost:3000";
const apiURL = "https://syntaxsorcerer-backend.fly.dev";

const response = await fetch(`${local}/api/pinecone`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ prompt: userInput }),
});

const botMessage = await response.json();
if (botMessage.error) {
appendMessage("Error", botMessage.error);
} else {
appendMessage("Assistant", botMessage.text);
}
}

0 comments on commit 40ce287

Please sign in to comment.