sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2024-11-27 17:35:07 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Style Khoj chat on web interface with new lantern theme

Browse source 
- Color khoj chat message with new yellow theme color
- Update Khoj chat emoji to lantern
- Add page type to title of pages on web interface
This commit is contained in:
Debanjum Singh Solanky 2023-06-20 01:10:16 -07:00
parent d292dc03b3
commit f6a7aa6c96
2 changed files with 11 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/khoj/interface/web/chat.html
View file

@ -2,7 +2,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0">
<title>Khoj</title> <title>Khoj - Chat</title>
<link rel="icon" type="image/png" sizes="128x128" href="/static/assets/icons/favicon-128x128.png"> <link rel="icon" type="image/png" sizes="128x128" href="/static/assets/icons/favicon-128x128.png">
<link rel="manifest" href="/static/khoj_chat.webmanifest"> <link rel="manifest" href="/static/khoj_chat.webmanifest">
@ -25,7 +25,7 @@
function renderMessage(message, by, dt=null) { function renderMessage(message, by, dt=null) {
let message_time = formatDate(dt ?? new Date()); let message_time = formatDate(dt ?? new Date());
let by_name = by == "khoj" ? "🦅 Khoj" : "🤔 You"; let by_name = by == "khoj" ? "🏮 Khoj" : "🤔 You";
// Generate HTML for Chat Message and Append to Chat Body // Generate HTML for Chat Message and Append to Chat Body
document.getElementById("chat-body").innerHTML += ` document.getElementById("chat-body").innerHTML += `
<div data-meta="${by_name} at ${message_time}" class="chat-message ${by}"> <div data-meta="${by_name} at ${message_time}" class="chat-message ${by}">
@ -118,6 +118,10 @@
</body> </body>
<style> <style>
:root {
--night-black: #282c34;
--evening-sun: #fbb912;
}
html, body { html, body {
height: 100%; height: 100%;
width: 100%; width: 100%;
@ -158,7 +162,7 @@
display: block; display: block;
font-size: x-small; font-size: x-small;
color: #475569; color: #475569;
margin: -12px 7px 0 -5px; margin: -8px 4px 0 -5px;
} }
/* move message by khoj to left */ /* move message by khoj to left */
.chat-message.khoj { .chat-message.khoj {
@ -182,8 +186,8 @@
} }
/* color chat bubble by khoj blue */ /* color chat bubble by khoj blue */
.chat-message-text.khoj { .chat-message-text.khoj {
color: #f8fafc; color: var(--night-black);
background: #017eff; background: var(--evening-sun);
margin-left: auto; margin-left: auto;
white-space: pre-line; white-space: pre-line;
} }
@ -194,7 +198,7 @@
bottom: -2px; bottom: -2px;
left: -7px; left: -7px;
border: 10px solid transparent; border: 10px solid transparent;
border-top-color: #017eff; border-top-color: var(--evening-sun);
border-bottom: 0; border-bottom: 0;
transform: rotate(-60deg); transform: rotate(-60deg);
} }

2
src/khoj/interface/web/index.html
View file

@ -2,7 +2,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0">
<title>Khoj</title> <title>Khoj - Search</title>
<link rel="icon" type="image/png" sizes="128x128" href="/static/assets/icons/favicon-128x128.png"> <link rel="icon" type="image/png" sizes="128x128" href="/static/assets/icons/favicon-128x128.png">
<link rel="manifest" href="/static/khoj.webmanifest"> <link rel="manifest" href="/static/khoj.webmanifest">