Commit 1da4c65b authored by crazywoola's avatar crazywoola

feat: ui

parent 58c60777
......@@ -11,7 +11,7 @@ document.body.onload = embedChatbot;
async function embedChatbot() {
const difyChatbotConfig = window.difyChatbotConfig;
if (!difyChatbotConfig || !difyChatbotConfig.token) {
console.error('difyChatbotConfig is empty or token is not provided');
console.warn('difyChatbotConfig is empty or token is not provided');
return;
}
const baseUrl = difyChatbotConfig.baseUrl
......
<!DOCTYPE html>
<html>
<head>
<title>Dify Chatbot Extension Options</title>
<link rel="stylesheet" href="options.css">
<title>Dify Chatbot Extension</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<h2>Dify Chatbot Extension Options</h2>
<label for="base-url"><span class="req">*</span> Base URL:</label>
<input type="text" id="base-url" name="base-url" value="">
<label for="token"><span class="required">*</span> Token:</label>
<input type="text" id="token" name="token" value="">
<body class="bg-gray-100 py-8 px-4 w-96">
<div class="max-w-md mx-auto bg-white shadow-md rounded-lg p-4">
<h2 class="text-2xl font-semibold mb-4">Dify Chatbot Extension</h2>
<form>
<div class="mb-4 flex items-center">
<div class="w-1/4">
<label for="base-url" class="block font-semibold text-gray-700">Base URL</label>
</div>
<div class="w-3/4">
<input type="text" id="base-url" name="base-url" value=""
class="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:border-blue-400"
placeholder="https://udify.app">
</div>
</div>
<div class="mb-4 flex items-center">
<div class="w-1/4">
<label for="token" class="block font-semibold text-gray-700">Token</label>
</div>
<div class="w-3/4">
<input type="text" id="token" name="token" value=""
class="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:border-blue-400"
placeholder="Application Embedded Token">
</div>
</div>
<button id="save-button">Save</button>
<div class="mb-4 flex items-center">
<div class="w-1/4"></div>
<div class="w-3/4">
<span id="error-tip" class="text-red-600"></span>
</div>
</div>
<div class="mb-4 flex items-center">
<div class="w-1/4"></div>
<div class="w-3/4">
<button id="save-button"
class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 focus:outline-none focus:bg-blue-600">Save</button>
</div>
</div>
</form>
</div>
<script src="options.js"></script>
</body>
</html>
\ No newline at end of file
document.getElementById('save-button').addEventListener('click', function() {
document.getElementById('save-button').addEventListener('click', function (e) {
e.preventDefault();
var baseUrl = document.getElementById('base-url').value;
var token = document.getElementById('token').value;
var errorTip = document.getElementById('error-tip');
if (baseUrl === '' || token === '') {
alert('Dify Chatbot Extension Options Not filled.');
return;
if (baseUrl.trim() === "" || token.trim() === "") {
if (baseUrl.trim() === "") {
errorTip.textContent = "Base URL cannot be empty.";
} else {
errorTip.textContent = "Token cannot be empty.";
}
} else {
errorTip.textContent = "";
chrome.storage.sync.set({
'baseUrl': baseUrl,
'token': token
}, function() {
}, function () {
alert('Save Success!');
});
}
});
// Load parameters from chrome.storage when the page loads
chrome.storage.sync.get(['baseUrl', 'token'], function(result) {
chrome.storage.sync.get(['baseUrl', 'token'], function (result) {
const baseUrlInput = document.getElementById('base-url');
const tokenInput = document.getElementById('token');
if (result.baseUrl) {
baseUrlInput.value = result.baseUrl;
} else {
baseUrlInput.placeholder = 'Dify Domain Url';
}
if (result.token) {
tokenInput.value = result.token;
} else {
tokenInput.placeholder = 'Application Embedded Token';
}
});
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment