Skip to content

Feature/demo pages #136

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

Feature/demo pages #136

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
d63737a
Added some basic HTML demo pages for DEV
matthias Mar 4, 2024
f0d4473
Added demo/index.html
matthias Mar 8, 2024
de46fb8
Prettier
matthias Mar 8, 2024
a4179c5
Merged main 1.2.1
matthias Apr 11, 2024
8e9e4f7
Merged main 1.2.1
matthias Apr 11, 2024
1a5d44d
Fixed placeholder text for ChatflowID
matthias Apr 12, 2024
3af2d13
Adapted demo content
matthias Apr 12, 2024
561d7ba
Run demo server for yarn dev
matthias Apr 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions demo/chatConfig.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
const chatConfig = {
chatflowid: '<CHATFLOW_ID>',
apiHost: 'http://localhost:3000',
};

export function getChatConfig() {
const urlParams = new URLSearchParams(window.location.search);
const chatflowid = urlParams.get('chatflowid');
if (chatflowid) {
chatConfig.chatflowid = chatflowid;
const chatflowidInput = document.getElementById('chatflowid');
chatflowidInput.value = chatflowid;
}
return chatConfig;
}

export default chatConfig;
113 changes: 113 additions & 0 deletions demo/demo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--success-color: #28a745;
--info-color: #17a2b8;
--warning-color: #ffc107;
--danger-color: #dc3545;
--light-color: #f8f9fa;
--dark-color: #343a40;
--white-color: #fff;
--black-color: #000;
--max-width: 50rem;
}

*,
*::before,
*::after {
box-sizing: border-box;
}

body {
margin: 0;
padding: 0;
font-family: Inter, Arial, sans-serif;
min-height: 100vh;
display: flex;
flex-direction: column;

}

header {
background-color: #f0f0f0;
padding: 1rem 2rem;
}

header h1 {
margin: 0 auto;
max-width: var(--max-width);
text-align: center;
}

main {
padding: 2rem;
flex-grow: 1;
}

.container {
display: grid;
max-width: var(--max-width);
margin: 0 auto;
}

footer {
background-color: #f0f0f0;
padding: 1rem 2rem;
position: relative;
bottom: 0;
}
footer .container,
header .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-horizontal {
display: flex;
gap: .5rem;
}
.nav-horizontal a {
display: inline-block;
position: relative;
text-decoration: none;
color: var(--primary-color);
font-weight: 600;
}
.nav-horizontal a:hover {
text-decoration: underline;
}
/* dividers between nav items */
.nav-horizontal a:not(:last-child)::after {
content: '|';
margin-left: .5rem;
color: var(--secondary-color);
}

/* Form */

form {
display: grid;
grid-template-columns: [label] minmax(5rem, 7rem) [field] 1fr;
grid-template-rows: auto;
gap: 1rem;
max-width: 30rem;
border: 1px solid #ccc;
padding: 1rem;
}

label {
grid-column: label;
}

input {
padding: 0.5rem;
border: 1px solid #ccc;
grid-column: field;
}

button {
padding: 0.5rem;
border: 1px solid #ccc;
grid-column: field;
}

63 changes: 63 additions & 0 deletions demo/embed-chatbubble.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test ChatBot Embeds</title>
<link rel="stylesheet" href="demo.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<div class="container">
<div>
<h1>FlowiseChatEmbed</h1>
</div>
<nav class="nav-horizontal">
<a href="embed-chatbubble.html">ChatBubble</a>
<a href="embed-full.html">Full</a>
</nav>
</div>
</header>
<main>
<div class="container">
<h2>Some Demo Content</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla beatae deserunt quis recusandae sit pariatur,
veritatis repellat esse facilis! Autem assumenda impedit consequatur hic facilis. Eligendi, fuga iure! Nihil,
fugiat.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla beatae deserunt quis recusandae sit pariatur,
veritatis repellat esse facilis! Autem assumenda impedit consequatur hic facilis. Eligendi, fuga iure! Nihil,
fugiat.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla beatae deserunt quis recusandae sit pariatur,
veritatis repellat esse facilis! Autem assumenda impedit consequatur hic facilis. Eligendi, fuga iure! Nihil,
fugiat.</p>

<h3>Config ChatBot</h3>
<form id="chatForm" method="GET">
<label for="chatflowid">Chatflow ID</label>
<input type="text" id="chatflowid" name="chatflowid">
<button type="submit">Send</button>
</form>


