Public
HTTP
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
// This approach will create a chatbot using OpenAI's SDK with access to a blog's content stored in a JSON.
// We'll use Hono for routing, OpenAI for the chatbot, and stream the responses to the client.
// The blog content will be stored as JSON and used as a tool in the chatbot's chain.
import { Hono } from "https://esm.sh/hono";
import { streamSSE } from "https://esm.sh/hono/streaming";
import { OpenAI } from "https://esm.town/v/std/openai";
const app = new Hono();
// Load blog content from JSON
const blogPosts = [
{
title: "First Post",
content: "This is the content of the first blog post."
},
{
title: "Second Post",
content: "Here's the second blog post with some interesting information."
},
{
title: "Third Post",
content: "The third post discusses various topics in depth."
}
];
// Function to search blog content
function searchBlogContent(query: string) {
return blogPosts.filter(post =>
post.title.toLowerCase().includes(query.toLowerCase()) ||
post.content.toLowerCase().includes(query.toLowerCase())
);
}
app.get("/", (c) => {
return c.html(`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog Chatbot</title>
<style>
body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
#chat { height: 300px; overflow-y: auto; border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; }
#userInput { width: 70%; padding: 5px; }
#sendButton { padding: 5px 10px; }
</style>
</head>
<body>
<h1>Blog Chatbot</h1>
<div id="chat"></div>
<input type="text" id="userInput" placeholder="Ask about the blog...">
<button id="sendButton">Send</button>
<script>
const chat = document.getElementById('chat');
const userInput = document.getElementById('userInput');
const sendButton = document.getElementById('sendButton');
function addMessage(message, isUser = false) {
const messageElem = document.createElement('p');
messageElem.textContent = isUser ? \`You: \${message}\` : \`Bot: \${message}\`;
chat.appendChild(messageElem);
chat.scrollTop = chat.scrollHeight;
return messageElem;
}
async function sendMessage() {
const message = userInput.value.trim();
if (!message) return;
addMessage(message, true);
userInput.value = '';
const response = await fetch('/chat', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ message })
});
const reader = response.body.getReader();
const decoder = new TextDecoder();
let botResponse = '';
let messageElement = null;
while (true) {
const { done, value } = await reader.read();
if (done) break;
const chunk = decoder.decode(value);
const lines = chunk.split('\\n');
for (const line of lines) {
if (line.startsWith('data: ')) {
botResponse += line.slice(6);
if (!messageElement) {
messageElement = addMessage(botResponse);
} else {
messageElement.textContent = \`Bot: \${botResponse}\`;
}
}
}