Chat UI using Plain HTML, JavaScript, and CSS
A chat interface written using HTML, CSS, and JavaScript.
Chat Management
Create and manage multiple chat conversations:
1// Create new chat
2app.newChat();
3
4// Switch between chats
5app.setActiveChat(chatId);
6
7// Delete a chat
8app.deleteChat(chatId);
Message Handling
Send messages with optional attachments:
1// Send text message
2app.sendMessage();
3
4// Attach file
5app.handleAttachment(event);
Provider Configuration
Each provider has three properties:
- name: Display name for the provider
- model: Model identifier
- systemPrompt: Instructions for the AI behavior
Edit providers through the settings interface or programmatically:
1app.providers = [
2 { name: "OpenAI", model: "gpt-4-turbo", systemPrompt: "You are ChatGPT." },
3 {
4 name: "Anthropic",
5 model: "claude-3",
6 systemPrompt: "Be thoughtful and concise.",
7 },
8];
Data Structure
Chat Object
1{
2 id: 1,
3 name: "Alex Johnson",
4 messages: [
5 {
6 from: "Alex",
7 text: "Hey, how's your morning going?",
8 time: "09:14",
9 provider: "OpenAI",
10 fileName: "document.pdf", // Optional
11 fileURL: "blob:..." // Optional
12 }
13 ]
14}
Provider Object
1{
2 name: "OpenAI",
3 model: "gpt-4-turbo",
4 systemPrompt: "You are a helpful AI assistant."
5}
UI Components
Sidebar
Message Area
- Text input field
- File attachment button
- Provider selector dropdown
- Provider settings editor
- Send button
Example
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <title>Chat UI</title>
6 <!-- Include styles from chat-ui.html -->
7 </head>
8 <body>
9 <div class="chat-container">
10 <aside class="sidebar" id="sidebar">
11 <div class="sidebar-header">
12 <h2>Chats</h2>
13 <button class="new-chat-btn" onclick="app.newChat()">+ New</button>
14 </div>
15 <div class="chat-list" id="chatList"></div>
16 </aside>
17
18 <main class="chat-main">
19 <header class="chat-header">
20 <button class="toggle-sidebar-btn" onclick="app.toggleSidebar()">
21 0
22 </button>
23 <div class="chat-title" id="chatTitle">No Chat</div>
24 </header>
25 <div class="messages" id="messages"></div>
26 <footer class="chat-input">
27 <input type="text" id="messageInput" placeholder="Message..." />
28 <select id="providerSelect"></select>
29 <button onclick="app.sendMessage()">Send</button>
30 </footer>
31 </main>
32 </div>
33
34 <script>
35 // Initialize the app
36 app.init();
37 </script>
38 </body>
39</html>
Customization
Modify the default providers by editing the app.providers array:
1app.providers = [
2 {
3 name: "Custom AI",
4 model: "custom-model-v1",
5 systemPrompt: "Custom instructions here.",
6 },
7];
8app.renderProviderSelect();
Notes
- Messages are stored in memory and will be lost on page reload
- File attachments are handled as blob URLs (in-memory only)
- The UI uses flexbox for responsive layout
- Sidebar can be toggled for more screen space