<!-- Chat Embed-->
<script type="module">
import Chatbot from 'http://localhost:5678/web.js';
import { getChatConfig } from './chatConfig.js';
const chatConfig = getChatConfig();
Chatbot.init(chatConfig);
</script>
</div>
</main>
<footer>
<div class="container">
<div>
<span>Flowise</span>
</div>
<div>
<a href="https://docs.flowiseai.com/" target="_blank">Docs</a>
<a href="https://github.com/FlowiseAI/Flowise" target="_blank">GitHub</a>
</div>
</div>
</footer>
</body>
</html>
93 changes: 93 additions & 0 deletions demo/embed-full.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test ChatBot Embeds</title>
<link rel="stylesheet" href="demo.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<div class="container">
<div>
<h1>FlowiseChatEmbed</h1>
</div>
<nav class="nav-horizontal">
<a href="embed-chatbubble.html">ChatBubble</a>
<a href="embed-full.html">Full</a>
</nav>
</div>
</header>
<main>
<div class="container">
<h2>Some Demo Content</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla beatae deserunt quis recusandae sit pariatur,
veritatis repellat esse facilis! Autem assumenda impedit consequatur hic facilis. Eligendi, fuga iure! Nihil,
fugiat.</p>

<h3>Config ChatBot</h3>
<form id="chatForm" method="GET">
<label for="chatflowid">Chatflow ID</label>
<input type="text" id="chatflowid" name="chatflowid">
<button type="submit">Send</button>
</form>

<div class="chatbot-container">
<flowise-fullchatbot></flowise-fullchatbot>
</div>

<!-- Chat Embed-->
<script type="module">
import Chatbot from 'http://localhost:5678/web.js';
import { getChatConfig } from './chatConfig.js';
const chatConfig = {
...getChatConfig(),
theme: {
chatWindow: {
welcomeMessage: "Hello! This is custom welcome message",
backgroundColor: "#ffffff",
height: 700,
fontSize: 16,
}
}
};
console.log(chatConfig);
Chatbot.initFull(chatConfig);
</script>
<style>
.chatbot-container {
border: 1px solid #ccc;
margin-top: 3rem;
}
flowise-fullchatbot {
height: 100%;
width: 100%;
max-height: 10rem;
}
</style>

<h2>Some more Demo Content</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla beatae deserunt quis recusandae sit pariatur,
veritatis repellat esse facilis! Autem assumenda impedit consequatur hic facilis. Eligendi, fuga iure! Nihil,
fugiat.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla beatae deserunt quis recusandae sit pariatur,
veritatis repellat esse facilis! Autem assumenda impedit consequatur hic facilis. Eligendi, fuga iure! Nihil,
fugiat.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla beatae deserunt quis recusandae sit pariatur,
veritatis repellat esse facilis! Autem assumenda impedit consequatur hic facilis. Eligendi, fuga iure! Nihil,
fugiat.</p>
</div>
</main>
<footer>
<div class="container">
<div>
<span>Flowise</span>
</div>
<div>
<a href="https://docs.flowiseai.com/" target="_blank">Docs</a>
<a href="https://github.com/FlowiseAI/Flowise" target="_blank">GitHub</a>
</div>
</div>
</footer>
</body>
</html>
44 changes: 44 additions & 0 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test ChatBot Embeds</title>
<link rel="stylesheet" href="demo.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<div class="container">
<div>
<h1><a href="/">FlowiseChatEmbed</a></h1>
</div>
<nav class="nav-horizontal">
<a href="embed-chatbubble.html">ChatBubble</a>
<a href="embed-full.html">Full</a>
</nav>
</div>
</header>
<main>
<div class="container">
<h2>Demo Pages</h2>
<div>
<ul>
<li><a href="embed-chatbubble.html">ChatBubble</a></li>
<li><a href="embed-full.html">Full</a></li>
</ul>
</div>
</div>
</main>
<footer>
<div class="container">
<div>
<span>Flowise</span>
</div>
<div>
<a href="https://docs.flowiseai.com/" target="_blank">Docs</a>
<a href="https://github.com/FlowiseAI/Flowise" target="_blank">GitHub</a>
</div>
</div>
</footer>
</body>
</html>
2 changes: 1 addition & 1 deletion dist/components/bubbles/BotBubble.d.ts.map
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/components/bubbles/GuestBubble.d.ts.map
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/web.js
View file
Open in desktop

Large diffs are not rendered by default.

Loading