khoj 1.16.1.dev15__py3-none-any.whl
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- khoj/__init__.py +0 -0
- khoj/app/README.md +94 -0
- khoj/app/__init__.py +0 -0
- khoj/app/asgi.py +16 -0
- khoj/app/settings.py +192 -0
- khoj/app/urls.py +25 -0
- khoj/configure.py +424 -0
- khoj/database/__init__.py +0 -0
- khoj/database/adapters/__init__.py +1234 -0
- khoj/database/admin.py +290 -0
- khoj/database/apps.py +6 -0
- khoj/database/management/__init__.py +0 -0
- khoj/database/management/commands/__init__.py +0 -0
- khoj/database/management/commands/change_generated_images_url.py +61 -0
- khoj/database/management/commands/convert_images_png_to_webp.py +99 -0
- khoj/database/migrations/0001_khojuser.py +98 -0
- khoj/database/migrations/0002_googleuser.py +32 -0
- khoj/database/migrations/0003_vector_extension.py +10 -0
- khoj/database/migrations/0004_content_types_and_more.py +181 -0
- khoj/database/migrations/0005_embeddings_corpus_id.py +19 -0
- khoj/database/migrations/0006_embeddingsdates.py +33 -0
- khoj/database/migrations/0007_add_conversation.py +27 -0
- khoj/database/migrations/0008_alter_conversation_conversation_log.py +17 -0
- khoj/database/migrations/0009_khojapiuser.py +24 -0
- khoj/database/migrations/0010_chatmodeloptions_and_more.py +83 -0
- khoj/database/migrations/0010_rename_embeddings_entry_and_more.py +30 -0
- khoj/database/migrations/0011_merge_20231102_0138.py +14 -0
- khoj/database/migrations/0012_entry_file_source.py +21 -0
- khoj/database/migrations/0013_subscription.py +37 -0
- khoj/database/migrations/0014_alter_googleuser_picture.py +17 -0
- khoj/database/migrations/0015_alter_subscription_user.py +21 -0
- khoj/database/migrations/0016_alter_subscription_renewal_date.py +17 -0
- khoj/database/migrations/0017_searchmodel.py +32 -0
- khoj/database/migrations/0018_searchmodelconfig_delete_searchmodel.py +30 -0
- khoj/database/migrations/0019_alter_googleuser_family_name_and_more.py +27 -0
- khoj/database/migrations/0020_reflectivequestion.py +36 -0
- khoj/database/migrations/0021_speechtotextmodeloptions_and_more.py +42 -0
- khoj/database/migrations/0022_texttoimagemodelconfig.py +25 -0
- khoj/database/migrations/0023_usersearchmodelconfig.py +33 -0
- khoj/database/migrations/0024_alter_entry_embeddings.py +18 -0
- khoj/database/migrations/0025_clientapplication_khojuser_phone_number_and_more.py +46 -0
- khoj/database/migrations/0025_searchmodelconfig_embeddings_inference_endpoint_and_more.py +22 -0
- khoj/database/migrations/0026_searchmodelconfig_cross_encoder_inference_endpoint_and_more.py +22 -0
- khoj/database/migrations/0027_merge_20240118_1324.py +13 -0
- khoj/database/migrations/0028_khojuser_verified_phone_number.py +17 -0
- khoj/database/migrations/0029_userrequests.py +27 -0
- khoj/database/migrations/0030_conversation_slug_and_title.py +38 -0
- khoj/database/migrations/0031_agent_conversation_agent.py +53 -0
- khoj/database/migrations/0031_alter_googleuser_locale.py +30 -0
- khoj/database/migrations/0032_merge_20240322_0427.py +14 -0
- khoj/database/migrations/0033_rename_tuning_agent_personality.py +17 -0
- khoj/database/migrations/0034_alter_chatmodeloptions_chat_model.py +32 -0
- khoj/database/migrations/0035_processlock.py +26 -0
- khoj/database/migrations/0036_alter_processlock_name.py +19 -0
- khoj/database/migrations/0036_delete_offlinechatprocessorconversationconfig.py +15 -0
- khoj/database/migrations/0036_publicconversation.py +42 -0
- khoj/database/migrations/0037_chatmodeloptions_openai_config_and_more.py +51 -0
- khoj/database/migrations/0037_searchmodelconfig_bi_encoder_docs_encode_config_and_more.py +32 -0
- khoj/database/migrations/0038_merge_20240425_0857.py +14 -0
- khoj/database/migrations/0038_merge_20240426_1640.py +12 -0
- khoj/database/migrations/0039_merge_20240501_0301.py +12 -0
- khoj/database/migrations/0040_alter_processlock_name.py +26 -0
- khoj/database/migrations/0040_merge_20240504_1010.py +14 -0
- khoj/database/migrations/0041_merge_20240505_1234.py +14 -0
- khoj/database/migrations/0042_serverchatsettings.py +46 -0
- khoj/database/migrations/0043_alter_chatmodeloptions_model_type.py +21 -0
- khoj/database/migrations/0044_conversation_file_filters.py +17 -0
- khoj/database/migrations/0045_fileobject.py +37 -0
- khoj/database/migrations/0046_khojuser_email_verification_code_and_more.py +22 -0
- khoj/database/migrations/0047_alter_entry_file_type.py +31 -0
- khoj/database/migrations/0048_voicemodeloption_uservoicemodelconfig.py +52 -0
- khoj/database/migrations/0049_datastore.py +38 -0
- khoj/database/migrations/0049_texttoimagemodelconfig_api_key_and_more.py +58 -0
- khoj/database/migrations/0050_alter_processlock_name.py +25 -0
- khoj/database/migrations/0051_merge_20240702_1220.py +14 -0
- khoj/database/migrations/0052_alter_searchmodelconfig_bi_encoder_docs_encode_config_and_more.py +27 -0
- khoj/database/migrations/__init__.py +0 -0
- khoj/database/models/__init__.py +402 -0
- khoj/database/tests.py +3 -0
- khoj/interface/email/feedback.html +34 -0
- khoj/interface/email/magic_link.html +17 -0
- khoj/interface/email/task.html +40 -0
- khoj/interface/email/welcome.html +61 -0
- khoj/interface/web/404.html +56 -0
- khoj/interface/web/agent.html +312 -0
- khoj/interface/web/agents.html +276 -0
- khoj/interface/web/assets/icons/agents.svg +6 -0
- khoj/interface/web/assets/icons/automation.svg +37 -0
- khoj/interface/web/assets/icons/cancel.svg +3 -0
- khoj/interface/web/assets/icons/chat.svg +24 -0
- khoj/interface/web/assets/icons/collapse.svg +17 -0
- khoj/interface/web/assets/icons/computer.png +0 -0
- khoj/interface/web/assets/icons/confirm-icon.svg +1 -0
- khoj/interface/web/assets/icons/copy-button-success.svg +6 -0
- khoj/interface/web/assets/icons/copy-button.svg +5 -0
- khoj/interface/web/assets/icons/credit-card.png +0 -0
- khoj/interface/web/assets/icons/delete.svg +26 -0
- khoj/interface/web/assets/icons/docx.svg +7 -0
- khoj/interface/web/assets/icons/edit.svg +4 -0
- khoj/interface/web/assets/icons/favicon-128x128.ico +0 -0
- khoj/interface/web/assets/icons/favicon-128x128.png +0 -0
- khoj/interface/web/assets/icons/favicon-256x256.png +0 -0
- khoj/interface/web/assets/icons/favicon.icns +0 -0
- khoj/interface/web/assets/icons/github.svg +1 -0
- khoj/interface/web/assets/icons/key.svg +4 -0
- khoj/interface/web/assets/icons/khoj-logo-sideways-200.png +0 -0
- khoj/interface/web/assets/icons/khoj-logo-sideways-500.png +0 -0
- khoj/interface/web/assets/icons/khoj-logo-sideways.svg +5385 -0
- khoj/interface/web/assets/icons/logotype.svg +1 -0
- khoj/interface/web/assets/icons/markdown.svg +1 -0
- khoj/interface/web/assets/icons/new.svg +23 -0
- khoj/interface/web/assets/icons/notion.svg +4 -0
- khoj/interface/web/assets/icons/openai-logomark.svg +1 -0
- khoj/interface/web/assets/icons/org.svg +1 -0
- khoj/interface/web/assets/icons/pdf.svg +23 -0
- khoj/interface/web/assets/icons/pencil-edit.svg +5 -0
- khoj/interface/web/assets/icons/plaintext.svg +1 -0
- khoj/interface/web/assets/icons/question-mark-icon.svg +1 -0
- khoj/interface/web/assets/icons/search.svg +25 -0
- khoj/interface/web/assets/icons/send.svg +1 -0
- khoj/interface/web/assets/icons/share.svg +8 -0
- khoj/interface/web/assets/icons/speaker.svg +4 -0
- khoj/interface/web/assets/icons/stop-solid.svg +37 -0
- khoj/interface/web/assets/icons/sync.svg +4 -0
- khoj/interface/web/assets/icons/thumbs-down-svgrepo-com.svg +6 -0
- khoj/interface/web/assets/icons/thumbs-up-svgrepo-com.svg +6 -0
- khoj/interface/web/assets/icons/user-silhouette.svg +4 -0
- khoj/interface/web/assets/icons/voice.svg +8 -0
- khoj/interface/web/assets/icons/web.svg +2 -0
- khoj/interface/web/assets/icons/whatsapp.svg +17 -0
- khoj/interface/web/assets/khoj.css +237 -0
- khoj/interface/web/assets/markdown-it.min.js +8476 -0
- khoj/interface/web/assets/natural-cron.min.js +1 -0
- khoj/interface/web/assets/org.min.js +1823 -0
- khoj/interface/web/assets/pico.min.css +5 -0
- khoj/interface/web/assets/purify.min.js +3 -0
- khoj/interface/web/assets/samples/desktop-browse-draw-sample.png +0 -0
- khoj/interface/web/assets/samples/desktop-plain-chat-sample.png +0 -0
- khoj/interface/web/assets/samples/desktop-remember-plan-sample.png +0 -0
- khoj/interface/web/assets/samples/phone-browse-draw-sample.png +0 -0
- khoj/interface/web/assets/samples/phone-plain-chat-sample.png +0 -0
- khoj/interface/web/assets/samples/phone-remember-plan-sample.png +0 -0
- khoj/interface/web/assets/utils.js +33 -0
- khoj/interface/web/base_config.html +445 -0
- khoj/interface/web/chat.html +3546 -0
- khoj/interface/web/config.html +1011 -0
- khoj/interface/web/config_automation.html +1103 -0
- khoj/interface/web/content_source_computer_input.html +139 -0
- khoj/interface/web/content_source_github_input.html +216 -0
- khoj/interface/web/content_source_notion_input.html +94 -0
- khoj/interface/web/khoj.webmanifest +51 -0
- khoj/interface/web/login.html +219 -0
- khoj/interface/web/public_conversation.html +2006 -0
- khoj/interface/web/search.html +470 -0
- khoj/interface/web/utils.html +48 -0
- khoj/main.py +241 -0
- khoj/manage.py +22 -0
- khoj/migrations/__init__.py +0 -0
- khoj/migrations/migrate_offline_chat_default_model.py +69 -0
- khoj/migrations/migrate_offline_chat_default_model_2.py +71 -0
- khoj/migrations/migrate_offline_chat_schema.py +83 -0
- khoj/migrations/migrate_offline_model.py +29 -0
- khoj/migrations/migrate_processor_config_openai.py +67 -0
- khoj/migrations/migrate_server_pg.py +138 -0
- khoj/migrations/migrate_version.py +17 -0
- khoj/processor/__init__.py +0 -0
- khoj/processor/content/__init__.py +0 -0
- khoj/processor/content/docx/__init__.py +0 -0
- khoj/processor/content/docx/docx_to_entries.py +110 -0
- khoj/processor/content/github/__init__.py +0 -0
- khoj/processor/content/github/github_to_entries.py +224 -0
- khoj/processor/content/images/__init__.py +0 -0
- khoj/processor/content/images/image_to_entries.py +118 -0
- khoj/processor/content/markdown/__init__.py +0 -0
- khoj/processor/content/markdown/markdown_to_entries.py +165 -0
- khoj/processor/content/notion/notion_to_entries.py +260 -0
- khoj/processor/content/org_mode/__init__.py +0 -0
- khoj/processor/content/org_mode/org_to_entries.py +231 -0
- khoj/processor/content/org_mode/orgnode.py +532 -0
- khoj/processor/content/pdf/__init__.py +0 -0
- khoj/processor/content/pdf/pdf_to_entries.py +116 -0
- khoj/processor/content/plaintext/__init__.py +0 -0
- khoj/processor/content/plaintext/plaintext_to_entries.py +122 -0
- khoj/processor/content/text_to_entries.py +297 -0
- khoj/processor/conversation/__init__.py +0 -0
- khoj/processor/conversation/anthropic/__init__.py +0 -0
- khoj/processor/conversation/anthropic/anthropic_chat.py +206 -0
- khoj/processor/conversation/anthropic/utils.py +114 -0
- khoj/processor/conversation/offline/__init__.py +0 -0
- khoj/processor/conversation/offline/chat_model.py +231 -0
- khoj/processor/conversation/offline/utils.py +78 -0
- khoj/processor/conversation/offline/whisper.py +15 -0
- khoj/processor/conversation/openai/__init__.py +0 -0
- khoj/processor/conversation/openai/gpt.py +187 -0
- khoj/processor/conversation/openai/utils.py +129 -0
- khoj/processor/conversation/openai/whisper.py +13 -0
- khoj/processor/conversation/prompts.py +758 -0
- khoj/processor/conversation/utils.py +262 -0
- khoj/processor/embeddings.py +117 -0
- khoj/processor/speech/__init__.py +0 -0
- khoj/processor/speech/text_to_speech.py +51 -0
- khoj/processor/tools/__init__.py +0 -0
- khoj/processor/tools/online_search.py +225 -0
- khoj/routers/__init__.py +0 -0
- khoj/routers/api.py +626 -0
- khoj/routers/api_agents.py +43 -0
- khoj/routers/api_chat.py +1180 -0
- khoj/routers/api_config.py +434 -0
- khoj/routers/api_phone.py +86 -0
- khoj/routers/auth.py +181 -0
- khoj/routers/email.py +133 -0
- khoj/routers/helpers.py +1188 -0
- khoj/routers/indexer.py +349 -0
- khoj/routers/notion.py +91 -0
- khoj/routers/storage.py +35 -0
- khoj/routers/subscription.py +104 -0
- khoj/routers/twilio.py +36 -0
- khoj/routers/web_client.py +471 -0
- khoj/search_filter/__init__.py +0 -0
- khoj/search_filter/base_filter.py +15 -0
- khoj/search_filter/date_filter.py +217 -0
- khoj/search_filter/file_filter.py +30 -0
- khoj/search_filter/word_filter.py +29 -0
- khoj/search_type/__init__.py +0 -0
- khoj/search_type/text_search.py +241 -0
- khoj/utils/__init__.py +0 -0
- khoj/utils/cli.py +93 -0
- khoj/utils/config.py +81 -0
- khoj/utils/constants.py +24 -0
- khoj/utils/fs_syncer.py +249 -0
- khoj/utils/helpers.py +418 -0
- khoj/utils/initialization.py +146 -0
- khoj/utils/jsonl.py +43 -0
- khoj/utils/models.py +47 -0
- khoj/utils/rawconfig.py +160 -0
- khoj/utils/state.py +46 -0
- khoj/utils/yaml.py +43 -0
- khoj-1.16.1.dev15.dist-info/METADATA +178 -0
- khoj-1.16.1.dev15.dist-info/RECORD +242 -0
- khoj-1.16.1.dev15.dist-info/WHEEL +4 -0
- khoj-1.16.1.dev15.dist-info/entry_points.txt +2 -0
- khoj-1.16.1.dev15.dist-info/licenses/LICENSE +661 -0
|
@@ -0,0 +1,3546 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0">
|
|
6
|
+
<meta property="og:image" content="https://assets.khoj.dev/khoj_hero.png">
|
|
7
|
+
<meta http-equiv="Content-Security-Policy"
|
|
8
|
+
content="default-src 'self' https://assets.khoj.dev;
|
|
9
|
+
script-src 'self' https://assets.khoj.dev 'unsafe-inline';
|
|
10
|
+
connect-src 'self' https://ipapi.co/json;
|
|
11
|
+
style-src 'self' https://assets.khoj.dev 'unsafe-inline' https://fonts.googleapis.com;
|
|
12
|
+
img-src 'self' data: https://*.khoj.dev https://*.googleusercontent.com;
|
|
13
|
+
font-src https://assets.khoj.dev https://fonts.gstatic.com;
|
|
14
|
+
child-src 'none';
|
|
15
|
+
object-src 'none';">
|
|
16
|
+
<title>Khoj - Chat</title>
|
|
17
|
+
|
|
18
|
+
<link rel="stylesheet" href="/static/assets/khoj.css?v={{ khoj_version }}">
|
|
19
|
+
<link rel="icon" type="image/png" sizes="128x128" href="/static/assets/icons/favicon-128x128.png?v={{ khoj_version }}">
|
|
20
|
+
<link rel="apple-touch-icon" href="/static/assets/icons/favicon-128x128.png?v={{ khoj_version }}">
|
|
21
|
+
<link rel="manifest" href="/static/khoj.webmanifest?v={{ khoj_version }}">
|
|
22
|
+
<link rel="stylesheet" href="https://assets.khoj.dev/katex/katex.min.css">
|
|
23
|
+
|
|
24
|
+
<!-- The loading of KaTeX is deferred to speed up page rendering -->
|
|
25
|
+
<script defer src="https://assets.khoj.dev/katex/katex.min.js"></script>
|
|
26
|
+
|
|
27
|
+
<!-- To automatically render math in text elements, include the auto-render extension: -->
|
|
28
|
+
<script defer src="https://assets.khoj.dev/katex/auto-render.min.js" onload="renderMathInElement(document.body);"></script>
|
|
29
|
+
</head>
|
|
30
|
+
<script type="text/javascript" src="/static/assets/purify.min.js?v={{ khoj_version }}"></script>
|
|
31
|
+
<script type="text/javascript" src="/static/assets/utils.js?v={{ khoj_version }}"></script>
|
|
32
|
+
<script type="text/javascript" src="/static/assets/markdown-it.min.js?v={{ khoj_version }}"></script>
|
|
33
|
+
<link rel="stylesheet" href="https://assets.khoj.dev/higlightjs/solarized-light.css">
|
|
34
|
+
<script src="https://assets.khoj.dev/higlightjs/highlight.min.js"></script>
|
|
35
|
+
<script>
|
|
36
|
+
let welcome_message = `
|
|
37
|
+
Hi, I am Khoj, your open, personal AI 👋🏽. I can:
|
|
38
|
+
- 🧠 Answer general knowledge questions
|
|
39
|
+
- 💡 Be a sounding board for your ideas
|
|
40
|
+
- 📜 Chat with your notes & documents
|
|
41
|
+
- 🌄 Generate images based on your messages
|
|
42
|
+
- 🔎 Search the web for answers to your questions
|
|
43
|
+
- 🎙️ Listen to your audio messages (use the mic by the input box to speak your message)
|
|
44
|
+
- 📚 Understand files you drag & drop here
|
|
45
|
+
- 👩🏾🚀 Be tuned to your conversation needs via [agents](./agents)
|
|
46
|
+
|
|
47
|
+
Get the Khoj [Desktop](https://khoj.dev/downloads), [Obsidian](https://docs.khoj.dev/clients/obsidian#setup), [Emacs](https://docs.khoj.dev/clients/emacs#setup) apps to search, chat with your 🖥️ computer docs. You can manage all the files you've shared with me at any time by going to [your settings](/config/content-source/computer/).
|
|
48
|
+
|
|
49
|
+
To get started, just start typing below. You can also type / to see a list of commands.
|
|
50
|
+
`.trim()
|
|
51
|
+
const allowedExtensions = ['text/org', 'text/markdown', 'text/plain', 'text/html', 'application/pdf', 'image/jpeg', 'image/png', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'];
|
|
52
|
+
const allowedFileEndings = ['org', 'md', 'txt', 'html', 'pdf', 'jpg', 'jpeg', 'png', 'docx'];
|
|
53
|
+
let chatOptions = [];
|
|
54
|
+
function createCopyParentText(message) {
|
|
55
|
+
return function(event) {
|
|
56
|
+
copyParentText(event, message);
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
function copyParentText(event, message=null) {
|
|
60
|
+
const button = event.currentTarget;
|
|
61
|
+
const textContent = message ?? button.parentNode.textContent.trim();
|
|
62
|
+
navigator.clipboard.writeText(textContent).then(() => {
|
|
63
|
+
button.firstChild.src = "/static/assets/icons/copy-button-success.svg";
|
|
64
|
+
setTimeout(() => {
|
|
65
|
+
button.firstChild.src = "/static/assets/icons/copy-button.svg";
|
|
66
|
+
}, 1000);
|
|
67
|
+
}).catch((error) => {
|
|
68
|
+
console.error("Error copying programmatic output to clipboard:", error);
|
|
69
|
+
const originalButtonText = button.innerHTML;
|
|
70
|
+
button.innerHTML = "⛔️";
|
|
71
|
+
setTimeout(() => {
|
|
72
|
+
button.innerHTML = originalButtonText;
|
|
73
|
+
button.firstChild.src = "/static/assets/icons/copy-button.svg";
|
|
74
|
+
}, 1000);
|
|
75
|
+
});
|
|
76
|
+
}
|
|
77
|
+
var websocket = null;
|
|
78
|
+
let region = null;
|
|
79
|
+
let city = null;
|
|
80
|
+
let countryName = null;
|
|
81
|
+
let timezone = null;
|
|
82
|
+
let waitingForLocation = true;
|
|
83
|
+
|
|
84
|
+
let websocketState = {
|
|
85
|
+
newResponseTextEl: null,
|
|
86
|
+
newResponseEl: null,
|
|
87
|
+
loadingEllipsis: null,
|
|
88
|
+
references: {},
|
|
89
|
+
rawResponse: "",
|
|
90
|
+
isVoice: false,
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
fetch("https://ipapi.co/json")
|
|
94
|
+
.then(response => response.json())
|
|
95
|
+
.then(data => {
|
|
96
|
+
region = data.region;
|
|
97
|
+
city = data.city;
|
|
98
|
+
countryName = data.country_name;
|
|
99
|
+
timezone = data.timezone;
|
|
100
|
+
})
|
|
101
|
+
.catch(err => {
|
|
102
|
+
console.log(err);
|
|
103
|
+
return;
|
|
104
|
+
})
|
|
105
|
+
.finally(() => {
|
|
106
|
+
console.debug("Region:", region, "City:", city, "Country:", countryName, "Timezone:", timezone);
|
|
107
|
+
waitingForLocation = false;
|
|
108
|
+
setupWebSocket();
|
|
109
|
+
});
|
|
110
|
+
|
|
111
|
+
function formatDate(date) {
|
|
112
|
+
// Format date in HH:MM, DD MMM YYYY format
|
|
113
|
+
let time_string = date.toLocaleTimeString('en-IN', { hour: '2-digit', minute: '2-digit', hour12: false });
|
|
114
|
+
let date_string = date.toLocaleString('en-IN', { year: 'numeric', month: 'short', day: '2-digit'}).replaceAll('-', ' ');
|
|
115
|
+
return `${time_string}, ${date_string}`;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
function generateReference(referenceJson, index) {
|
|
119
|
+
let reference = referenceJson.hasOwnProperty("compiled") ? referenceJson.compiled : referenceJson;
|
|
120
|
+
let referenceFile = referenceJson.hasOwnProperty("file") ? referenceJson.file : null;
|
|
121
|
+
|
|
122
|
+
// Escape reference for HTML rendering
|
|
123
|
+
let escaped_ref = reference.replaceAll('"', '"');
|
|
124
|
+
|
|
125
|
+
// Generate HTML for Chat Reference
|
|
126
|
+
let short_ref = escaped_ref.slice(0, 140);
|
|
127
|
+
short_ref = short_ref.length < escaped_ref.length ? short_ref + "..." : short_ref;
|
|
128
|
+
let referenceButton = document.createElement('button');
|
|
129
|
+
referenceButton.textContent = short_ref;
|
|
130
|
+
referenceButton.id = `ref-${index}`;
|
|
131
|
+
referenceButton.classList.add("reference-button");
|
|
132
|
+
referenceButton.classList.add("collapsed");
|
|
133
|
+
referenceButton.tabIndex = 0;
|
|
134
|
+
|
|
135
|
+
// Add event listener to toggle full reference on click
|
|
136
|
+
referenceButton.addEventListener('click', function() {
|
|
137
|
+
if (this.classList.contains("collapsed")) {
|
|
138
|
+
this.classList.remove("collapsed");
|
|
139
|
+
this.classList.add("expanded");
|
|
140
|
+
this.textContent = escaped_ref;
|
|
141
|
+
} else {
|
|
142
|
+
this.classList.add("collapsed");
|
|
143
|
+
this.classList.remove("expanded");
|
|
144
|
+
this.textContent = short_ref;
|
|
145
|
+
}
|
|
146
|
+
});
|
|
147
|
+
|
|
148
|
+
return referenceButton;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
function generateOnlineReference(reference, index) {
|
|
152
|
+
// Generate HTML for Chat Reference
|
|
153
|
+
let title = reference.title || reference.link;
|
|
154
|
+
let link = reference.link;
|
|
155
|
+
let snippet = reference.snippet;
|
|
156
|
+
let question = reference.question;
|
|
157
|
+
if (question) {
|
|
158
|
+
question = `<b>Question:</b> ${question}<br><br>`;
|
|
159
|
+
} else {
|
|
160
|
+
question = "";
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
let linkElement = document.createElement('a');
|
|
164
|
+
linkElement.setAttribute('href', link);
|
|
165
|
+
linkElement.setAttribute('target', '_blank');
|
|
166
|
+
linkElement.setAttribute('rel', 'noopener noreferrer');
|
|
167
|
+
linkElement.classList.add("reference-link");
|
|
168
|
+
linkElement.setAttribute('title', title);
|
|
169
|
+
linkElement.textContent = title;
|
|
170
|
+
|
|
171
|
+
let referenceButton = document.createElement('button');
|
|
172
|
+
referenceButton.appendChild(linkElement);
|
|
173
|
+
referenceButton.id = `ref-${index}`;
|
|
174
|
+
referenceButton.classList.add("reference-button");
|
|
175
|
+
referenceButton.classList.add("collapsed");
|
|
176
|
+
referenceButton.tabIndex = 0;
|
|
177
|
+
|
|
178
|
+
// Add event listener to toggle full reference on click
|
|
179
|
+
referenceButton.addEventListener('click', function() {
|
|
180
|
+
if (this.classList.contains("collapsed")) {
|
|
181
|
+
this.classList.remove("collapsed");
|
|
182
|
+
this.classList.add("expanded");
|
|
183
|
+
this.innerHTML = `${linkElement.outerHTML}<br><br>${question}${snippet}`;
|
|
184
|
+
} else {
|
|
185
|
+
this.classList.add("collapsed");
|
|
186
|
+
this.classList.remove("expanded");
|
|
187
|
+
this.innerHTML = "";
|
|
188
|
+
this.appendChild(linkElement);
|
|
189
|
+
}
|
|
190
|
+
});
|
|
191
|
+
|
|
192
|
+
return referenceButton;
|
|
193
|
+
}
|
|
194
|
+
var khojQuery = "";
|
|
195
|
+
function renderMessage(message, by, dt=null, annotations=null, raw=false, renderType="append", userQuery=null) {
|
|
196
|
+
let message_time = formatDate(dt ?? new Date());
|
|
197
|
+
let by_name = by == "khoj" ? "🏮 Khoj" : "🤔 You";
|
|
198
|
+
let formattedMessage = formatHTMLMessage(message, raw, true, userQuery);
|
|
199
|
+
//update userQuery or khojQuery to latest query for feedback purposes
|
|
200
|
+
if(by !== "khoj"){
|
|
201
|
+
raw = formattedMessage.innerHTML;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
//find the thumbs up and thumbs down buttons from the message formatter
|
|
205
|
+
var thumbsUpButtons = formattedMessage.querySelectorAll('.thumbs-up-button');
|
|
206
|
+
var thumbsDownButtons = formattedMessage.querySelectorAll('.thumbs-down-button');
|
|
207
|
+
|
|
208
|
+
//only render the feedback options if the message is a response from khoj
|
|
209
|
+
if(by !== "khoj"){
|
|
210
|
+
thumbsUpButtons.forEach(function(element) {
|
|
211
|
+
element.parentNode.removeChild(element);
|
|
212
|
+
});
|
|
213
|
+
thumbsDownButtons.forEach(function(element) {
|
|
214
|
+
element.parentNode.removeChild(element);
|
|
215
|
+
});
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
|
|
219
|
+
// Create a new div for the chat message
|
|
220
|
+
let chatMessage = document.createElement('div');
|
|
221
|
+
chatMessage.className = `chat-message ${by}`;
|
|
222
|
+
chatMessage.dataset.meta = `${by_name} at ${message_time}`;
|
|
223
|
+
|
|
224
|
+
// Create a new div for the chat message text and append it to the chat message
|
|
225
|
+
let chatMessageText = document.createElement('div');
|
|
226
|
+
chatMessageText.className = `chat-message-text ${by}`;
|
|
227
|
+
chatMessageText.appendChild(formattedMessage);
|
|
228
|
+
chatMessage.appendChild(chatMessageText);
|
|
229
|
+
|
|
230
|
+
// Append annotations div to the chat message
|
|
231
|
+
if (annotations) {
|
|
232
|
+
chatMessageText.appendChild(annotations);
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
// Append chat message div to chat body
|
|
236
|
+
let chatBody = document.getElementById("chat-body");
|
|
237
|
+
if (renderType === "append") {
|
|
238
|
+
chatBody.appendChild(chatMessage);
|
|
239
|
+
// Scroll to bottom of chat-body element
|
|
240
|
+
chatBody.scrollTop = chatBody.scrollHeight;
|
|
241
|
+
} else if (renderType === "prepend"){
|
|
242
|
+
let chatBody = document.getElementById("chat-body");
|
|
243
|
+
chatBody.insertBefore(chatMessage, chatBody.firstChild);
|
|
244
|
+
} else if (renderType === "return") {
|
|
245
|
+
return chatMessage;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
let chatBodyWrapper = document.getElementById("chat-body-wrapper");
|
|
249
|
+
chatBodyWrapperHeight = chatBodyWrapper.clientHeight;
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
function processOnlineReferences(referenceSection, onlineContext) {
|
|
253
|
+
let numOnlineReferences = 0;
|
|
254
|
+
for (let subquery in onlineContext) {
|
|
255
|
+
let onlineReference = onlineContext[subquery];
|
|
256
|
+
if (onlineReference.organic && onlineReference.organic.length > 0) {
|
|
257
|
+
numOnlineReferences += onlineReference.organic.length;
|
|
258
|
+
for (let index in onlineReference.organic) {
|
|
259
|
+
let reference = onlineReference.organic[index];
|
|
260
|
+
let polishedReference = generateOnlineReference(reference, index);
|
|
261
|
+
referenceSection.appendChild(polishedReference);
|
|
262
|
+
}
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
if (onlineReference.knowledgeGraph && onlineReference.knowledgeGraph.length > 0) {
|
|
266
|
+
numOnlineReferences += onlineReference.knowledgeGraph.length;
|
|
267
|
+
for (let index in onlineReference.knowledgeGraph) {
|
|
268
|
+
let reference = onlineReference.knowledgeGraph[index];
|
|
269
|
+
let polishedReference = generateOnlineReference(reference, index);
|
|
270
|
+
referenceSection.appendChild(polishedReference);
|
|
271
|
+
}
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
if (onlineReference.peopleAlsoAsk && onlineReference.peopleAlsoAsk.length > 0) {
|
|
275
|
+
numOnlineReferences += onlineReference.peopleAlsoAsk.length;
|
|
276
|
+
for (let index in onlineReference.peopleAlsoAsk) {
|
|
277
|
+
let reference = onlineReference.peopleAlsoAsk[index];
|
|
278
|
+
let polishedReference = generateOnlineReference(reference, index);
|
|
279
|
+
referenceSection.appendChild(polishedReference);
|
|
280
|
+
}
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
if (onlineReference.webpages && onlineReference.webpages.length > 0) {
|
|
284
|
+
numOnlineReferences += onlineReference.webpages.length;
|
|
285
|
+
for (let index in onlineReference.webpages) {
|
|
286
|
+
let reference = onlineReference.webpages[index];
|
|
287
|
+
let polishedReference = generateOnlineReference(reference, index);
|
|
288
|
+
referenceSection.appendChild(polishedReference);
|
|
289
|
+
}
|
|
290
|
+
}
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
return numOnlineReferences;
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
function renderMessageWithReference(message, by, context=null, dt=null, onlineContext=null, intentType=null, inferredQueries=null) {
|
|
297
|
+
let chatEl;
|
|
298
|
+
if (intentType?.includes("text-to-image")) {
|
|
299
|
+
let imageMarkdown = generateImageMarkdown(message, intentType, inferredQueries);
|
|
300
|
+
chatEl = renderMessage(imageMarkdown, by, dt, null, false, "return");
|
|
301
|
+
} else {
|
|
302
|
+
chatEl = renderMessage(message, by, dt, null, false, "return");
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
// If no document or online context is provided, render the message as is
|
|
306
|
+
if ((context == null || context?.length == 0)
|
|
307
|
+
&& (onlineContext == null || (onlineContext && Object.keys(onlineContext).length == 0))) {
|
|
308
|
+
return chatEl;
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
// If document or online context is provided, render the message with its references
|
|
312
|
+
let references = {};
|
|
313
|
+
if (!!context) references["notes"] = context;
|
|
314
|
+
if (!!onlineContext) references["online"] = onlineContext;
|
|
315
|
+
let chatMessageEl = chatEl.getElementsByClassName("chat-message-text")[0];
|
|
316
|
+
chatMessageEl.appendChild(createReferenceSection(references));
|
|
317
|
+
|
|
318
|
+
return chatEl;
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
function generateImageMarkdown(message, intentType, inferredQueries=null) {
|
|
322
|
+
let imageMarkdown;
|
|
323
|
+
if (intentType === "text-to-image") {
|
|
324
|
+
imageMarkdown = ``;
|
|
325
|
+
} else if (intentType === "text-to-image2") {
|
|
326
|
+
imageMarkdown = ``;
|
|
327
|
+
} else if (intentType === "text-to-image-v3") {
|
|
328
|
+
imageMarkdown = ``;
|
|
329
|
+
}
|
|
330
|
+
const inferredQuery = inferredQueries?.[0];
|
|
331
|
+
if (inferredQuery) {
|
|
332
|
+
imageMarkdown += `\n\n**Inferred Query**:\n\n${inferredQuery}`;
|
|
333
|
+
}
|
|
334
|
+
return imageMarkdown;
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
//handler function for posting feedback data to endpoint
|
|
338
|
+
function sendFeedback(_uquery="", _kquery="", _sentiment="") {
|
|
339
|
+
const uquery = _uquery;
|
|
340
|
+
const kquery = _kquery;
|
|
341
|
+
const sentiment = _sentiment;
|
|
342
|
+
fetch('/api/chat/feedback', {
|
|
343
|
+
method: 'POST',
|
|
344
|
+
headers: {
|
|
345
|
+
'Content-Type': 'application/json'
|
|
346
|
+
},
|
|
347
|
+
body: JSON.stringify({uquery: uquery, kquery: kquery, sentiment: sentiment})
|
|
348
|
+
})
|
|
349
|
+
.then(response => response.json())
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
function textToSpeech(message, event=null) {
|
|
353
|
+
// Replace the speaker with a loading icon.
|
|
354
|
+
let loader = document.createElement("span");
|
|
355
|
+
loader.classList.add("loader");
|
|
356
|
+
|
|
357
|
+
let speechButton;
|
|
358
|
+
let speechIcon;
|
|
359
|
+
if (event === null) {
|
|
360
|
+
// Pick the last speech button if none is provided
|
|
361
|
+
let speechButtons = document.getElementsByClassName("speech-button");
|
|
362
|
+
speechButton = speechButtons[speechButtons.length - 1];
|
|
363
|
+
|
|
364
|
+
let speechIcons = document.getElementsByClassName("speech-icon");
|
|
365
|
+
speechIcon = speechIcons[speechIcons.length - 1];
|
|
366
|
+
} else {
|
|
367
|
+
speechButton = event.currentTarget;
|
|
368
|
+
speechIcon = event.target;
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
speechButton.innerHTML = "";
|
|
372
|
+
speechButton.appendChild(loader);
|
|
373
|
+
speechButton.disabled = true;
|
|
374
|
+
|
|
375
|
+
const context = new (window.AudioContext || window.webkitAudioContext)();
|
|
376
|
+
fetch(`/api/chat/speech?text=${encodeURIComponent(message)}`, {
|
|
377
|
+
method: 'POST',
|
|
378
|
+
headers: {
|
|
379
|
+
'Content-Type': 'application/json'
|
|
380
|
+
},
|
|
381
|
+
})
|
|
382
|
+
.then(response => response.arrayBuffer())
|
|
383
|
+
.then(arrayBuffer => context.decodeAudioData(arrayBuffer))
|
|
384
|
+
.then(audioBuffer => {
|
|
385
|
+
const source = context.createBufferSource();
|
|
386
|
+
source.buffer = audioBuffer;
|
|
387
|
+
source.connect(context.destination);
|
|
388
|
+
source.start(0);
|
|
389
|
+
source.onended = function() {
|
|
390
|
+
speechButton.innerHTML = "";
|
|
391
|
+
speechButton.appendChild(speechIcon);
|
|
392
|
+
speechButton.disabled = false;
|
|
393
|
+
};
|
|
394
|
+
})
|
|
395
|
+
.catch(err => {
|
|
396
|
+
console.error("Error playing speech:", err);
|
|
397
|
+
speechButton.innerHTML = "";
|
|
398
|
+
speechButton.appendChild(speechIcon);
|
|
399
|
+
speechButton.disabled = true;
|
|
400
|
+
});
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
function formatHTMLMessage(message, raw=false, willReplace=true, userQuery) {
|
|
404
|
+
var md = window.markdownit();
|
|
405
|
+
let newHTML = message;
|
|
406
|
+
|
|
407
|
+
// Replace LaTeX delimiters with placeholders
|
|
408
|
+
newHTML = newHTML.replace(/\\\(/g, 'LEFTPAREN').replace(/\\\)/g, 'RIGHTPAREN')
|
|
409
|
+
.replace(/\\\[/g, 'LEFTBRACKET').replace(/\\\]/g, 'RIGHTBRACKET');
|
|
410
|
+
|
|
411
|
+
// Remove any text between <s>[INST] and </s> tags. These are spurious instructions for the AI chat model.
|
|
412
|
+
newHTML = newHTML.replace(/<s>\[INST\].+(<\/s>)?/g, '');
|
|
413
|
+
|
|
414
|
+
// Customize the rendering of images
|
|
415
|
+
md.renderer.rules.image = function(tokens, idx, options, env, self) {
|
|
416
|
+
let token = tokens[idx];
|
|
417
|
+
|
|
418
|
+
// Add class="text-to-image" to images
|
|
419
|
+
token.attrPush(['class', 'text-to-image']);
|
|
420
|
+
|
|
421
|
+
// Use the default renderer to render image markdown format
|
|
422
|
+
return self.renderToken(tokens, idx, options);
|
|
423
|
+
};
|
|
424
|
+
|
|
425
|
+
// Render markdown
|
|
426
|
+
newHTML = raw ? newHTML : md.render(newHTML);
|
|
427
|
+
|
|
428
|
+
// Replace placeholders with LaTeX delimiters
|
|
429
|
+
newHTML = newHTML.replace(/LEFTPAREN/g, '\\(').replace(/RIGHTPAREN/g, '\\)')
|
|
430
|
+
.replace(/LEFTBRACKET/g, '\\[').replace(/RIGHTBRACKET/g, '\\]');
|
|
431
|
+
|
|
432
|
+
// Sanitize the rendered markdown
|
|
433
|
+
newHTML = DOMPurify.sanitize(newHTML);
|
|
434
|
+
|
|
435
|
+
// Set rendered markdown to HTML DOM element
|
|
436
|
+
let element = document.createElement('div');
|
|
437
|
+
element.innerHTML = newHTML;
|
|
438
|
+
element.className = "chat-message-text-response";
|
|
439
|
+
|
|
440
|
+
// Add a copy button to each chat message, if it doesn't already exist
|
|
441
|
+
if (willReplace === true) {
|
|
442
|
+
let copyButton = document.createElement('button');
|
|
443
|
+
copyButton.classList.add("copy-button");
|
|
444
|
+
copyButton.title = "Copy Message";
|
|
445
|
+
let copyIcon = document.createElement("img");
|
|
446
|
+
copyIcon.src = "/static/assets/icons/copy-button.svg";
|
|
447
|
+
copyIcon.classList.add("copy-icon");
|
|
448
|
+
copyButton.appendChild(copyIcon);
|
|
449
|
+
copyButton.addEventListener('click', createCopyParentText(message));
|
|
450
|
+
|
|
451
|
+
//create thumbs-up button
|
|
452
|
+
let thumbsUpButton = document.createElement('button');
|
|
453
|
+
thumbsUpButton.className = 'thumbs-up-button';
|
|
454
|
+
let thumbsUpIcon = document.createElement("img");
|
|
455
|
+
thumbsUpIcon.src = "/static/assets/icons/thumbs-up-svgrepo-com.svg";
|
|
456
|
+
thumbsUpIcon.classList.add("thumbs-up-icon");
|
|
457
|
+
thumbsUpButton.appendChild(thumbsUpIcon);
|
|
458
|
+
thumbsUpButton.onclick = function() {
|
|
459
|
+
khojQuery = newHTML;
|
|
460
|
+
thumbsUpIcon.src = "/static/assets/icons/confirm-icon.svg";
|
|
461
|
+
sendFeedback(userQuery ,khojQuery, "Good Response");
|
|
462
|
+
};
|
|
463
|
+
|
|
464
|
+
// Create thumbs-down button
|
|
465
|
+
let thumbsDownButton = document.createElement('button');
|
|
466
|
+
thumbsDownButton.className = 'thumbs-down-button';
|
|
467
|
+
let thumbsDownIcon = document.createElement("img");
|
|
468
|
+
thumbsDownIcon.src = "/static/assets/icons/thumbs-down-svgrepo-com.svg";
|
|
469
|
+
thumbsDownIcon.classList.add("thumbs-down-icon");
|
|
470
|
+
thumbsDownButton.appendChild(thumbsDownIcon);
|
|
471
|
+
thumbsDownButton.onclick = function() {
|
|
472
|
+
khojQuery = newHTML;
|
|
473
|
+
thumbsDownIcon.src = "/static/assets/icons/confirm-icon.svg";
|
|
474
|
+
sendFeedback(userQuery, khojQuery, "Bad Response");
|
|
475
|
+
};
|
|
476
|
+
|
|
477
|
+
// Only enable the speech feature if the user is subscribed
|
|
478
|
+
let speechButton = null;
|
|
479
|
+
|
|
480
|
+
if ("{{ is_active }}" == "True") {
|
|
481
|
+
// Create a speech button icon to play the message out loud
|
|
482
|
+
speechButton = document.createElement('button');
|
|
483
|
+
speechButton.classList.add("speech-button");
|
|
484
|
+
speechButton.title = "Listen to Message";
|
|
485
|
+
let speechIcon = document.createElement("img");
|
|
486
|
+
speechIcon.src = "/static/assets/icons/speaker.svg";
|
|
487
|
+
speechIcon.classList.add("speech-icon");
|
|
488
|
+
speechButton.appendChild(speechIcon);
|
|
489
|
+
speechButton.addEventListener('click', (event) => textToSpeech(message, event));
|
|
490
|
+
}
|
|
491
|
+
|
|
492
|
+
// Append buttons to parent element
|
|
493
|
+
element.append(copyButton, thumbsDownButton, thumbsUpButton);
|
|
494
|
+
|
|
495
|
+
if (speechButton) {
|
|
496
|
+
element.append(speechButton);
|
|
497
|
+
}
|
|
498
|
+
}
|
|
499
|
+
|
|
500
|
+
renderMathInElement(element, {
|
|
501
|
+
// customised options
|
|
502
|
+
// • auto-render specific keys, e.g.:
|
|
503
|
+
delimiters: [
|
|
504
|
+
{left: '$$', right: '$$', display: true},
|
|
505
|
+
{left: '\\(', right: '\\)', display: false},
|
|
506
|
+
{left: '\\[', right: '\\]', display: true}
|
|
507
|
+
],
|
|
508
|
+
// • rendering keys, e.g.:
|
|
509
|
+
throwOnError : false
|
|
510
|
+
});
|
|
511
|
+
|
|
512
|
+
// Get any elements with a class that starts with "language"
|
|
513
|
+
let codeBlockElements = element.querySelectorAll('[class^="language-"]');
|
|
514
|
+
// For each element, add a parent div with the class "programmatic-output"
|
|
515
|
+
codeBlockElements.forEach((codeElement) => {
|
|
516
|
+
// Create the parent div
|
|
517
|
+
let parentDiv = document.createElement('div');
|
|
518
|
+
parentDiv.classList.add("programmatic-output");
|
|
519
|
+
// Add the parent div before the code element
|
|
520
|
+
codeElement.parentNode.insertBefore(parentDiv, codeElement);
|
|
521
|
+
// Move the code element into the parent div
|
|
522
|
+
parentDiv.appendChild(codeElement);
|
|
523
|
+
|
|
524
|
+
// Check if hijs has been loaded
|
|
525
|
+
if (typeof hljs !== 'undefined') {
|
|
526
|
+
// Highlight the code block
|
|
527
|
+
hljs.highlightBlock(codeElement);
|
|
528
|
+
}
|
|
529
|
+
|
|
530
|
+
// Add a copy button to each code block, if it doesn't already exist
|
|
531
|
+
if (willReplace === true) {
|
|
532
|
+
let copyButton = document.createElement('button');
|
|
533
|
+
copyButton.classList.add("copy-button");
|
|
534
|
+
copyButton.title = "Copy Code";
|
|
535
|
+
let copyIcon = document.createElement("img");
|
|
536
|
+
copyIcon.src = "/static/assets/icons/copy-button.svg";
|
|
537
|
+
copyIcon.classList.add("copy-icon");
|
|
538
|
+
copyButton.appendChild(copyIcon);
|
|
539
|
+
copyButton.addEventListener('click', copyParentText);
|
|
540
|
+
codeElement.prepend(copyButton);
|
|
541
|
+
}
|
|
542
|
+
});
|
|
543
|
+
|
|
544
|
+
// Get all code elements that have no class.
|
|
545
|
+
let codeElements = element.querySelectorAll('code:not([class])');
|
|
546
|
+
codeElements.forEach((codeElement) => {
|
|
547
|
+
// Add the class "chat-response" to each element
|
|
548
|
+
codeElement.classList.add("chat-response");
|
|
549
|
+
});
|
|
550
|
+
|
|
551
|
+
let anchorElements = element.querySelectorAll('a');
|
|
552
|
+
anchorElements.forEach((anchorElement) => {
|
|
553
|
+
// Add the class "inline-chat-link" to each element
|
|
554
|
+
anchorElement.classList.add("inline-chat-link");
|
|
555
|
+
});
|
|
556
|
+
|
|
557
|
+
return element
|
|
558
|
+
}
|
|
559
|
+
|
|
560
|
+
function createReferenceSection(references) {
|
|
561
|
+
let referenceSection = document.createElement('div');
|
|
562
|
+
referenceSection.classList.add("reference-section");
|
|
563
|
+
referenceSection.classList.add("collapsed");
|
|
564
|
+
|
|
565
|
+
let numReferences = 0;
|
|
566
|
+
|
|
567
|
+
if (references.hasOwnProperty("notes")) {
|
|
568
|
+
numReferences += references["notes"].length;
|
|
569
|
+
|
|
570
|
+
references["notes"].forEach((reference, index) => {
|
|
571
|
+
let polishedReference = generateReference(reference, index);
|
|
572
|
+
referenceSection.appendChild(polishedReference);
|
|
573
|
+
});
|
|
574
|
+
}
|
|
575
|
+
if (references.hasOwnProperty("online")) {
|
|
576
|
+
numReferences += processOnlineReferences(referenceSection, references["online"]);
|
|
577
|
+
}
|
|
578
|
+
|
|
579
|
+
let referenceExpandButton = document.createElement('button');
|
|
580
|
+
referenceExpandButton.classList.add("reference-expand-button");
|
|
581
|
+
referenceExpandButton.textContent = numReferences == 1 ? "1 reference" : `${numReferences} references`;
|
|
582
|
+
|
|
583
|
+
referenceExpandButton.addEventListener('click', function() {
|
|
584
|
+
if (referenceSection.classList.contains("collapsed")) {
|
|
585
|
+
referenceSection.classList.remove("collapsed");
|
|
586
|
+
referenceSection.classList.add("expanded");
|
|
587
|
+
} else {
|
|
588
|
+
referenceSection.classList.add("collapsed");
|
|
589
|
+
referenceSection.classList.remove("expanded");
|
|
590
|
+
}
|
|
591
|
+
});
|
|
592
|
+
|
|
593
|
+
let referencesDiv = document.createElement('div');
|
|
594
|
+
referencesDiv.classList.add("references");
|
|
595
|
+
referencesDiv.appendChild(referenceExpandButton);
|
|
596
|
+
referencesDiv.appendChild(referenceSection);
|
|
597
|
+
|
|
598
|
+
return referencesDiv;
|
|
599
|
+
}
|
|
600
|
+
|
|
601
|
+
async function chat(isVoice=false) {
|
|
602
|
+
if (websocket) {
|
|
603
|
+
sendMessageViaWebSocket(isVoice);
|
|
604
|
+
return;
|
|
605
|
+
}
|
|
606
|
+
|
|
607
|
+
let query = document.getElementById("chat-input").value.trim();
|
|
608
|
+
let resultsCount = localStorage.getItem("khojResultsCount") || 5;
|
|
609
|
+
console.log(`Query: ${query}`);
|
|
610
|
+
|
|
611
|
+
// Short circuit on empty query
|
|
612
|
+
if (query.length === 0)
|
|
613
|
+
return;
|
|
614
|
+
|
|
615
|
+
// if the query is not empty then update userMessages array. keep the size of the array to 10
|
|
616
|
+
if (userMessages.length >= 10) {
|
|
617
|
+
userMessages.shift();
|
|
618
|
+
}
|
|
619
|
+
userMessages.push(query);
|
|
620
|
+
resetUserMessageIndex();
|
|
621
|
+
|
|
622
|
+
// Add message by user to chat body
|
|
623
|
+
renderMessage(query, "you");
|
|
624
|
+
document.getElementById("chat-input").value = "";
|
|
625
|
+
autoResize();
|
|
626
|
+
document.getElementById("chat-input").setAttribute("disabled", "disabled");
|
|
627
|
+
let chat_body = document.getElementById("chat-body");
|
|
628
|
+
|
|
629
|
+
let conversationID = chat_body.dataset.conversationId;
|
|
630
|
+
|
|
631
|
+
if (!conversationID) {
|
|
632
|
+
let response = await fetch('/api/chat/sessions', { method: "POST" });
|
|
633
|
+
let data = await response.json();
|
|
634
|
+
conversationID = data.conversation_id;
|
|
635
|
+
chat_body.dataset.conversationId = conversationID;
|
|
636
|
+
refreshChatSessionsPanel();
|
|
637
|
+
}
|
|
638
|
+
|
|
639
|
+
let new_response = document.createElement("div");
|
|
640
|
+
new_response.classList.add("chat-message", "khoj");
|
|
641
|
+
new_response.attributes["data-meta"] = "🏮 Khoj at " + formatDate(new Date());
|
|
642
|
+
chat_body.appendChild(new_response);
|
|
643
|
+
|
|
644
|
+
let newResponseText = document.createElement("div");
|
|
645
|
+
newResponseText.classList.add("chat-message-text", "khoj");
|
|
646
|
+
new_response.appendChild(newResponseText);
|
|
647
|
+
|
|
648
|
+
// Temporary status message to indicate that Khoj is thinking
|
|
649
|
+
let loadingEllipsis = createLoadingEllipse();
|
|
650
|
+
|
|
651
|
+
newResponseText.appendChild(loadingEllipsis);
|
|
652
|
+
document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight;
|
|
653
|
+
|
|
654
|
+
let chatTooltip = document.getElementById("chat-tooltip");
|
|
655
|
+
chatTooltip.style.display = "none";
|
|
656
|
+
|
|
657
|
+
let chatInput = document.getElementById("chat-input");
|
|
658
|
+
chatInput.classList.remove("option-enabled");
|
|
659
|
+
|
|
660
|
+
// Generate backend API URL to execute query
|
|
661
|
+
let url = `/api/chat?q=${encodeURIComponent(query)}&n=${resultsCount}&client=web&stream=true&conversation_id=${conversationID}®ion=${region}&city=${city}&country=${countryName}&timezone=${timezone}`;
|
|
662
|
+
|
|
663
|
+
// Call specified Khoj API
|
|
664
|
+
let response = await fetch(url);
|
|
665
|
+
let rawResponse = "";
|
|
666
|
+
let references = null;
|
|
667
|
+
const contentType = response.headers.get("content-type");
|
|
668
|
+
|
|
669
|
+
if (contentType === "application/json") {
|
|
670
|
+
// Handle JSON response
|
|
671
|
+
try {
|
|
672
|
+
const responseAsJson = await response.json();
|
|
673
|
+
if (responseAsJson.image || responseAsJson.detail) {
|
|
674
|
+
({rawResponse, references } = handleImageResponse(responseAsJson, rawResponse));
|
|
675
|
+
} else {
|
|
676
|
+
rawResponse = responseAsJson.response;
|
|
677
|
+
}
|
|
678
|
+
} catch (error) {
|
|
679
|
+
// If the chunk is not a JSON object, just display it as is
|
|
680
|
+
rawResponse += chunk;
|
|
681
|
+
} finally {
|
|
682
|
+
addMessageToChatBody(rawResponse, newResponseText, references);
|
|
683
|
+
}
|
|
684
|
+
} else {
|
|
685
|
+
// Handle streamed response of type text/event-stream or text/plain
|
|
686
|
+
const reader = response.body.getReader();
|
|
687
|
+
const decoder = new TextDecoder();
|
|
688
|
+
let references = {};
|
|
689
|
+
|
|
690
|
+
readStream();
|
|
691
|
+
|
|
692
|
+
function readStream() {
|
|
693
|
+
reader.read().then(({ done, value }) => {
|
|
694
|
+
if (done) {
|
|
695
|
+
// Append any references after all the data has been streamed
|
|
696
|
+
finalizeChatBodyResponse(references, newResponseText);
|
|
697
|
+
return;
|
|
698
|
+
}
|
|
699
|
+
|
|
700
|
+
// Decode message chunk from stream
|
|
701
|
+
const chunk = decoder.decode(value, { stream: true });
|
|
702
|
+
|
|
703
|
+
if (chunk.includes("### compiled references:")) {
|
|
704
|
+
({ rawResponse, references } = handleCompiledReferences(newResponseText, chunk, references, rawResponse));
|
|
705
|
+
readStream();
|
|
706
|
+
} else {
|
|
707
|
+
// If the chunk is not a JSON object, just display it as is
|
|
708
|
+
rawResponse += chunk;
|
|
709
|
+
handleStreamResponse(newResponseText, rawResponse, query, loadingEllipsis);
|
|
710
|
+
readStream();
|
|
711
|
+
}
|
|
712
|
+
});
|
|
713
|
+
|
|
714
|
+
// Scroll to bottom of chat window as chat response is streamed
|
|
715
|
+
document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight;
|
|
716
|
+
};
|
|
717
|
+
}
|
|
718
|
+
};
|
|
719
|
+
|
|
720
|
+
function createLoadingEllipse() {
|
|
721
|
+
// Temporary status message to indicate that Khoj is thinking
|
|
722
|
+
let loadingEllipsis = document.createElement("div");
|
|
723
|
+
loadingEllipsis.classList.add("lds-ellipsis");
|
|
724
|
+
|
|
725
|
+
let firstEllipsis = document.createElement("div");
|
|
726
|
+
firstEllipsis.classList.add("lds-ellipsis-item");
|
|
727
|
+
|
|
728
|
+
let secondEllipsis = document.createElement("div");
|
|
729
|
+
secondEllipsis.classList.add("lds-ellipsis-item");
|
|
730
|
+
|
|
731
|
+
let thirdEllipsis = document.createElement("div");
|
|
732
|
+
thirdEllipsis.classList.add("lds-ellipsis-item");
|
|
733
|
+
|
|
734
|
+
let fourthEllipsis = document.createElement("div");
|
|
735
|
+
fourthEllipsis.classList.add("lds-ellipsis-item");
|
|
736
|
+
|
|
737
|
+
loadingEllipsis.appendChild(firstEllipsis);
|
|
738
|
+
loadingEllipsis.appendChild(secondEllipsis);
|
|
739
|
+
loadingEllipsis.appendChild(thirdEllipsis);
|
|
740
|
+
loadingEllipsis.appendChild(fourthEllipsis);
|
|
741
|
+
|
|
742
|
+
return loadingEllipsis;
|
|
743
|
+
}
|
|
744
|
+
|
|
745
|
+
function handleStreamResponse(newResponseElement, rawResponse, rawQuery, loadingEllipsis, replace=true) {
|
|
746
|
+
if (newResponseElement.getElementsByClassName("lds-ellipsis").length > 0 && loadingEllipsis) {
|
|
747
|
+
newResponseElement.removeChild(loadingEllipsis);
|
|
748
|
+
}
|
|
749
|
+
if (replace) {
|
|
750
|
+
newResponseElement.innerHTML = "";
|
|
751
|
+
}
|
|
752
|
+
newResponseElement.appendChild(formatHTMLMessage(rawResponse, false, replace, rawQuery));
|
|
753
|
+
document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight;
|
|
754
|
+
}
|
|
755
|
+
|
|
756
|
+
function handleCompiledReferences(rawResponseElement, chunk, references, rawResponse) {
|
|
757
|
+
const additionalResponse = chunk.split("### compiled references:")[0];
|
|
758
|
+
rawResponse += additionalResponse;
|
|
759
|
+
rawResponseElement.innerHTML = "";
|
|
760
|
+
rawResponseElement.appendChild(formatHTMLMessage(rawResponse));
|
|
761
|
+
|
|
762
|
+
const rawReference = chunk.split("### compiled references:")[1];
|
|
763
|
+
const rawReferenceAsJson = JSON.parse(rawReference);
|
|
764
|
+
if (rawReferenceAsJson instanceof Array) {
|
|
765
|
+
references["notes"] = rawReferenceAsJson;
|
|
766
|
+
} else if (typeof rawReferenceAsJson === "object" && rawReferenceAsJson !== null) {
|
|
767
|
+
references["online"] = rawReferenceAsJson;
|
|
768
|
+
}
|
|
769
|
+
return { rawResponse, references };
|
|
770
|
+
}
|
|
771
|
+
|
|
772
|
+
function handleImageResponse(imageJson, rawResponse) {
|
|
773
|
+
if (imageJson.image) {
|
|
774
|
+
const inferredQuery = imageJson.inferredQueries?.[0] ?? "generated image";
|
|
775
|
+
|
|
776
|
+
// If response has image field, response is a generated image.
|
|
777
|
+
if (imageJson.intentType === "text-to-image") {
|
|
778
|
+
rawResponse += ``;
|
|
779
|
+
} else if (imageJson.intentType === "text-to-image2") {
|
|
780
|
+
rawResponse += ``;
|
|
781
|
+
} else if (imageJson.intentType === "text-to-image-v3") {
|
|
782
|
+
rawResponse = ``;
|
|
783
|
+
}
|
|
784
|
+
if (inferredQuery) {
|
|
785
|
+
rawResponse += `\n\n**Inferred Query**:\n\n${inferredQuery}`;
|
|
786
|
+
}
|
|
787
|
+
}
|
|
788
|
+
let references = {};
|
|
789
|
+
if (imageJson.context && imageJson.context.length > 0) {
|
|
790
|
+
const rawReferenceAsJson = imageJson.context;
|
|
791
|
+
if (rawReferenceAsJson instanceof Array) {
|
|
792
|
+
references["notes"] = rawReferenceAsJson;
|
|
793
|
+
} else if (typeof rawReferenceAsJson === "object" && rawReferenceAsJson !== null) {
|
|
794
|
+
references["online"] = rawReferenceAsJson;
|
|
795
|
+
}
|
|
796
|
+
}
|
|
797
|
+
if (imageJson.detail) {
|
|
798
|
+
// If response has detail field, response is an error message.
|
|
799
|
+
rawResponse += imageJson.detail;
|
|
800
|
+
}
|
|
801
|
+
return { rawResponse, references };
|
|
802
|
+
}
|
|
803
|
+
|
|
804
|
+
function addMessageToChatBody(rawResponse, newResponseElement, references) {
|
|
805
|
+
newResponseElement.innerHTML = "";
|
|
806
|
+
newResponseElement.appendChild(formatHTMLMessage(rawResponse));
|
|
807
|
+
|
|
808
|
+
finalizeChatBodyResponse(references, newResponseElement);
|
|
809
|
+
}
|
|
810
|
+
|
|
811
|
+
function finalizeChatBodyResponse(references, newResponseElement) {
|
|
812
|
+
if (references != null && Object.keys(references).length > 0) {
|
|
813
|
+
newResponseElement.appendChild(createReferenceSection(references));
|
|
814
|
+
}
|
|
815
|
+
document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight;
|
|
816
|
+
document.getElementById("chat-input").removeAttribute("disabled");
|
|
817
|
+
}
|
|
818
|
+
|
|
819
|
+
function incrementalChat(event) {
|
|
820
|
+
if (!event.shiftKey && event.key === 'Enter') {
|
|
821
|
+
event.preventDefault();
|
|
822
|
+
chat();
|
|
823
|
+
}
|
|
824
|
+
}
|
|
825
|
+
|
|
826
|
+
function fillCommandInPrompt(command) {
|
|
827
|
+
let chatTooltip = document.getElementById("chat-tooltip");
|
|
828
|
+
chatTooltip.style.display = "none";
|
|
829
|
+
|
|
830
|
+
let chatInput = document.getElementById("chat-input");
|
|
831
|
+
chatInput.value = "/" + command + " ";
|
|
832
|
+
chatInput.classList.add("option-enabled");
|
|
833
|
+
chatInput.focus();
|
|
834
|
+
}
|
|
835
|
+
|
|
836
|
+
function onChatInput() {
|
|
837
|
+
let chatInput = document.getElementById("chat-input");
|
|
838
|
+
chatInput.value = chatInput.value.trimStart();
|
|
839
|
+
|
|
840
|
+
let questionStarterSuggestions = document.getElementById("question-starters");
|
|
841
|
+
questionStarterSuggestions.innerHTML = "";
|
|
842
|
+
questionStarterSuggestions.style.display = "none";
|
|
843
|
+
|
|
844
|
+
if (chatInput.value.startsWith("/") && chatInput.value.split(" ").length === 1) {
|
|
845
|
+
let chatTooltip = document.getElementById("chat-tooltip");
|
|
846
|
+
chatTooltip.style.display = "block";
|
|
847
|
+
let helpText = "<div>";
|
|
848
|
+
const command = chatInput.value.split(" ")[0].substring(1);
|
|
849
|
+
for (let key in chatOptions) {
|
|
850
|
+
if (!!!command || key.startsWith(command)) {
|
|
851
|
+
helpText += `<div class="helpoption" onclick="fillCommandInPrompt('${key}')"><b>/${key}</b>: ${chatOptions[key]}</div>`;
|
|
852
|
+
}
|
|
853
|
+
}
|
|
854
|
+
chatTooltip.innerHTML = helpText;
|
|
855
|
+
} else if (chatInput.value.startsWith("/")) {
|
|
856
|
+
const firstWord = chatInput.value.split(" ")[0];
|
|
857
|
+
if (firstWord.substring(1) in chatOptions) {
|
|
858
|
+
chatInput.classList.add("option-enabled");
|
|
859
|
+
} else {
|
|
860
|
+
chatInput.classList.remove("option-enabled");
|
|
861
|
+
}
|
|
862
|
+
let chatTooltip = document.getElementById("chat-tooltip");
|
|
863
|
+
chatTooltip.style.display = "none";
|
|
864
|
+
} else {
|
|
865
|
+
let chatTooltip = document.getElementById("chat-tooltip");
|
|
866
|
+
chatTooltip.style.display = "none";
|
|
867
|
+
chatInput.classList.remove("option-enabled");
|
|
868
|
+
}
|
|
869
|
+
|
|
870
|
+
autoResize();
|
|
871
|
+
}
|
|
872
|
+
|
|
873
|
+
function autoResize() {
|
|
874
|
+
const textarea = document.getElementById('chat-input');
|
|
875
|
+
const scrollTop = textarea.scrollTop;
|
|
876
|
+
textarea.style.height = '0';
|
|
877
|
+
const scrollHeight = textarea.scrollHeight + 16; // +8 accounts for padding
|
|
878
|
+
textarea.style.height = Math.min(scrollHeight, 200) + 'px';
|
|
879
|
+
textarea.scrollTop = scrollTop;
|
|
880
|
+
document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight;
|
|
881
|
+
}
|
|
882
|
+
|
|
883
|
+
function openFileBrowser() {
|
|
884
|
+
event.preventDefault();
|
|
885
|
+
var overlayText = document.getElementById("dropzone-overlay");
|
|
886
|
+
var dropzone = document.getElementById('chat-body');
|
|
887
|
+
|
|
888
|
+
if (overlayText == null) {
|
|
889
|
+
dropzone.classList.add('dragover');
|
|
890
|
+
var overlayText = document.createElement("div");
|
|
891
|
+
overlayText.textContent = "Select file(s) or drag + drop it here to share it with Khoj";
|
|
892
|
+
overlayText.className = "dropzone-overlay";
|
|
893
|
+
overlayText.id = "dropzone-overlay";
|
|
894
|
+
dropzone.appendChild(overlayText);
|
|
895
|
+
}
|
|
896
|
+
|
|
897
|
+
const fileInput = document.createElement('input');
|
|
898
|
+
fileInput.type = 'file';
|
|
899
|
+
fileInput.multiple = true;
|
|
900
|
+
fileInput.addEventListener('change', function() {
|
|
901
|
+
const selectedFiles = fileInput.files;
|
|
902
|
+
uploadDataForIndexing(selectedFiles);
|
|
903
|
+
});
|
|
904
|
+
|
|
905
|
+
// Remove overlay text after file input is closed
|
|
906
|
+
fileInput.addEventListener('blur', function() {
|
|
907
|
+
dropzone.classList.remove('dragover');
|
|
908
|
+
var overlayText = document.getElementById("dropzone-overlay");
|
|
909
|
+
if (overlayText != null) {
|
|
910
|
+
overlayText.remove();
|
|
911
|
+
}
|
|
912
|
+
});
|
|
913
|
+
|
|
914
|
+
// Remove overlay text if file input is cancelled
|
|
915
|
+
fileInput.addEventListener('cancel', function() {
|
|
916
|
+
dropzone.classList.remove('dragover');
|
|
917
|
+
var overlayText = document.getElementById("dropzone-overlay");
|
|
918
|
+
if (overlayText != null) {
|
|
919
|
+
overlayText.remove();
|
|
920
|
+
}
|
|
921
|
+
});
|
|
922
|
+
|
|
923
|
+
fileInput.click();
|
|
924
|
+
}
|
|
925
|
+
|
|
926
|
+
function uploadDataForIndexing(files) {
|
|
927
|
+
var dropzone = document.getElementById('chat-body');
|
|
928
|
+
var badfiles = [];
|
|
929
|
+
var goodfiles = [];
|
|
930
|
+
var overlayText = document.getElementById("dropzone-overlay");
|
|
931
|
+
|
|
932
|
+
for (let file of files) {
|
|
933
|
+
if (!file || (!allowedExtensions.includes(file.type) && !allowedFileEndings.includes(file.name.split('.').pop()))) {
|
|
934
|
+
if (file) {
|
|
935
|
+
badfiles.push(file.name);
|
|
936
|
+
}
|
|
937
|
+
} else {
|
|
938
|
+
goodfiles.push(file);
|
|
939
|
+
}
|
|
940
|
+
}
|
|
941
|
+
|
|
942
|
+
if (badfiles.length > 0) {
|
|
943
|
+
alert("The following files are not supported yet:\n" + badfiles.join('\n'));
|
|
944
|
+
}
|
|
945
|
+
|
|
946
|
+
|
|
947
|
+
const formData = new FormData();
|
|
948
|
+
var overlayText = document.getElementById("dropzone-overlay");
|
|
949
|
+
if (overlayText != null) {
|
|
950
|
+
// Display loading spinner
|
|
951
|
+
var loadingSpinner = document.createElement("div");
|
|
952
|
+
overlayText.textContent = "Uploading file(s) for indexing";
|
|
953
|
+
loadingSpinner.className = "spinner";
|
|
954
|
+
overlayText.appendChild(loadingSpinner);
|
|
955
|
+
}
|
|
956
|
+
|
|
957
|
+
// Create an array of Promises for file reading
|
|
958
|
+
const fileReadPromises = Array.from(goodfiles).map(file => {
|
|
959
|
+
return new Promise((resolve, reject) => {
|
|
960
|
+
let reader = new FileReader();
|
|
961
|
+
reader.onload = function (event) {
|
|
962
|
+
let fileContents = event.target.result;
|
|
963
|
+
let fileType = file.type;
|
|
964
|
+
let fileName = file.name;
|
|
965
|
+
if (fileType === "") {
|
|
966
|
+
let fileExtension = fileName.split('.').pop();
|
|
967
|
+
if (fileExtension === "org") {
|
|
968
|
+
fileType = "text/org";
|
|
969
|
+
} else if (fileExtension === "md") {
|
|
970
|
+
fileType = "text/markdown";
|
|
971
|
+
} else if (fileExtension === "txt") {
|
|
972
|
+
fileType = "text/plain";
|
|
973
|
+
} else if (fileExtension === "html") {
|
|
974
|
+
fileType = "text/html";
|
|
975
|
+
} else if (fileExtension === "pdf") {
|
|
976
|
+
fileType = "application/pdf";
|
|
977
|
+
} else if (fileExtension === "jpg" || fileExtension === "jpeg"){
|
|
978
|
+
fileType = "image/jpeg";
|
|
979
|
+
} else if (fileExtension === "png") {
|
|
980
|
+
fileType = "image/png";
|
|
981
|
+
}
|
|
982
|
+
else {
|
|
983
|
+
// Skip this file if its type is not supported
|
|
984
|
+
resolve();
|
|
985
|
+
return;
|
|
986
|
+
}
|
|
987
|
+
}
|
|
988
|
+
|
|
989
|
+
let fileObj = new Blob([fileContents], { type: fileType });
|
|
990
|
+
formData.append("files", fileObj, file.name);
|
|
991
|
+
resolve();
|
|
992
|
+
};
|
|
993
|
+
reader.onerror = reject;
|
|
994
|
+
reader.readAsArrayBuffer(file);
|
|
995
|
+
});
|
|
996
|
+
});
|
|
997
|
+
|
|
998
|
+
// Wait for all files to be read before making the fetch request
|
|
999
|
+
Promise.all(fileReadPromises)
|
|
1000
|
+
.then(() => {
|
|
1001
|
+
return fetch("/api/v1/index/update?force=false&client=web", {
|
|
1002
|
+
method: "POST",
|
|
1003
|
+
body: formData,
|
|
1004
|
+
});
|
|
1005
|
+
})
|
|
1006
|
+
.then((data) => {
|
|
1007
|
+
console.log(data);
|
|
1008
|
+
dropzone.classList.remove('dragover');
|
|
1009
|
+
var overlayText = document.getElementById("dropzone-overlay");
|
|
1010
|
+
if (overlayText != null) {
|
|
1011
|
+
overlayText.remove();
|
|
1012
|
+
}
|
|
1013
|
+
// Display indexing success message
|
|
1014
|
+
flashStatusInChatInput("✅ File indexed successfully");
|
|
1015
|
+
renderAllFiles();
|
|
1016
|
+
for (let file of goodfiles) {
|
|
1017
|
+
addFileFilterToConversation(file.name);
|
|
1018
|
+
loadFileFiltersFromConversation();
|
|
1019
|
+
}
|
|
1020
|
+
})
|
|
1021
|
+
.catch((error) => {
|
|
1022
|
+
console.log(error);
|
|
1023
|
+
dropzone.classList.remove('dragover');
|
|
1024
|
+
var overlayText = document.getElementById("dropzone-overlay");
|
|
1025
|
+
if (overlayText != null) {
|
|
1026
|
+
overlayText.remove();
|
|
1027
|
+
}
|
|
1028
|
+
// Display indexing failure message
|
|
1029
|
+
flashStatusInChatInput("⛔️ Failed to upload file for indexing");
|
|
1030
|
+
});
|
|
1031
|
+
}
|
|
1032
|
+
|
|
1033
|
+
|
|
1034
|
+
function setupDropZone() {
|
|
1035
|
+
var dropzone = document.getElementById('chat-body');
|
|
1036
|
+
|
|
1037
|
+
dropzone.ondragover = function(event) {
|
|
1038
|
+
event.preventDefault();
|
|
1039
|
+
this.classList.add('dragover');
|
|
1040
|
+
var overlayText = document.getElementById("dropzone-overlay");
|
|
1041
|
+
console.log("ondragover triggered");
|
|
1042
|
+
|
|
1043
|
+
if (overlayText == null) {
|
|
1044
|
+
var overlayText = document.createElement("div");
|
|
1045
|
+
overlayText.textContent = "Drop file to share it with Khoj";
|
|
1046
|
+
overlayText.className = "dropzone-overlay";
|
|
1047
|
+
overlayText.id = "dropzone-overlay";
|
|
1048
|
+
this.appendChild(overlayText);
|
|
1049
|
+
}
|
|
1050
|
+
};
|
|
1051
|
+
|
|
1052
|
+
dropzone.ondragleave = function(event) {
|
|
1053
|
+
event.preventDefault();
|
|
1054
|
+
this.classList.remove('dragover');
|
|
1055
|
+
console.log("ondragleave triggered");
|
|
1056
|
+
var overlayText = document.getElementById("dropzone-overlay");
|
|
1057
|
+
if (overlayText != null) {
|
|
1058
|
+
overlayText.remove();
|
|
1059
|
+
}
|
|
1060
|
+
};
|
|
1061
|
+
|
|
1062
|
+
dropzone.ondrop = function(event) {
|
|
1063
|
+
event.preventDefault();
|
|
1064
|
+
|
|
1065
|
+
var file = event.dataTransfer.files[0];
|
|
1066
|
+
uploadDataForIndexing([file]);
|
|
1067
|
+
};
|
|
1068
|
+
}
|
|
1069
|
+
|
|
1070
|
+
window.onload = loadChat;
|
|
1071
|
+
|
|
1072
|
+
function setupWebSocket(isVoice=false) {
|
|
1073
|
+
let chatBody = document.getElementById("chat-body");
|
|
1074
|
+
let wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
|
1075
|
+
let webSocketUrl = `${wsProtocol}//${window.location.host}/api/chat/ws`;
|
|
1076
|
+
|
|
1077
|
+
if (waitingForLocation) {
|
|
1078
|
+
console.debug("Waiting for location data to be fetched. Will setup WebSocket once location data is available.");
|
|
1079
|
+
return;
|
|
1080
|
+
}
|
|
1081
|
+
|
|
1082
|
+
websocketState = {
|
|
1083
|
+
newResponseTextEl: null,
|
|
1084
|
+
newResponseEl: null,
|
|
1085
|
+
loadingEllipsis: null,
|
|
1086
|
+
references: {},
|
|
1087
|
+
rawResponse: "",
|
|
1088
|
+
rawQuery: "",
|
|
1089
|
+
isVoice: isVoice,
|
|
1090
|
+
}
|
|
1091
|
+
|
|
1092
|
+
if (chatBody.dataset.conversationId) {
|
|
1093
|
+
webSocketUrl += `?conversation_id=${chatBody.dataset.conversationId}`;
|
|
1094
|
+
webSocketUrl += (!!region && !!city && !!countryName) && !!timezone ? `®ion=${region}&city=${city}&country=${countryName}&timezone=${timezone}` : '';
|
|
1095
|
+
|
|
1096
|
+
websocket = new WebSocket(webSocketUrl);
|
|
1097
|
+
websocket.onmessage = function(event) {
|
|
1098
|
+
|
|
1099
|
+
// Get the last element in the chat-body
|
|
1100
|
+
let chunk = event.data;
|
|
1101
|
+
if (chunk == "start_llm_response") {
|
|
1102
|
+
console.log("Started streaming", new Date());
|
|
1103
|
+
} else if (chunk == "end_llm_response") {
|
|
1104
|
+
console.log("Stopped streaming", new Date());
|
|
1105
|
+
|
|
1106
|
+
// Automatically respond with voice if the subscribed user has sent voice message
|
|
1107
|
+
if (websocketState.isVoice && "{{ is_active }}" == "True")
|
|
1108
|
+
textToSpeech(websocketState.rawResponse);
|
|
1109
|
+
|
|
1110
|
+
// Append any references after all the data has been streamed
|
|
1111
|
+
finalizeChatBodyResponse(websocketState.references, websocketState.newResponseTextEl);
|
|
1112
|
+
|
|
1113
|
+
const liveQuery = websocketState.rawQuery;
|
|
1114
|
+
// Reset variables
|
|
1115
|
+
websocketState = {
|
|
1116
|
+
newResponseTextEl: null,
|
|
1117
|
+
newResponseEl: null,
|
|
1118
|
+
loadingEllipsis: null,
|
|
1119
|
+
references: {},
|
|
1120
|
+
rawResponse: "",
|
|
1121
|
+
rawQuery: liveQuery,
|
|
1122
|
+
isVoice: false,
|
|
1123
|
+
}
|
|
1124
|
+
} else {
|
|
1125
|
+
try {
|
|
1126
|
+
if (chunk.includes("application/json"))
|
|
1127
|
+
{
|
|
1128
|
+
chunk = JSON.parse(chunk);
|
|
1129
|
+
}
|
|
1130
|
+
} catch (error) {
|
|
1131
|
+
// If the chunk is not a JSON object, continue.
|
|
1132
|
+
}
|
|
1133
|
+
|
|
1134
|
+
const contentType = chunk["content-type"]
|
|
1135
|
+
|
|
1136
|
+
if (contentType === "application/json") {
|
|
1137
|
+
// Handle JSON response
|
|
1138
|
+
try {
|
|
1139
|
+
if (chunk.image || chunk.detail) {
|
|
1140
|
+
({rawResponse, references } = handleImageResponse(chunk, websocketState.rawResponse));
|
|
1141
|
+
websocketState.rawResponse = rawResponse;
|
|
1142
|
+
websocketState.references = references;
|
|
1143
|
+
} else if (chunk.type == "status") {
|
|
1144
|
+
handleStreamResponse(websocketState.newResponseTextEl, chunk.message, websocketState.rawQuery, null, false);
|
|
1145
|
+
} else if (chunk.type == "rate_limit") {
|
|
1146
|
+
handleStreamResponse(websocketState.newResponseTextEl, chunk.message, websocketState.rawQuery, websocketState.loadingEllipsis, true);
|
|
1147
|
+
} else {
|
|
1148
|
+
rawResponse = chunk.response;
|
|
1149
|
+
}
|
|
1150
|
+
} catch (error) {
|
|
1151
|
+
// If the chunk is not a JSON object, just display it as is
|
|
1152
|
+
websocketState.rawResponse += chunk;
|
|
1153
|
+
} finally {
|
|
1154
|
+
if (chunk.type != "status" && chunk.type != "rate_limit") {
|
|
1155
|
+
addMessageToChatBody(websocketState.rawResponse, websocketState.newResponseTextEl, websocketState.references);
|
|
1156
|
+
}
|
|
1157
|
+
}
|
|
1158
|
+
} else {
|
|
1159
|
+
|
|
1160
|
+
// Handle streamed response of type text/event-stream or text/plain
|
|
1161
|
+
if (chunk && chunk.includes("### compiled references:")) {
|
|
1162
|
+
({ rawResponse, references } = handleCompiledReferences(websocketState.newResponseTextEl, chunk, websocketState.references, websocketState.rawResponse));
|
|
1163
|
+
websocketState.rawResponse = rawResponse;
|
|
1164
|
+
websocketState.references = references;
|
|
1165
|
+
} else {
|
|
1166
|
+
// If the chunk is not a JSON object, just display it as is
|
|
1167
|
+
websocketState.rawResponse += chunk;
|
|
1168
|
+
if (websocketState.newResponseTextEl) {
|
|
1169
|
+
handleStreamResponse(websocketState.newResponseTextEl, websocketState.rawResponse, websocketState.rawQuery, websocketState.loadingEllipsis);
|
|
1170
|
+
}
|
|
1171
|
+
}
|
|
1172
|
+
|
|
1173
|
+
// Scroll to bottom of chat window as chat response is streamed
|
|
1174
|
+
document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight;
|
|
1175
|
+
};
|
|
1176
|
+
}
|
|
1177
|
+
}
|
|
1178
|
+
};
|
|
1179
|
+
websocket.onclose = function(event) {
|
|
1180
|
+
websocket = null;
|
|
1181
|
+
console.log("WebSocket is closed now.");
|
|
1182
|
+
let setupWebSocketButton = document.createElement("button");
|
|
1183
|
+
setupWebSocketButton.textContent = "Reconnect to Server";
|
|
1184
|
+
setupWebSocketButton.onclick = setupWebSocket;
|
|
1185
|
+
let statusDotIcon = document.getElementById("connection-status-icon");
|
|
1186
|
+
statusDotIcon.style.backgroundColor = "red";
|
|
1187
|
+
let statusDotText = document.getElementById("connection-status-text");
|
|
1188
|
+
statusDotText.innerHTML = "";
|
|
1189
|
+
statusDotText.style.marginTop = "5px";
|
|
1190
|
+
statusDotText.appendChild(setupWebSocketButton);
|
|
1191
|
+
}
|
|
1192
|
+
websocket.onerror = function(event) {
|
|
1193
|
+
console.log("WebSocket error observed:", event);
|
|
1194
|
+
}
|
|
1195
|
+
|
|
1196
|
+
websocket.onopen = function(event) {
|
|
1197
|
+
console.log("WebSocket is open now.")
|
|
1198
|
+
let statusDotIcon = document.getElementById("connection-status-icon");
|
|
1199
|
+
statusDotIcon.style.backgroundColor = "green";
|
|
1200
|
+
let statusDotText = document.getElementById("connection-status-text");
|
|
1201
|
+
statusDotText.textContent = "Connected to Server";
|
|
1202
|
+
}
|
|
1203
|
+
}
|
|
1204
|
+
|
|
1205
|
+
function sendMessageViaWebSocket(isVoice=false) {
|
|
1206
|
+
let chatBody = document.getElementById("chat-body");
|
|
1207
|
+
|
|
1208
|
+
var query = document.getElementById("chat-input").value.trim();
|
|
1209
|
+
console.log(`Query: ${query}`);
|
|
1210
|
+
|
|
1211
|
+
if (userMessages.length >= 10) {
|
|
1212
|
+
userMessages.shift();
|
|
1213
|
+
}
|
|
1214
|
+
userMessages.push(query);
|
|
1215
|
+
resetUserMessageIndex();
|
|
1216
|
+
|
|
1217
|
+
// Add message by user to chat body
|
|
1218
|
+
renderMessage(query, "you");
|
|
1219
|
+
document.getElementById("chat-input").value = "";
|
|
1220
|
+
autoResize();
|
|
1221
|
+
document.getElementById("chat-input").setAttribute("disabled", "disabled");
|
|
1222
|
+
|
|
1223
|
+
let newResponseEl = document.createElement("div");
|
|
1224
|
+
newResponseEl.classList.add("chat-message", "khoj");
|
|
1225
|
+
newResponseEl.attributes["data-meta"] = "🏮 Khoj at " + formatDate(new Date());
|
|
1226
|
+
chatBody.appendChild(newResponseEl);
|
|
1227
|
+
|
|
1228
|
+
let newResponseTextEl = document.createElement("div");
|
|
1229
|
+
newResponseTextEl.classList.add("chat-message-text", "khoj");
|
|
1230
|
+
newResponseEl.appendChild(newResponseTextEl);
|
|
1231
|
+
|
|
1232
|
+
// Temporary status message to indicate that Khoj is thinking
|
|
1233
|
+
let loadingEllipsis = createLoadingEllipse();
|
|
1234
|
+
|
|
1235
|
+
newResponseTextEl.appendChild(loadingEllipsis);
|
|
1236
|
+
document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight;
|
|
1237
|
+
|
|
1238
|
+
let chatTooltip = document.getElementById("chat-tooltip");
|
|
1239
|
+
chatTooltip.style.display = "none";
|
|
1240
|
+
|
|
1241
|
+
let chatInput = document.getElementById("chat-input");
|
|
1242
|
+
chatInput.classList.remove("option-enabled");
|
|
1243
|
+
|
|
1244
|
+
// Call specified Khoj API
|
|
1245
|
+
websocket.send(query);
|
|
1246
|
+
let rawResponse = "";
|
|
1247
|
+
let references = {};
|
|
1248
|
+
|
|
1249
|
+
websocketState = {
|
|
1250
|
+
newResponseTextEl,
|
|
1251
|
+
newResponseEl,
|
|
1252
|
+
loadingEllipsis,
|
|
1253
|
+
references,
|
|
1254
|
+
rawResponse,
|
|
1255
|
+
rawQuery: query,
|
|
1256
|
+
isVoice: isVoice,
|
|
1257
|
+
}
|
|
1258
|
+
}
|
|
1259
|
+
var userMessages = [];
|
|
1260
|
+
var userMessageIndex = -1;
|
|
1261
|
+
function loadChat() {
|
|
1262
|
+
let chatBody = document.getElementById("chat-body");
|
|
1263
|
+
chatBody.innerHTML = "";
|
|
1264
|
+
chatBody.classList.add("relative-position");
|
|
1265
|
+
let chatHistoryUrl = `/api/chat/history?client=web`;
|
|
1266
|
+
if (chatBody.dataset.conversationId) {
|
|
1267
|
+
chatHistoryUrl += `&conversation_id=${chatBody.dataset.conversationId}`;
|
|
1268
|
+
setupWebSocket();
|
|
1269
|
+
loadFileFiltersFromConversation();
|
|
1270
|
+
}
|
|
1271
|
+
|
|
1272
|
+
if (window.screen.width < 700) {
|
|
1273
|
+
handleCollapseSidePanel();
|
|
1274
|
+
}
|
|
1275
|
+
|
|
1276
|
+
// Create loading screen and add it to chat-body
|
|
1277
|
+
let loadingScreen = document.createElement('div');
|
|
1278
|
+
loadingScreen.classList.add("loading-spinner");
|
|
1279
|
+
let yellowOrb = document.createElement('div');
|
|
1280
|
+
loadingScreen.appendChild(yellowOrb);
|
|
1281
|
+
chatBody.appendChild(loadingScreen);
|
|
1282
|
+
|
|
1283
|
+
// Get the most recent 10 chat messages from conversation history
|
|
1284
|
+
fetch(`${chatHistoryUrl}&n=10`, { method: "GET" })
|
|
1285
|
+
.then(response => response.json())
|
|
1286
|
+
.then(data => {
|
|
1287
|
+
if (data.detail) {
|
|
1288
|
+
// If the server returns a 500 error with detail, render a setup hint.
|
|
1289
|
+
let setupMsg = "Hi 👋🏾, to start chatting add available chat models options via <a class='inline-chat-link' href='/server/admin'>the Django Admin panel</a> on the Server";
|
|
1290
|
+
renderMessage(setupMsg, "khoj", null, null, true);
|
|
1291
|
+
|
|
1292
|
+
// Disable chat input field and update placeholder text
|
|
1293
|
+
document.getElementById("chat-input").setAttribute("disabled", "disabled");
|
|
1294
|
+
document.getElementById("chat-input").setAttribute("placeholder", "Configure Khoj to enable chat");
|
|
1295
|
+
} else if (data.status != "ok") {
|
|
1296
|
+
throw new Error(data.message);
|
|
1297
|
+
} else {
|
|
1298
|
+
// Set welcome message on load
|
|
1299
|
+
renderMessage(welcome_message, "khoj");
|
|
1300
|
+
}
|
|
1301
|
+
return data.response;
|
|
1302
|
+
})
|
|
1303
|
+
.then(response => {
|
|
1304
|
+
// Render conversation history, if any
|
|
1305
|
+
let chatBody = document.getElementById("chat-body");
|
|
1306
|
+
chatBody.dataset.conversationId = response.conversation_id;
|
|
1307
|
+
loadFileFiltersFromConversation();
|
|
1308
|
+
setupWebSocket();
|
|
1309
|
+
chatBody.dataset.conversationTitle = response.slug || `New conversation 🌱`;
|
|
1310
|
+
|
|
1311
|
+
let agentMetadata = response.agent;
|
|
1312
|
+
if (agentMetadata) {
|
|
1313
|
+
chatBody.innerHTML = "";
|
|
1314
|
+
let agentName = agentMetadata.name;
|
|
1315
|
+
let agentAvatar = agentMetadata.avatar;
|
|
1316
|
+
let agentOwnedByUser = agentMetadata.isCreator;
|
|
1317
|
+
|
|
1318
|
+
let agentAvatarElement = document.getElementById("agent-avatar");
|
|
1319
|
+
let agentNameElement = document.getElementById("agent-name");
|
|
1320
|
+
|
|
1321
|
+
let agentLinkElement = document.getElementById("agent-link");
|
|
1322
|
+
|
|
1323
|
+
agentAvatarElement.src = agentAvatar;
|
|
1324
|
+
agentNameElement.textContent = agentName;
|
|
1325
|
+
agentLinkElement.setAttribute("href", `/agent/${agentMetadata.slug}`);
|
|
1326
|
+
renderMessage(`Hello! I'm [${agentName}](/agent/${agentMetadata.slug}). I can:
|
|
1327
|
+
- 🧠 Answer general knowledge questions
|
|
1328
|
+
- 🔎 Get real-time answers from the internet
|
|
1329
|
+
- 📜 Find relevant info in your notes & documents
|
|
1330
|
+
- 💡 Be a sounding board for your ideas
|
|
1331
|
+
- 🌄 Generate images based on your context
|
|
1332
|
+
- 🎙️ Hear you talk (use the mic by the input box to say your message out loud)
|
|
1333
|
+
- 📚 Understand files you drag & drop here
|
|
1334
|
+
- 👩🏾🚀 Be tuned to your conversation needs via [agents](./agents)
|
|
1335
|
+
|
|
1336
|
+
Get the Khoj [Desktop](https://khoj.dev/downloads), [Obsidian](https://docs.khoj.dev/clients/obsidian#setup), or [Emacs](https://docs.khoj.dev/clients/emacs#setup) app to keep your files in sync. You can manage all the files you've shared with me at any time by going to [your settings](/config/content-source/computer/).
|
|
1337
|
+
|
|
1338
|
+
To get started, just start typing below. You can also type / to see a list of commands.
|
|
1339
|
+
|
|
1340
|
+
**What's on your mind today?**
|
|
1341
|
+
`, "khoj")
|
|
1342
|
+
|
|
1343
|
+
if (agentOwnedByUser) {
|
|
1344
|
+
let agentOwnedByUserElement = document.getElementById("agent-owned-by-user");
|
|
1345
|
+
agentOwnedByUserElement.style.display = "block";
|
|
1346
|
+
}
|
|
1347
|
+
|
|
1348
|
+
let agentMetadataElement = document.getElementById("agent-metadata");
|
|
1349
|
+
agentMetadataElement.style.display = "block";
|
|
1350
|
+
} else {
|
|
1351
|
+
let agentMetadataElement = document.getElementById("agent-metadata");
|
|
1352
|
+
agentMetadataElement.style.display = "none";
|
|
1353
|
+
}
|
|
1354
|
+
|
|
1355
|
+
// Create a new IntersectionObserver
|
|
1356
|
+
let fetchRemainingMessagesObserver = new IntersectionObserver((entries, observer) => {
|
|
1357
|
+
entries.forEach(entry => {
|
|
1358
|
+
// If the element is in the viewport, fetch the remaining message and unobserve the element
|
|
1359
|
+
if (entry.isIntersecting) {
|
|
1360
|
+
fetchRemainingChatMessages(chatHistoryUrl);
|
|
1361
|
+
observer.unobserve(entry.target);
|
|
1362
|
+
}
|
|
1363
|
+
});
|
|
1364
|
+
}, {rootMargin: '0px 0px 0px 0px'});
|
|
1365
|
+
|
|
1366
|
+
const fullChatLog = response.chat || [];
|
|
1367
|
+
userMessages = [];
|
|
1368
|
+
userMessageIndex = 0;
|
|
1369
|
+
fullChatLog.forEach((chat_log, index) => {
|
|
1370
|
+
// Render the last 10 messages immediately
|
|
1371
|
+
// also cache user messages into array for shortcut access
|
|
1372
|
+
if (chat_log.message != null) {
|
|
1373
|
+
if(chat_log.by !== "khoj") {
|
|
1374
|
+
userMessages.push(chat_log.message);
|
|
1375
|
+
}
|
|
1376
|
+
let messageElement = renderMessageWithReference(
|
|
1377
|
+
chat_log.message,
|
|
1378
|
+
chat_log.by,
|
|
1379
|
+
chat_log.context,
|
|
1380
|
+
new Date(chat_log.created + "Z"),
|
|
1381
|
+
chat_log.onlineContext,
|
|
1382
|
+
chat_log.intent?.type,
|
|
1383
|
+
chat_log.intent?.["inferred-queries"],
|
|
1384
|
+
chat_log.intent?.query);
|
|
1385
|
+
chatBody.appendChild(messageElement);
|
|
1386
|
+
|
|
1387
|
+
// When the 4th oldest message is within viewing distance (~60% scroll up)
|
|
1388
|
+
// Fetch the remaining chat messages
|
|
1389
|
+
if (index === 4) {
|
|
1390
|
+
fetchRemainingMessagesObserver.observe(messageElement);
|
|
1391
|
+
}
|
|
1392
|
+
}
|
|
1393
|
+
loadingScreen.style.height = chatBody.scrollHeight + 'px';
|
|
1394
|
+
});
|
|
1395
|
+
userMessageIndex = userMessages.length;
|
|
1396
|
+
|
|
1397
|
+
// Scroll to bottom of chat-body element
|
|
1398
|
+
chatBody.scrollTop = chatBody.scrollHeight;
|
|
1399
|
+
|
|
1400
|
+
// Set height of chat-body element to the height of the chat-body-wrapper
|
|
1401
|
+
let chatBodyWrapper = document.getElementById("chat-body-wrapper");
|
|
1402
|
+
let chatBodyWrapperHeight = chatBodyWrapper.clientHeight;
|
|
1403
|
+
chatBody.style.height = chatBodyWrapperHeight;
|
|
1404
|
+
|
|
1405
|
+
// Add fade out animation to loading screen and remove it after the animation ends
|
|
1406
|
+
setTimeout(() => {
|
|
1407
|
+
loadingScreen.remove();
|
|
1408
|
+
chatBody.classList.remove("relative-position");
|
|
1409
|
+
setupDropZone();
|
|
1410
|
+
}, 500);
|
|
1411
|
+
|
|
1412
|
+
})
|
|
1413
|
+
.catch(err => {
|
|
1414
|
+
console.log(err);
|
|
1415
|
+
return;
|
|
1416
|
+
});
|
|
1417
|
+
|
|
1418
|
+
refreshChatSessionsPanel();
|
|
1419
|
+
|
|
1420
|
+
fetch('/api/chat/options')
|
|
1421
|
+
.then(response => response.json())
|
|
1422
|
+
.then(data => {
|
|
1423
|
+
// Render chat options, if any
|
|
1424
|
+
if (data) {
|
|
1425
|
+
chatOptions = data;
|
|
1426
|
+
}
|
|
1427
|
+
})
|
|
1428
|
+
.catch(err => {
|
|
1429
|
+
return;
|
|
1430
|
+
});
|
|
1431
|
+
|
|
1432
|
+
fetch('/api/chat/starters')
|
|
1433
|
+
.then(response => response.json())
|
|
1434
|
+
.then(data => {
|
|
1435
|
+
// Render chat options, if any
|
|
1436
|
+
if (data.length > 0) {
|
|
1437
|
+
let questionStarterSuggestions = document.getElementById("question-starters");
|
|
1438
|
+
questionStarterSuggestions.innerHTML = "";
|
|
1439
|
+
data.forEach((questionStarter) => {
|
|
1440
|
+
let questionStarterButton = document.createElement('button');
|
|
1441
|
+
questionStarterButton.textContent = questionStarter;
|
|
1442
|
+
questionStarterButton.classList.add("question-starter");
|
|
1443
|
+
questionStarterButton.addEventListener('click', function() {
|
|
1444
|
+
questionStarterSuggestions.style.display = "none";
|
|
1445
|
+
document.getElementById("chat-input").value = questionStarter;
|
|
1446
|
+
chat();
|
|
1447
|
+
});
|
|
1448
|
+
questionStarterSuggestions.appendChild(questionStarterButton);
|
|
1449
|
+
});
|
|
1450
|
+
questionStarterSuggestions.style.display = "grid";
|
|
1451
|
+
}
|
|
1452
|
+
})
|
|
1453
|
+
.catch(err => {
|
|
1454
|
+
return;
|
|
1455
|
+
});
|
|
1456
|
+
|
|
1457
|
+
// Fill query field with value passed in URL query parameters, if any.
|
|
1458
|
+
var query_via_url = new URLSearchParams(window.location.search).get("q");
|
|
1459
|
+
if (query_via_url) {
|
|
1460
|
+
document.getElementById("chat-input").value = query_via_url;
|
|
1461
|
+
chat();
|
|
1462
|
+
}
|
|
1463
|
+
}
|
|
1464
|
+
|
|
1465
|
+
function fetchRemainingChatMessages(chatHistoryUrl) {
|
|
1466
|
+
// Create a new IntersectionObserver
|
|
1467
|
+
let observer = new IntersectionObserver((entries, observer) => {
|
|
1468
|
+
entries.forEach(entry => {
|
|
1469
|
+
// If the element is in the viewport, render the message and unobserve the element
|
|
1470
|
+
if (entry.isIntersecting) {
|
|
1471
|
+
let chat_log = entry.target.chat_log;
|
|
1472
|
+
let messageElement = renderMessageWithReference(
|
|
1473
|
+
chat_log.message,
|
|
1474
|
+
chat_log.by,
|
|
1475
|
+
chat_log.context,
|
|
1476
|
+
new Date(chat_log.created + "Z"),
|
|
1477
|
+
chat_log.onlineContext,
|
|
1478
|
+
chat_log.intent?.type,
|
|
1479
|
+
chat_log.intent?.["inferred-queries"],
|
|
1480
|
+
chat_log.intent?.query
|
|
1481
|
+
);
|
|
1482
|
+
entry.target.replaceWith(messageElement);
|
|
1483
|
+
|
|
1484
|
+
// Remove the observer after the element has been rendered
|
|
1485
|
+
observer.unobserve(entry.target);
|
|
1486
|
+
}
|
|
1487
|
+
});
|
|
1488
|
+
}, {rootMargin: '0px 0px 200px 0px'}); // Trigger when the element is within 200px of the viewport
|
|
1489
|
+
|
|
1490
|
+
// Fetch remaining chat messages from conversation history
|
|
1491
|
+
fetch(`${chatHistoryUrl}&n=-10`, { method: "GET" })
|
|
1492
|
+
.then(response => response.json())
|
|
1493
|
+
.then(data => {
|
|
1494
|
+
if (data.status != "ok") {
|
|
1495
|
+
throw new Error(data.message);
|
|
1496
|
+
}
|
|
1497
|
+
return data.response;
|
|
1498
|
+
})
|
|
1499
|
+
.then(response => {
|
|
1500
|
+
const fullChatLog = response.chat || [];
|
|
1501
|
+
let chatBody = document.getElementById("chat-body");
|
|
1502
|
+
fullChatLog
|
|
1503
|
+
.reverse()
|
|
1504
|
+
.forEach(chat_log => {
|
|
1505
|
+
if (chat_log.message != null) {
|
|
1506
|
+
// Create a new element for each chat log
|
|
1507
|
+
let placeholder = document.createElement('div');
|
|
1508
|
+
placeholder.chat_log = chat_log;
|
|
1509
|
+
|
|
1510
|
+
// Insert the message placeholder as the first child of chat body after the welcome message
|
|
1511
|
+
chatBody.insertBefore(placeholder, chatBody.firstChild.nextSibling);
|
|
1512
|
+
|
|
1513
|
+
// Observe the element
|
|
1514
|
+
placeholder.style.height = "20px";
|
|
1515
|
+
observer.observe(placeholder);
|
|
1516
|
+
}
|
|
1517
|
+
});
|
|
1518
|
+
})
|
|
1519
|
+
.catch(err => {
|
|
1520
|
+
console.log(err);
|
|
1521
|
+
return;
|
|
1522
|
+
});
|
|
1523
|
+
}
|
|
1524
|
+
|
|
1525
|
+
function flashStatusInChatInput(message) {
|
|
1526
|
+
// Get chat input element and original placeholder
|
|
1527
|
+
let chatInput = document.getElementById("chat-input");
|
|
1528
|
+
let originalPlaceholder = chatInput.placeholder;
|
|
1529
|
+
// Set placeholder to message
|
|
1530
|
+
chatInput.placeholder = message;
|
|
1531
|
+
// Reset placeholder after 2 seconds
|
|
1532
|
+
setTimeout(() => {
|
|
1533
|
+
chatInput.placeholder = originalPlaceholder;
|
|
1534
|
+
}, 2000);
|
|
1535
|
+
}
|
|
1536
|
+
|
|
1537
|
+
function createNewConversation() {
|
|
1538
|
+
// Create a modal that appears in the middle of the entire screen. It should have a form to create a new conversation.
|
|
1539
|
+
let modal = document.createElement('div');
|
|
1540
|
+
modal.classList.add("modal");
|
|
1541
|
+
modal.id = "new-conversation-modal";
|
|
1542
|
+
let modalContent = document.createElement('div');
|
|
1543
|
+
modalContent.classList.add("modal-content");
|
|
1544
|
+
let modalHeader = document.createElement('div');
|
|
1545
|
+
modalHeader.classList.add("modal-header");
|
|
1546
|
+
let modalTitle = document.createElement('h2');
|
|
1547
|
+
modalTitle.textContent = "New Conversation";
|
|
1548
|
+
let modalCloseButton = document.createElement('button');
|
|
1549
|
+
modalCloseButton.classList.add("modal-close-button");
|
|
1550
|
+
modalCloseButton.innerHTML = "×";
|
|
1551
|
+
modalCloseButton.addEventListener('click', function() {
|
|
1552
|
+
modal.remove();
|
|
1553
|
+
});
|
|
1554
|
+
modalHeader.appendChild(modalTitle);
|
|
1555
|
+
modalHeader.appendChild(modalCloseButton);
|
|
1556
|
+
modalContent.appendChild(modalHeader);
|
|
1557
|
+
let modalBody = document.createElement('div');
|
|
1558
|
+
modalBody.classList.add("modal-body");
|
|
1559
|
+
|
|
1560
|
+
let agentDropDownPicker = document.createElement('select');
|
|
1561
|
+
agentDropDownPicker.setAttribute("id", "agent-dropdown-picker");
|
|
1562
|
+
agentDropDownPicker.setAttribute("name", "agent-dropdown-picker");
|
|
1563
|
+
|
|
1564
|
+
let agentDropDownLabel = document.createElement('label');
|
|
1565
|
+
agentDropDownLabel.setAttribute("for", "agent-dropdown-picker");
|
|
1566
|
+
agentDropDownLabel.textContent = "Who do you want to talk to?";
|
|
1567
|
+
|
|
1568
|
+
fetch('/api/agents')
|
|
1569
|
+
.then(response => response.json())
|
|
1570
|
+
.then(data => {
|
|
1571
|
+
if (data.length > 0) {
|
|
1572
|
+
data.forEach((agent) => {
|
|
1573
|
+
let agentOption = document.createElement('option');
|
|
1574
|
+
agentOption.setAttribute("value", agent.slug);
|
|
1575
|
+
agentOption.textContent = agent.name;
|
|
1576
|
+
agentDropDownPicker.appendChild(agentOption);
|
|
1577
|
+
});
|
|
1578
|
+
}
|
|
1579
|
+
})
|
|
1580
|
+
.catch(err => {
|
|
1581
|
+
return;
|
|
1582
|
+
});
|
|
1583
|
+
|
|
1584
|
+
let seeAllAgentsLink = document.createElement('a');
|
|
1585
|
+
seeAllAgentsLink.setAttribute("href", "/agents");
|
|
1586
|
+
seeAllAgentsLink.setAttribute("target", "_blank");
|
|
1587
|
+
seeAllAgentsLink.textContent = "See all agents";
|
|
1588
|
+
|
|
1589
|
+
let newConversationSubmitButton = document.createElement('button');
|
|
1590
|
+
newConversationSubmitButton.setAttribute("type", "submit");
|
|
1591
|
+
newConversationSubmitButton.textContent = "Go";
|
|
1592
|
+
newConversationSubmitButton.id = "new-conversation-submit-button";
|
|
1593
|
+
|
|
1594
|
+
newConversationSubmitButton.addEventListener('click', function(event) {
|
|
1595
|
+
event.preventDefault();
|
|
1596
|
+
let agentSlug = agentDropDownPicker.value;
|
|
1597
|
+
let createURL = `/api/chat/sessions?client=web&agent_slug=${agentSlug}`;
|
|
1598
|
+
let chatBody = document.getElementById("chat-body");
|
|
1599
|
+
fetch(createURL, { method: "POST" })
|
|
1600
|
+
.then(response => response.json())
|
|
1601
|
+
.then(data => {
|
|
1602
|
+
chatBody.dataset.conversationId = data.conversation_id;
|
|
1603
|
+
modal.remove();
|
|
1604
|
+
loadChat();
|
|
1605
|
+
})
|
|
1606
|
+
.catch(err => {
|
|
1607
|
+
return;
|
|
1608
|
+
});
|
|
1609
|
+
});
|
|
1610
|
+
|
|
1611
|
+
let closeButton = document.createElement('button');
|
|
1612
|
+
closeButton.id = "close-button";
|
|
1613
|
+
closeButton.textContent = "Close";
|
|
1614
|
+
closeButton.classList.add("close-button");
|
|
1615
|
+
closeButton.addEventListener('click', function() {
|
|
1616
|
+
modal.remove();
|
|
1617
|
+
});
|
|
1618
|
+
|
|
1619
|
+
modalBody.appendChild(agentDropDownLabel);
|
|
1620
|
+
modalBody.appendChild(agentDropDownPicker);
|
|
1621
|
+
modalBody.appendChild(seeAllAgentsLink);
|
|
1622
|
+
|
|
1623
|
+
let modalFooter = document.createElement('div');
|
|
1624
|
+
modalFooter.classList.add("modal-footer");
|
|
1625
|
+
modalFooter.appendChild(closeButton);
|
|
1626
|
+
modalFooter.appendChild(newConversationSubmitButton);
|
|
1627
|
+
modalBody.appendChild(modalFooter);
|
|
1628
|
+
|
|
1629
|
+
modalContent.appendChild(modalBody);
|
|
1630
|
+
modal.appendChild(modalContent);
|
|
1631
|
+
document.body.appendChild(modal);
|
|
1632
|
+
}
|
|
1633
|
+
|
|
1634
|
+
function refreshChatSessionsPanel() {
|
|
1635
|
+
fetch('/api/chat/sessions', { method: "GET" })
|
|
1636
|
+
.then(response => response.json())
|
|
1637
|
+
.then(data => {
|
|
1638
|
+
let conversationListBody = document.getElementById("conversation-list-body");
|
|
1639
|
+
conversationListBody.innerHTML = "";
|
|
1640
|
+
let conversationListBodyHeader = document.getElementById("conversation-list-header");
|
|
1641
|
+
|
|
1642
|
+
let chatBody = document.getElementById("chat-body");
|
|
1643
|
+
conversationId = chatBody.dataset.conversationId;
|
|
1644
|
+
|
|
1645
|
+
if (data.length > 0) {
|
|
1646
|
+
conversationListBodyHeader.style.display = "inline-flex";
|
|
1647
|
+
for (let index in data) {
|
|
1648
|
+
let conversation = data[index];
|
|
1649
|
+
let conversationButton = document.createElement('div');
|
|
1650
|
+
let incomingConversationId = conversation["conversation_id"];
|
|
1651
|
+
const conversationTitle = conversation["slug"] || `New conversation 🌱`;
|
|
1652
|
+
conversationButton.textContent = conversationTitle;
|
|
1653
|
+
conversationButton.classList.add("conversation-button");
|
|
1654
|
+
if (incomingConversationId == conversationId) {
|
|
1655
|
+
conversationButton.classList.add("selected-conversation");
|
|
1656
|
+
}
|
|
1657
|
+
conversationButton.addEventListener('click', function() {
|
|
1658
|
+
let chatBody = document.getElementById("chat-body");
|
|
1659
|
+
chatBody.innerHTML = "";
|
|
1660
|
+
chatBody.dataset.conversationId = incomingConversationId;
|
|
1661
|
+
chatBody.dataset.conversationTitle = conversationTitle;
|
|
1662
|
+
loadChat();
|
|
1663
|
+
});
|
|
1664
|
+
let threeDotMenu = document.createElement('div');
|
|
1665
|
+
threeDotMenu.classList.add("three-dot-menu");
|
|
1666
|
+
let threeDotMenuButton = document.createElement('button');
|
|
1667
|
+
threeDotMenuButton.textContent = "⋮";
|
|
1668
|
+
threeDotMenuButton.classList.add("three-dot-menu-button");
|
|
1669
|
+
threeDotMenuButton.addEventListener('click', function(event) {
|
|
1670
|
+
event.stopPropagation();
|
|
1671
|
+
|
|
1672
|
+
let existingChildren = threeDotMenu.children;
|
|
1673
|
+
|
|
1674
|
+
if (existingChildren.length > 1) {
|
|
1675
|
+
// Skip deleting the first, since that's the menu button.
|
|
1676
|
+
for (let i = 1; i < existingChildren.length; i++) {
|
|
1677
|
+
existingChildren[i].remove();
|
|
1678
|
+
}
|
|
1679
|
+
return;
|
|
1680
|
+
}
|
|
1681
|
+
|
|
1682
|
+
let conversationMenu = document.createElement('div');
|
|
1683
|
+
conversationMenu.classList.add("conversation-menu");
|
|
1684
|
+
|
|
1685
|
+
let editTitleButton = document.createElement('button');
|
|
1686
|
+
editTitleButton.textContent = "Rename";
|
|
1687
|
+
editTitleButton.classList.add("edit-title-button");
|
|
1688
|
+
editTitleButton.classList.add("three-dot-menu-button-item");
|
|
1689
|
+
editTitleButton.addEventListener('click', function(event) {
|
|
1690
|
+
event.stopPropagation();
|
|
1691
|
+
|
|
1692
|
+
let conversationMenuChildren = conversationMenu.children;
|
|
1693
|
+
|
|
1694
|
+
let totalItems = conversationMenuChildren.length;
|
|
1695
|
+
|
|
1696
|
+
for (let i = totalItems - 1; i >= 0; i--) {
|
|
1697
|
+
conversationMenuChildren[i].remove();
|
|
1698
|
+
}
|
|
1699
|
+
|
|
1700
|
+
// Create a dialog box to get new title for conversation
|
|
1701
|
+
let conversationTitleInputBox = document.createElement('div');
|
|
1702
|
+
conversationTitleInputBox.classList.add("conversation-title-input-box");
|
|
1703
|
+
let conversationTitleInput = document.createElement('input');
|
|
1704
|
+
conversationTitleInput.classList.add("conversation-title-input");
|
|
1705
|
+
|
|
1706
|
+
conversationTitleInput.value = conversationTitle;
|
|
1707
|
+
|
|
1708
|
+
conversationTitleInput.addEventListener('click', function(event) {
|
|
1709
|
+
event.stopPropagation();
|
|
1710
|
+
});
|
|
1711
|
+
conversationTitleInput.addEventListener('keydown', function(event) {
|
|
1712
|
+
if (event.key === "Enter") {
|
|
1713
|
+
event.preventDefault();
|
|
1714
|
+
conversationTitleInputButton.click();
|
|
1715
|
+
}
|
|
1716
|
+
});
|
|
1717
|
+
|
|
1718
|
+
conversationTitleInputBox.appendChild(conversationTitleInput);
|
|
1719
|
+
let conversationTitleInputButton = document.createElement('button');
|
|
1720
|
+
conversationTitleInputButton.textContent = "Save";
|
|
1721
|
+
conversationTitleInputButton.classList.add("three-dot-menu-button-item");
|
|
1722
|
+
conversationTitleInputButton.addEventListener('click', function(event) {
|
|
1723
|
+
event.stopPropagation();
|
|
1724
|
+
let newTitle = conversationTitleInput.value;
|
|
1725
|
+
if (newTitle != null) {
|
|
1726
|
+
let editURL = `/api/chat/title?client=web&conversation_id=${incomingConversationId}&title=${newTitle}`;
|
|
1727
|
+
fetch(editURL , { method: "PATCH" })
|
|
1728
|
+
.then(response => response.ok ? response.json() : Promise.reject(response))
|
|
1729
|
+
.then(data => {
|
|
1730
|
+
conversationButton.textContent = newTitle;
|
|
1731
|
+
})
|
|
1732
|
+
.catch(err => {
|
|
1733
|
+
return;
|
|
1734
|
+
});
|
|
1735
|
+
conversationTitleInputBox.remove();
|
|
1736
|
+
}});
|
|
1737
|
+
conversationTitleInputBox.appendChild(conversationTitleInputButton);
|
|
1738
|
+
conversationMenu.appendChild(conversationTitleInputBox);
|
|
1739
|
+
});
|
|
1740
|
+
conversationMenu.appendChild(editTitleButton);
|
|
1741
|
+
threeDotMenu.appendChild(conversationMenu);
|
|
1742
|
+
|
|
1743
|
+
let shareButton = document.createElement('button');
|
|
1744
|
+
shareButton.textContent = "Share";
|
|
1745
|
+
shareButton.type = "button";
|
|
1746
|
+
shareButton.classList.add("share-conversation-button");
|
|
1747
|
+
shareButton.classList.add("three-dot-menu-button-item");
|
|
1748
|
+
shareButton.addEventListener('click', function(event) {
|
|
1749
|
+
event.preventDefault();
|
|
1750
|
+
let confirmation = confirm('Are you sure you want to share this chat session? This will make the conversation public.');
|
|
1751
|
+
if (!confirmation) return;
|
|
1752
|
+
let duplicateURL = `/api/chat/share?client=web&conversation_id=${incomingConversationId}`;
|
|
1753
|
+
fetch(duplicateURL , { method: "POST" })
|
|
1754
|
+
.then(response => response.ok ? response.json() : Promise.reject(response))
|
|
1755
|
+
.then(data => {
|
|
1756
|
+
if (data.status == "ok") {
|
|
1757
|
+
flashStatusInChatInput("✅ Conversation shared successfully");
|
|
1758
|
+
}
|
|
1759
|
+
// Make a pop-up that shows data.url to share the conversation
|
|
1760
|
+
let shareURL = data.url;
|
|
1761
|
+
let shareModal = document.createElement('div');
|
|
1762
|
+
shareModal.classList.add("modal");
|
|
1763
|
+
shareModal.id = "share-conversation-modal";
|
|
1764
|
+
let shareModalContent = document.createElement('div');
|
|
1765
|
+
shareModalContent.classList.add("modal-content");
|
|
1766
|
+
let shareModalHeader = document.createElement('div');
|
|
1767
|
+
shareModalHeader.classList.add("modal-header");
|
|
1768
|
+
let shareModalTitle = document.createElement('h2');
|
|
1769
|
+
shareModalTitle.textContent = "Share Conversation";
|
|
1770
|
+
let shareModalCloseButton = document.createElement('button');
|
|
1771
|
+
shareModalCloseButton.classList.add("modal-close-button");
|
|
1772
|
+
shareModalCloseButton.innerHTML = "×";
|
|
1773
|
+
shareModalCloseButton.addEventListener('click', function() {
|
|
1774
|
+
shareModal.remove();
|
|
1775
|
+
});
|
|
1776
|
+
shareModalHeader.appendChild(shareModalTitle);
|
|
1777
|
+
shareModalHeader.appendChild(shareModalCloseButton);
|
|
1778
|
+
shareModalContent.appendChild(shareModalHeader);
|
|
1779
|
+
let shareModalBody = document.createElement('div');
|
|
1780
|
+
shareModalBody.classList.add("modal-body");
|
|
1781
|
+
let shareModalText = document.createElement('p');
|
|
1782
|
+
shareModalText.textContent = "The link has been copied to your clipboard. Use it to share your conversation with others!";
|
|
1783
|
+
let shareModalLink = document.createElement('input');
|
|
1784
|
+
shareModalLink.setAttribute("value", shareURL);
|
|
1785
|
+
shareModalLink.setAttribute("readonly", "");
|
|
1786
|
+
shareModalLink.classList.add("share-link");
|
|
1787
|
+
let copyButton = document.createElement('button');
|
|
1788
|
+
copyButton.textContent = "Copy";
|
|
1789
|
+
copyButton.addEventListener('click', function() {
|
|
1790
|
+
shareModalLink.select();
|
|
1791
|
+
document.execCommand('copy');
|
|
1792
|
+
});
|
|
1793
|
+
copyButton.id = "copy-share-url-button";
|
|
1794
|
+
shareModalBody.appendChild(shareModalText);
|
|
1795
|
+
shareModalBody.appendChild(shareModalLink);
|
|
1796
|
+
shareModalBody.appendChild(copyButton);
|
|
1797
|
+
shareModalContent.appendChild(shareModalBody);
|
|
1798
|
+
shareModal.appendChild(shareModalContent);
|
|
1799
|
+
document.body.appendChild(shareModal);
|
|
1800
|
+
shareModalLink.select();
|
|
1801
|
+
document.execCommand('copy');
|
|
1802
|
+
})
|
|
1803
|
+
.catch(err => {
|
|
1804
|
+
return;
|
|
1805
|
+
});
|
|
1806
|
+
});
|
|
1807
|
+
conversationMenu.appendChild(shareButton);
|
|
1808
|
+
|
|
1809
|
+
let deleteButton = document.createElement('button');
|
|
1810
|
+
deleteButton.type = "button";
|
|
1811
|
+
deleteButton.textContent = "Delete";
|
|
1812
|
+
deleteButton.classList.add("delete-conversation-button");
|
|
1813
|
+
deleteButton.classList.add("three-dot-menu-button-item");
|
|
1814
|
+
deleteButton.addEventListener('click', function(event) {
|
|
1815
|
+
event.preventDefault();
|
|
1816
|
+
// Ask for confirmation before deleting chat session
|
|
1817
|
+
let confirmation = confirm('Are you sure you want to delete this chat session?');
|
|
1818
|
+
if (!confirmation) return;
|
|
1819
|
+
let deleteURL = `/api/chat/history?client=web&conversation_id=${incomingConversationId}`;
|
|
1820
|
+
fetch(deleteURL , { method: "DELETE" })
|
|
1821
|
+
.then(response => response.ok ? response.json() : Promise.reject(response))
|
|
1822
|
+
.then(data => {
|
|
1823
|
+
let chatBody = document.getElementById("chat-body");
|
|
1824
|
+
chatBody.innerHTML = "";
|
|
1825
|
+
chatBody.dataset.conversationId = "";
|
|
1826
|
+
chatBody.dataset.conversationTitle = "";
|
|
1827
|
+
loadChat();
|
|
1828
|
+
})
|
|
1829
|
+
.catch(err => {
|
|
1830
|
+
flashStatusInChatInput("⛔️ Failed to clear conversation history");
|
|
1831
|
+
});
|
|
1832
|
+
});
|
|
1833
|
+
conversationMenu.appendChild(deleteButton);
|
|
1834
|
+
threeDotMenu.appendChild(conversationMenu);
|
|
1835
|
+
});
|
|
1836
|
+
threeDotMenu.appendChild(threeDotMenuButton);
|
|
1837
|
+
conversationButton.appendChild(threeDotMenu);
|
|
1838
|
+
conversationListBody.appendChild(conversationButton);
|
|
1839
|
+
}
|
|
1840
|
+
}
|
|
1841
|
+
})
|
|
1842
|
+
.catch(err => {
|
|
1843
|
+
console.log(err);
|
|
1844
|
+
return;
|
|
1845
|
+
});
|
|
1846
|
+
}
|
|
1847
|
+
|
|
1848
|
+
let sendMessageTimeout;
|
|
1849
|
+
let mediaRecorder;
|
|
1850
|
+
function speechToText(event) {
|
|
1851
|
+
event.preventDefault();
|
|
1852
|
+
const speakButtonImg = document.getElementById('speak-button-img');
|
|
1853
|
+
const stopRecordButtonImg = document.getElementById('stop-record-button-img');
|
|
1854
|
+
const sendButtonImg = document.getElementById('send-button-img');
|
|
1855
|
+
const stopSendButtonImg = document.getElementById('stop-send-button-img');
|
|
1856
|
+
const chatInput = document.getElementById('chat-input');
|
|
1857
|
+
|
|
1858
|
+
const sendToServer = (audioBlob) => {
|
|
1859
|
+
const formData = new FormData();
|
|
1860
|
+
formData.append('file', audioBlob);
|
|
1861
|
+
|
|
1862
|
+
fetch('/api/transcribe?client=web', { method: 'POST', body: formData })
|
|
1863
|
+
.then(response => response.ok ? response.json() : Promise.reject(response))
|
|
1864
|
+
.then(data => { chatInput.value += data.text.trimStart(); autoResize(); })
|
|
1865
|
+
.then(() => {
|
|
1866
|
+
// Don't auto-send empty messages
|
|
1867
|
+
if (chatInput.value.length === 0) return;
|
|
1868
|
+
|
|
1869
|
+
// Send message after 3 seconds, unless stop send button is clicked
|
|
1870
|
+
sendButtonImg.style.display = 'none';
|
|
1871
|
+
stopSendButtonImg.style.display = 'initial';
|
|
1872
|
+
|
|
1873
|
+
// Start the countdown timer UI
|
|
1874
|
+
document.getElementById('countdown-circle').style.animation = "countdown 3s linear 1 forwards";
|
|
1875
|
+
|
|
1876
|
+
sendMessageTimeout = setTimeout(() => {
|
|
1877
|
+
// Revert to showing send-button and hide the stop-send-button
|
|
1878
|
+
sendButtonImg.style.display = 'initial';
|
|
1879
|
+
stopSendButtonImg.style.display = 'none';
|
|
1880
|
+
|
|
1881
|
+
// Stop the countdown timer UI
|
|
1882
|
+
document.getElementById('countdown-circle').style.animation = "none";
|
|
1883
|
+
|
|
1884
|
+
// Send message
|
|
1885
|
+
chat(true);
|
|
1886
|
+
}, 3000);
|
|
1887
|
+
})
|
|
1888
|
+
.catch(err => {
|
|
1889
|
+
if (err.status === 501) {
|
|
1890
|
+
flashStatusInChatInput("⛔️ Configure speech-to-text model on server.")
|
|
1891
|
+
} else if (err.status === 422) {
|
|
1892
|
+
flashStatusInChatInput("⛔️ Audio file to large to process.")
|
|
1893
|
+
} else if (err.status === 429) {
|
|
1894
|
+
flashStatusInChatInput("⛔️ " + err.statusText);
|
|
1895
|
+
} else {
|
|
1896
|
+
flashStatusInChatInput("⛔️ Failed to transcribe audio.")
|
|
1897
|
+
}
|
|
1898
|
+
});
|
|
1899
|
+
};
|
|
1900
|
+
|
|
1901
|
+
const handleRecording = (stream) => {
|
|
1902
|
+
const audioChunks = [];
|
|
1903
|
+
const recordingConfig = { mimeType: 'audio/webm' };
|
|
1904
|
+
mediaRecorder = new MediaRecorder(stream, recordingConfig);
|
|
1905
|
+
|
|
1906
|
+
mediaRecorder.addEventListener("dataavailable", function(event) {
|
|
1907
|
+
if (event.data.size > 0) audioChunks.push(event.data);
|
|
1908
|
+
});
|
|
1909
|
+
|
|
1910
|
+
mediaRecorder.addEventListener("stop", function() {
|
|
1911
|
+
const audioBlob = new Blob(audioChunks, { type: 'audio/webm' });
|
|
1912
|
+
sendToServer(audioBlob);
|
|
1913
|
+
});
|
|
1914
|
+
|
|
1915
|
+
mediaRecorder.start();
|
|
1916
|
+
speakButtonImg.style.display = 'none';
|
|
1917
|
+
stopRecordButtonImg.style.display = 'initial';
|
|
1918
|
+
};
|
|
1919
|
+
|
|
1920
|
+
// Toggle recording
|
|
1921
|
+
if (!mediaRecorder || mediaRecorder.state === 'inactive' || event.type === 'touchstart') {
|
|
1922
|
+
navigator.mediaDevices
|
|
1923
|
+
?.getUserMedia({ audio: true })
|
|
1924
|
+
.then(handleRecording)
|
|
1925
|
+
.catch((e) => {
|
|
1926
|
+
flashStatusInChatInput("⛔️ Failed to access microphone");
|
|
1927
|
+
});
|
|
1928
|
+
} else if (mediaRecorder.state === 'recording' || event.type === 'touchend' || event.type === 'touchcancel') {
|
|
1929
|
+
mediaRecorder.stop();
|
|
1930
|
+
mediaRecorder.stream.getTracks().forEach(track => track.stop());
|
|
1931
|
+
mediaRecorder = null;
|
|
1932
|
+
speakButtonImg.style.display = 'initial';
|
|
1933
|
+
stopRecordButtonImg.style.display = 'none';
|
|
1934
|
+
}
|
|
1935
|
+
}
|
|
1936
|
+
|
|
1937
|
+
function cancelSendMessage() {
|
|
1938
|
+
// Cancel the chat() call if the stop-send-button is clicked
|
|
1939
|
+
clearTimeout(sendMessageTimeout);
|
|
1940
|
+
|
|
1941
|
+
// Revert to showing send-button and hide the stop-send-button
|
|
1942
|
+
document.getElementById('stop-send-button-img').style.display = 'none';
|
|
1943
|
+
document.getElementById('send-button-img').style.display = 'initial';
|
|
1944
|
+
|
|
1945
|
+
// Stop the countdown timer UI
|
|
1946
|
+
document.getElementById('countdown-circle').style.animation = "none";
|
|
1947
|
+
};
|
|
1948
|
+
|
|
1949
|
+
function handleCollapseSidePanel() {
|
|
1950
|
+
document.getElementById('side-panel').classList.toggle('collapsed');
|
|
1951
|
+
document.getElementById('new-conversation').classList.toggle('collapsed');
|
|
1952
|
+
document.getElementById('existing-conversations').classList.toggle('collapsed');
|
|
1953
|
+
document.getElementById('side-panel-collapse').style.transform = document.getElementById('side-panel').classList.contains('collapsed') ? 'rotate(0deg)' : 'rotate(180deg)';
|
|
1954
|
+
}
|
|
1955
|
+
var allFiles;
|
|
1956
|
+
function renderAllFiles() {
|
|
1957
|
+
fetch('/api/config/data/computer')
|
|
1958
|
+
.then(response => response.json())
|
|
1959
|
+
.then(data => {
|
|
1960
|
+
var indexedFiles = document.getElementsByClassName("indexed-files")[0];
|
|
1961
|
+
indexedFiles.innerHTML = "";
|
|
1962
|
+
|
|
1963
|
+
for (var filename of data) {
|
|
1964
|
+
var listItem = document.createElement("li");
|
|
1965
|
+
listItem.className = "fileName";
|
|
1966
|
+
listItem.id = filename;
|
|
1967
|
+
listItem.textContent = filename;
|
|
1968
|
+
listItem.addEventListener('click', function() {
|
|
1969
|
+
handleFileClick(this.id);
|
|
1970
|
+
});
|
|
1971
|
+
indexedFiles.appendChild(listItem);
|
|
1972
|
+
}
|
|
1973
|
+
allFiles = data;
|
|
1974
|
+
var nofilesmessage = document.getElementsByClassName("no-files-message")[0];
|
|
1975
|
+
nofilesmessage.innerHTML = "";
|
|
1976
|
+
if(allFiles.length === 0){
|
|
1977
|
+
let inlineChatLinkEl = document.createElement('a');
|
|
1978
|
+
inlineChatLinkEl.className = "inline-chat-link";
|
|
1979
|
+
inlineChatLinkEl.href = "https://docs.khoj.dev/category/clients/";
|
|
1980
|
+
inlineChatLinkEl.textContent = "How to upload files";
|
|
1981
|
+
nofilesmessage.appendChild(inlineChatLinkEl);
|
|
1982
|
+
document.getElementsByClassName("file-toggle-button")[0].style.display = "none";
|
|
1983
|
+
}
|
|
1984
|
+
else{
|
|
1985
|
+
document.getElementsByClassName("file-toggle-button")[0].style.display = "block";
|
|
1986
|
+
}
|
|
1987
|
+
})
|
|
1988
|
+
.catch((error) => {
|
|
1989
|
+
console.error('Error:', error);
|
|
1990
|
+
});
|
|
1991
|
+
}
|
|
1992
|
+
function renderFilteredFiles(){
|
|
1993
|
+
var indexedFiles = document.getElementsByClassName("indexed-files")[0];
|
|
1994
|
+
indexedFiles.innerHTML = "";
|
|
1995
|
+
var input = document.getElementsByClassName("file-input")[0];
|
|
1996
|
+
var filter = input.value.toUpperCase();
|
|
1997
|
+
|
|
1998
|
+
for (var filename of allFiles) {
|
|
1999
|
+
if (filename.toUpperCase().indexOf(filter) > -1) {
|
|
2000
|
+
var listItem = document.createElement("li");
|
|
2001
|
+
listItem.className = "fileName";
|
|
2002
|
+
listItem.id = filename;
|
|
2003
|
+
listItem.textContent = filename;
|
|
2004
|
+
|
|
2005
|
+
// Add an event listener for the click event
|
|
2006
|
+
listItem.addEventListener('click', function() {
|
|
2007
|
+
handleFileClick(this.id);
|
|
2008
|
+
});
|
|
2009
|
+
|
|
2010
|
+
// Append the list item to the indexed files container
|
|
2011
|
+
indexedFiles.appendChild(listItem);
|
|
2012
|
+
}
|
|
2013
|
+
}
|
|
2014
|
+
}
|
|
2015
|
+
function handleFileClick(elementId) {
|
|
2016
|
+
var element = document.getElementById(elementId);
|
|
2017
|
+
if (element) {
|
|
2018
|
+
var selectedFiles = document.getElementsByClassName("selected-files")[0];
|
|
2019
|
+
var selectedFile = document.getElementById(elementId);
|
|
2020
|
+
|
|
2021
|
+
// Check if the element has a background color indicating selection
|
|
2022
|
+
if (element.style.backgroundColor === "var(--primary-hover)") {
|
|
2023
|
+
// Remove the file filter from the conversation
|
|
2024
|
+
removeFileFilterFromConversation(elementId);
|
|
2025
|
+
// Remove the selected file from the list of selected files
|
|
2026
|
+
if (selectedFile) {
|
|
2027
|
+
selectedFiles.removeChild(selectedFile);
|
|
2028
|
+
}
|
|
2029
|
+
var selectedFile = document.getElementById(elementId);
|
|
2030
|
+
selectedFile.style.backgroundColor = "var(--primary)";
|
|
2031
|
+
selectedFile.style.border = "1px solid var(--primary-hover)";
|
|
2032
|
+
} else {
|
|
2033
|
+
// If the element is not selected, select it
|
|
2034
|
+
element.style.backgroundColor = "var(--primary-hover)"; // Set background color
|
|
2035
|
+
element.style.border = "3px solid orange"; // Set border
|
|
2036
|
+
// Add the file filter to the conversation
|
|
2037
|
+
addFileFilterToConversation(elementId);
|
|
2038
|
+
// Add the selected file to the list of selected files
|
|
2039
|
+
var li = document.createElement("li");
|
|
2040
|
+
li.className = "fileName";
|
|
2041
|
+
li.id = elementId;
|
|
2042
|
+
li.style.backgroundColor = "var(--primary-hover)"; // match the style
|
|
2043
|
+
li.style.border = "3px solid orange"; // match the style
|
|
2044
|
+
li.innerText = elementId;
|
|
2045
|
+
selectedFiles.appendChild(li);
|
|
2046
|
+
}
|
|
2047
|
+
} else {
|
|
2048
|
+
console.error('Element with id', elementId, 'not found.');
|
|
2049
|
+
}
|
|
2050
|
+
}
|
|
2051
|
+
|
|
2052
|
+
function addFileFilterToConversation(filename) {
|
|
2053
|
+
var conversation_id = document.getElementById("chat-body").dataset.conversationId;
|
|
2054
|
+
if (!conversation_id) {
|
|
2055
|
+
console.error("Conversation ID not found on chat-body element.");
|
|
2056
|
+
return;
|
|
2057
|
+
}
|
|
2058
|
+
|
|
2059
|
+
return fetch(`/api/chat/conversation/file-filters`, {
|
|
2060
|
+
method: 'POST',
|
|
2061
|
+
headers: {
|
|
2062
|
+
'Content-Type': 'application/json'
|
|
2063
|
+
},
|
|
2064
|
+
body: JSON.stringify({ filename, conversation_id }) // Pass the filename directly
|
|
2065
|
+
})
|
|
2066
|
+
.then(response => {
|
|
2067
|
+
if (!response.ok) {
|
|
2068
|
+
throw new Error(`HTTP error! status: ${response.status}`);
|
|
2069
|
+
}
|
|
2070
|
+
return response.json();
|
|
2071
|
+
})
|
|
2072
|
+
.then(data => {
|
|
2073
|
+
console.log("Response from server:", data);
|
|
2074
|
+
return data;
|
|
2075
|
+
})
|
|
2076
|
+
.catch(error => {
|
|
2077
|
+
console.error("Error:", error);
|
|
2078
|
+
throw error;
|
|
2079
|
+
});
|
|
2080
|
+
}
|
|
2081
|
+
|
|
2082
|
+
function removeFileFilterFromConversation(filename) {
|
|
2083
|
+
var conversation_id = document.getElementById("chat-body").dataset.conversationId;
|
|
2084
|
+
if (!conversation_id) {
|
|
2085
|
+
console.error("Conversation ID not found on chat-body element.");
|
|
2086
|
+
return;
|
|
2087
|
+
}
|
|
2088
|
+
|
|
2089
|
+
return fetch(`/api/chat/conversation/file-filters`, {
|
|
2090
|
+
method: 'DELETE',
|
|
2091
|
+
headers: {
|
|
2092
|
+
'Content-Type': 'application/json'
|
|
2093
|
+
},
|
|
2094
|
+
body: JSON.stringify({ filename, conversation_id }) // Pass the filename directly
|
|
2095
|
+
})
|
|
2096
|
+
.then(response => {
|
|
2097
|
+
if (!response.ok) {
|
|
2098
|
+
throw new Error(`HTTP error! status: ${response.status}`);
|
|
2099
|
+
}
|
|
2100
|
+
return response.json();
|
|
2101
|
+
})
|
|
2102
|
+
.then(data => {
|
|
2103
|
+
console.log("Response from server:", data);
|
|
2104
|
+
return data;
|
|
2105
|
+
})
|
|
2106
|
+
.catch(error => {
|
|
2107
|
+
console.error("Error:", error);
|
|
2108
|
+
throw error;
|
|
2109
|
+
});
|
|
2110
|
+
}
|
|
2111
|
+
|
|
2112
|
+
function getFileFiltersFromConversation() {
|
|
2113
|
+
// Get the conversation_id from the data attribute
|
|
2114
|
+
var conversation_id = document.getElementById("chat-body").dataset.conversationId;
|
|
2115
|
+
|
|
2116
|
+
// Make sure conversation_id is not undefined or null
|
|
2117
|
+
if (!conversation_id) {
|
|
2118
|
+
console.error("No conversation ID found on chat-body element.");
|
|
2119
|
+
return Promise.reject("No conversation ID found on chat-body element.");
|
|
2120
|
+
}
|
|
2121
|
+
|
|
2122
|
+
// Perform the fetch request
|
|
2123
|
+
return fetch(`/api/chat/conversation/file-filters/${conversation_id}`, {
|
|
2124
|
+
method: 'GET',
|
|
2125
|
+
headers: {
|
|
2126
|
+
'Content-Type': 'application/json'
|
|
2127
|
+
}
|
|
2128
|
+
})
|
|
2129
|
+
.then(function(response) {
|
|
2130
|
+
console.log("Response status:", response.status); // Log the response status
|
|
2131
|
+
|
|
2132
|
+
if (!response.ok) {
|
|
2133
|
+
throw new Error(`HTTP error! status: ${response.status}`);
|
|
2134
|
+
}
|
|
2135
|
+
|
|
2136
|
+
return response.json();
|
|
2137
|
+
})
|
|
2138
|
+
.then(function(data) {
|
|
2139
|
+
console.log("Response from server:", data);
|
|
2140
|
+
return data;
|
|
2141
|
+
})
|
|
2142
|
+
.catch(function(error) {
|
|
2143
|
+
console.error("Error:", error);
|
|
2144
|
+
throw error; // Rethrow the error to be handled elsewhere if needed
|
|
2145
|
+
});
|
|
2146
|
+
}
|
|
2147
|
+
|
|
2148
|
+
|
|
2149
|
+
function loadFileFiltersFromConversation(){
|
|
2150
|
+
getFileFiltersFromConversation()
|
|
2151
|
+
.then(filters => {
|
|
2152
|
+
var selectedFiles = document.getElementsByClassName("selected-files")[0];
|
|
2153
|
+
selectedFiles.innerHTML = "";
|
|
2154
|
+
for (var filter of filters) {
|
|
2155
|
+
var li = document.createElement("li");
|
|
2156
|
+
li.className = "fileName";
|
|
2157
|
+
li.id = filter;
|
|
2158
|
+
li.style.backgroundColor = "var(--primary-hover)"; // set background to orange
|
|
2159
|
+
li.style.border = "2px solid orange"; // set border to orange
|
|
2160
|
+
li.innerText = filter;
|
|
2161
|
+
selectedFiles.appendChild(li);
|
|
2162
|
+
}
|
|
2163
|
+
//update indexed files to have checkmark if they are in the filters
|
|
2164
|
+
var indexedFiles = document.getElementsByClassName("indexed-files")[0];
|
|
2165
|
+
indexedFiles.innerHTML = "";
|
|
2166
|
+
for (var filename of allFiles) {
|
|
2167
|
+
var li = document.createElement("li");
|
|
2168
|
+
li.className = "fileName";
|
|
2169
|
+
li.id = filename;
|
|
2170
|
+
li.innerText = filename;
|
|
2171
|
+
if (filters.includes(filename)) {
|
|
2172
|
+
li.style.backgroundColor = "var(--primary-hover)"; // set background to orange
|
|
2173
|
+
li.style.border = "2px solid orange"; // set border to orange
|
|
2174
|
+
}
|
|
2175
|
+
li.setAttribute("onclick", "handleFileClick('" + filename + "')");
|
|
2176
|
+
indexedFiles.appendChild(li);
|
|
2177
|
+
}
|
|
2178
|
+
})
|
|
2179
|
+
.catch(error => {
|
|
2180
|
+
// Handle any errors that occur during the fetch operation
|
|
2181
|
+
console.error("Error loading file filters:", error);
|
|
2182
|
+
});
|
|
2183
|
+
}
|
|
2184
|
+
|
|
2185
|
+
function inputAutoFiller(key){
|
|
2186
|
+
var chatInput = document.getElementById("chat-input");
|
|
2187
|
+
console.log(key, userMessageIndex)
|
|
2188
|
+
if (key === "up") {
|
|
2189
|
+
if (userMessageIndex > 0) {
|
|
2190
|
+
userMessageIndex -= 1;
|
|
2191
|
+
chatInput.value = userMessages[userMessageIndex];
|
|
2192
|
+
} else {
|
|
2193
|
+
userMessageIndex = -1;
|
|
2194
|
+
chatInput.value = "";
|
|
2195
|
+
}
|
|
2196
|
+
} else if (key === "down") {
|
|
2197
|
+
if (userMessageIndex < userMessages.length - 1) {
|
|
2198
|
+
userMessageIndex += 1;
|
|
2199
|
+
chatInput.value = userMessages[userMessageIndex];
|
|
2200
|
+
} else if (userMessageIndex === userMessages.length - 1) {
|
|
2201
|
+
userMessageIndex += 1;
|
|
2202
|
+
chatInput.value = "";
|
|
2203
|
+
}
|
|
2204
|
+
}
|
|
2205
|
+
}
|
|
2206
|
+
function resetUserMessageIndex(){
|
|
2207
|
+
userMessageIndex = userMessages.length;
|
|
2208
|
+
}
|
|
2209
|
+
</script>
|
|
2210
|
+
<body>
|
|
2211
|
+
<div id="khoj-empty-container" class="khoj-empty-container">
|
|
2212
|
+
</div>
|
|
2213
|
+
<!--Add Header Logo and Nav Pane-->
|
|
2214
|
+
{% import 'utils.html' as utils %}
|
|
2215
|
+
{{ utils.heading_pane(user_photo, username, is_active, has_documents) }}
|
|
2216
|
+
<div id="chat-section-wrapper">
|
|
2217
|
+
<div id="side-panel-wrapper">
|
|
2218
|
+
<div id="side-panel">
|
|
2219
|
+
<div id="new-conversation">
|
|
2220
|
+
<div id="conversation-list-header" style="display: none;">Conversations</div>
|
|
2221
|
+
<button class="side-panel-button" id="new-conversation-button" onclick="createNewConversation()">
|
|
2222
|
+
New
|
|
2223
|
+
<svg class="new-convo-button" viewBox="0 0 40 40" fill="#000000" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
|
2224
|
+
<path d="M16 0c-8.836 0-16 7.163-16 16s7.163 16 16 16c8.837 0 16-7.163 16-16s-7.163-16-16-16zM16 30.032c-7.72 0-14-6.312-14-14.032s6.28-14 14-14 14 6.28 14 14-6.28 14.032-14 14.032zM23 15h-6v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1v6h-6c-0.552 0-1 0.448-1 1s0.448 1 1 1h6v6c0 0.552 0.448 1 1 1s1-0.448 1-1v-6h6c0.552 0 1-0.448 1-1s-0.448-1-1-1z"></path>
|
|
2225
|
+
</svg>
|
|
2226
|
+
</button>
|
|
2227
|
+
</div>
|
|
2228
|
+
<div id="existing-conversations">
|
|
2229
|
+
<div id="conversation-list">
|
|
2230
|
+
<div id="conversation-list-body"></div>
|
|
2231
|
+
</div>
|
|
2232
|
+
</div>
|
|
2233
|
+
<div id="connection-status" class="inline-chat-link">
|
|
2234
|
+
<div id="connection-status-icon"></div>
|
|
2235
|
+
<div id="connection-status-text"></div>
|
|
2236
|
+
</div>
|
|
2237
|
+
<div style="border-top: 1px solid black; ">
|
|
2238
|
+
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; margin-top: 5px;">
|
|
2239
|
+
<p style="margin: 0;">Files</p>
|
|
2240
|
+
<svg class="file-toggle-button" style="width:20px; height:20px; position: relative; top: 2px" viewBox="0 0 40 40" fill="#000000" xmlns="http://www.w3.org/2000/svg">
|
|
2241
|
+
<path d="M16 0c-8.836 0-16 7.163-16 16s7.163 16 16 16c8.837 0 16-7.163 16-16s-7.163-16-16-16zM16 30.032c-7.72 0-14-6.312-14-14.032s6.28-14 14-14 14 6.28 14 14-6.28 14.032-14 14.032zM23 15h-6v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1v6h-6c-0.552 0-1 0.448-1 1s0.448 1 1 1h6v6c0 0.552 0.448 1 1 1s1-0.448 1-1v-6h6c0.552 0 1-0.448 1-1s-0.448-1-1-1z"></path>
|
|
2242
|
+
</svg>
|
|
2243
|
+
</div>
|
|
2244
|
+
<div class="no-files-message"></div>
|
|
2245
|
+
<ul class="selected-files" style="margin: 0; padding: 0; margin-bottom: 10px"></ul>
|
|
2246
|
+
<input class="file-input" style="width:240px; margin-bottom: 5px; color: black; display: none; border-radius: 4px; border: 1px solid black; padding: 4px;" type="text" onkeyup="renderFilteredFiles()" placeholder="Filter">
|
|
2247
|
+
<ul class="indexed-files" style="margin: 0; padding: 0; height:100px; overflow:hidden; overflow-y:scroll; margin-bottom:5px; display:none;"></ul>
|
|
2248
|
+
<script>
|
|
2249
|
+
renderAllFiles();
|
|
2250
|
+
var fileInputs = document.getElementsByClassName('file-input');
|
|
2251
|
+
var fileLists = document.getElementsByClassName('indexed-files');
|
|
2252
|
+
var selectedFileLists = document.getElementsByClassName('selected-files');
|
|
2253
|
+
var fileToggleButtons = document.getElementsByClassName('file-toggle-button');
|
|
2254
|
+
|
|
2255
|
+
var fileInput = fileInputs[0];
|
|
2256
|
+
var fileList = fileLists[0];
|
|
2257
|
+
var selectedFileList = selectedFileLists[0];
|
|
2258
|
+
var fileToggleButton = fileToggleButtons[0];
|
|
2259
|
+
|
|
2260
|
+
function toggleFileInput() {
|
|
2261
|
+
if (fileInput.style.display === 'none' || fileInput.style.display === '') {
|
|
2262
|
+
fileInput.style.display = 'block';
|
|
2263
|
+
fileList.style.display = 'block';
|
|
2264
|
+
selectedFileList.style.display = 'none';
|
|
2265
|
+
} else {
|
|
2266
|
+
fileInput.style.display = 'none';
|
|
2267
|
+
fileList.style.display = 'none';
|
|
2268
|
+
selectedFileList.style.display = 'block';
|
|
2269
|
+
}
|
|
2270
|
+
}
|
|
2271
|
+
|
|
2272
|
+
fileToggleButton.addEventListener('click', function(event) {
|
|
2273
|
+
toggleFileInput();
|
|
2274
|
+
event.stopPropagation();
|
|
2275
|
+
});
|
|
2276
|
+
|
|
2277
|
+
document.addEventListener('click', function(event) {
|
|
2278
|
+
if (!fileInput.contains(event.target) && !fileToggleButton.contains(event.target)) {
|
|
2279
|
+
fileInput.style.display = 'none';
|
|
2280
|
+
fileList.style.display = 'none';
|
|
2281
|
+
selectedFileList.style.display = 'block';
|
|
2282
|
+
}
|
|
2283
|
+
|
|
2284
|
+
});
|
|
2285
|
+
|
|
2286
|
+
fileInput.addEventListener('click', function(event) {
|
|
2287
|
+
event.stopPropagation(); // Prevent the document click handler from immediately hiding the input
|
|
2288
|
+
});
|
|
2289
|
+
|
|
2290
|
+
fileList.addEventListener('click', function(event) {
|
|
2291
|
+
event.stopPropagation(); // Prevent the document click handler from hiding the file list
|
|
2292
|
+
});
|
|
2293
|
+
|
|
2294
|
+
</script>
|
|
2295
|
+
</div>
|
|
2296
|
+
<a id="agent-link" class="inline-chat-link" href="">
|
|
2297
|
+
<div id="agent-metadata" style="display: none;">
|
|
2298
|
+
Current Agent
|
|
2299
|
+
<div id="agent-metadata-content">
|
|
2300
|
+
<div id="agent-avatar-wrapper">
|
|
2301
|
+
<img id="agent-avatar" src="" alt="Agent Avatar" />
|
|
2302
|
+
</div>
|
|
2303
|
+
<div id="agent-name-wrapper">
|
|
2304
|
+
<div id="agent-name"></div>
|
|
2305
|
+
<div id="agent-owned-by-user" style="display: none;">Edit</div>
|
|
2306
|
+
</div>
|
|
2307
|
+
</div>
|
|
2308
|
+
</div>
|
|
2309
|
+
</a>
|
|
2310
|
+
</div>
|
|
2311
|
+
<div id="collapse-side-panel">
|
|
2312
|
+
<button
|
|
2313
|
+
class="side-panel-button"
|
|
2314
|
+
id="collapse-side-panel-button"
|
|
2315
|
+
onclick="handleCollapseSidePanel()"
|
|
2316
|
+
>
|
|
2317
|
+
<svg id="side-panel-collapse" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2318
|
+
<path d="M7.82054 20.7313C8.21107 21.1218 8.84423 21.1218 9.23476 20.7313L15.8792 14.0868C17.0505 12.9155 17.0508 11.0167 15.88 9.84497L9.3097 3.26958C8.91918 2.87905 8.28601 2.87905 7.89549 3.26958C7.50497 3.6601 7.50497 4.29327 7.89549 4.68379L14.4675 11.2558C14.8581 11.6464 14.8581 12.2795 14.4675 12.67L7.82054 19.317C7.43002 19.7076 7.43002 20.3407 7.82054 20.7313Z" fill="#0F0F0F"/>
|
|
2319
|
+
</svg>
|
|
2320
|
+
</button>
|
|
2321
|
+
</div>
|
|
2322
|
+
</div>
|
|
2323
|
+
<div id="chat-body-wrapper">
|
|
2324
|
+
<!-- Chat Body -->
|
|
2325
|
+
<div id="chat-body"></div>
|
|
2326
|
+
|
|
2327
|
+
<!-- Chat Suggestions -->
|
|
2328
|
+
<div id="question-starters" style="display: none;"></div>
|
|
2329
|
+
|
|
2330
|
+
<!-- Chat Footer -->
|
|
2331
|
+
<div id="chat-footer">
|
|
2332
|
+
<div id="chat-tooltip" style="display: none;"></div>
|
|
2333
|
+
<div id="input-row">
|
|
2334
|
+
<button id="upload-file-button" class="input-row-button" onclick="openFileBrowser()">
|
|
2335
|
+
<svg id="upload-file-button-img" class="input-row-button-img" alt="Upload File" width="183px" height="183px" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#000000" stroke-width="0.9600000000000002" transform="matrix(1, 0, 0, 1, 0, 0)rotate(-45)">
|
|
2336
|
+
<g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g id="attachment"> <g id="attachment_2"> <path id="Combined Shape" fill-rule="evenodd" clip-rule="evenodd" d="M26.4252 29.1104L39.5729 15.9627C42.3094 13.2262 42.3094 8.78901 39.5729 6.05248C36.8364 3.31601 32.4015 3.31601 29.663 6.05218L16.4487 19.2665L16.4251 19.2909L8.92989 26.7861C5.02337 30.6926 5.02337 37.0238 8.92989 40.9303C12.8344 44.8348 19.1656 44.8348 23.0701 40.9303L41.7835 22.2169C42.174 21.8264 42.174 21.1933 41.7835 20.8027C41.3929 20.4122 40.7598 20.4122 40.3693 20.8027L21.6559 39.5161C18.5324 42.6396 13.4676 42.6396 10.3441 39.5161C7.21863 36.3906 7.21863 31.3258 10.3441 28.2003L30.1421 8.4023L30.1657 8.37788L31.0769 7.4667C33.0341 5.51117 36.2032 5.51117 38.1587 7.4667C40.1142 9.42217 40.1142 12.593 38.1587 14.5485L28.282 24.4252C28.2748 24.4319 28.2678 24.4388 28.2608 24.4458L25.0064 27.7008L24.9447 27.7625C24.9437 27.7635 24.9427 27.7644 24.9418 27.7654L17.3988 35.3097C16.6139 36.0934 15.3401 36.0934 14.5545 35.3091C13.7714 34.5247 13.7714 33.2509 14.5557 32.4653L24.479 22.544C24.8696 22.1535 24.8697 21.5203 24.4792 21.1298C24.0887 20.7392 23.4555 20.7391 23.065 21.1296L13.141 31.0516C11.5766 32.6187 11.5766 35.1569 13.1403 36.7233C14.7079 38.2882 17.2461 38.2882 18.8125 36.7245L26.3589 29.1767L26.4252 29.1104Z" fill="#000000"></path></g> </g> </g>
|
|
2337
|
+
</svg>
|
|
2338
|
+
</button>
|
|
2339
|
+
<textarea id="chat-input" class="option" oninput="onChatInput()" onkeydown=incrementalChat(event) autofocus="autofocus" placeholder="Type / to see a list of commands"></textarea>
|
|
2340
|
+
<!-- Shortcut Handler for Accessing Old Messages -->
|
|
2341
|
+
<script>
|
|
2342
|
+
let chatInput = document.getElementById('chat-input');
|
|
2343
|
+
chatInput.addEventListener('keydown', function(event) {
|
|
2344
|
+
if (event.key === 'ArrowUp') {
|
|
2345
|
+
inputAutoFiller('up');
|
|
2346
|
+
} else if (event.key === 'ArrowDown') {
|
|
2347
|
+
inputAutoFiller('down');
|
|
2348
|
+
}
|
|
2349
|
+
});
|
|
2350
|
+
document.addEventListener('click', function(event) {
|
|
2351
|
+
if (document.activeElement !== document.getElementById('chat-input')) {
|
|
2352
|
+
resetUserMessageIndex();
|
|
2353
|
+
}
|
|
2354
|
+
});
|
|
2355
|
+
</script>
|
|
2356
|
+
<button id="speak-button" class="input-row-button"
|
|
2357
|
+
ontouchstart="speechToText(event)" ontouchend="speechToText(event)" ontouchcancel="speechToText(event)" onmousedown="speechToText(event)">
|
|
2358
|
+
<svg id="speak-button-img" class="input-row-button-img" alt="Transcribe" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
2359
|
+
<path d="M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5z"/>
|
|
2360
|
+
<path d="M10 8a2 2 0 1 1-4 0V3a2 2 0 1 1 4 0v5zM8 0a3 3 0 0 0-3 3v5a3 3 0 0 0 6 0V3a3 3 0 0 0-3-3z"/>
|
|
2361
|
+
</svg>
|
|
2362
|
+
<svg id="stop-record-button-img" style="display: none" class="input-row-button-img" alt="Stop Transcribing" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
2363
|
+
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
|
|
2364
|
+
<path d="M5 6.5A1.5 1.5 0 0 1 6.5 5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5v-3z"/>
|
|
2365
|
+
</svg>
|
|
2366
|
+
</button>
|
|
2367
|
+
<button id="send-button" class="input-row-button" alt="Send message">
|
|
2368
|
+
<svg id="send-button-img" onclick="chat()" class="input-row-button-img" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
2369
|
+
<path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V11.5z"/>
|
|
2370
|
+
</svg>
|
|
2371
|
+
<svg id="stop-send-button-img" onclick="cancelSendMessage()" style="display: none" class="input-row-button-img" alt="Stop Message Send" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
2372
|
+
<circle id="countdown-circle" class="countdown-circle" cx="8" cy="8" r="7" />
|
|
2373
|
+
<path d="M5 6.5A1.5 1.5 0 0 1 6.5 5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5v-3z"/>
|
|
2374
|
+
</svg>
|
|
2375
|
+
</button>
|
|
2376
|
+
</div>
|
|
2377
|
+
</div>
|
|
2378
|
+
</div>
|
|
2379
|
+
</div>
|
|
2380
|
+
</body>
|
|
2381
|
+
<script>
|
|
2382
|
+
// Set the active nav pane
|
|
2383
|
+
let chatNav = document.getElementById("chat-nav");
|
|
2384
|
+
if (chatNav) {
|
|
2385
|
+
chatNav.classList.add("khoj-nav-selected");
|
|
2386
|
+
}
|
|
2387
|
+
</script>
|
|
2388
|
+
<style>
|
|
2389
|
+
html, body {
|
|
2390
|
+
height: 100%;
|
|
2391
|
+
width: 100%;
|
|
2392
|
+
padding: 0px;
|
|
2393
|
+
margin: 0px;
|
|
2394
|
+
}
|
|
2395
|
+
body {
|
|
2396
|
+
display: grid;
|
|
2397
|
+
background: var(--background-color);
|
|
2398
|
+
color: var(--main-text-color);
|
|
2399
|
+
text-align: center;
|
|
2400
|
+
font-family: var(--font-family);
|
|
2401
|
+
font-size: small;
|
|
2402
|
+
font-weight: 300;
|
|
2403
|
+
line-height: 2em;
|
|
2404
|
+
height: 100vh;
|
|
2405
|
+
margin: 0;
|
|
2406
|
+
}
|
|
2407
|
+
body > * {
|
|
2408
|
+
padding: 10px;
|
|
2409
|
+
margin: 10px;
|
|
2410
|
+
}
|
|
2411
|
+
|
|
2412
|
+
div.collapsed {
|
|
2413
|
+
display: none;
|
|
2414
|
+
}
|
|
2415
|
+
|
|
2416
|
+
div.expanded {
|
|
2417
|
+
display: block;
|
|
2418
|
+
}
|
|
2419
|
+
|
|
2420
|
+
div.references {
|
|
2421
|
+
padding-top: 8px;
|
|
2422
|
+
}
|
|
2423
|
+
div.reference {
|
|
2424
|
+
display: grid;
|
|
2425
|
+
grid-template-rows: auto;
|
|
2426
|
+
grid-auto-flow: row;
|
|
2427
|
+
grid-column-gap: 10px;
|
|
2428
|
+
grid-row-gap: 10px;
|
|
2429
|
+
margin: 10px;
|
|
2430
|
+
}
|
|
2431
|
+
|
|
2432
|
+
li.fileName {
|
|
2433
|
+
white-space: nowrap;
|
|
2434
|
+
overflow: hidden;
|
|
2435
|
+
text-overflow: ellipsis;
|
|
2436
|
+
max-width: 250px;
|
|
2437
|
+
background-color: var(--primary);
|
|
2438
|
+
border-radius: 10px;
|
|
2439
|
+
border: 1px solid var(--primary-hover);
|
|
2440
|
+
margin-bottom: 4px;
|
|
2441
|
+
margin-top: 4px;
|
|
2442
|
+
padding: 4px;
|
|
2443
|
+
}
|
|
2444
|
+
|
|
2445
|
+
li.fileName:hover {
|
|
2446
|
+
background-color: var(--primary-hover);
|
|
2447
|
+
cursor: pointer;
|
|
2448
|
+
}
|
|
2449
|
+
|
|
2450
|
+
div.expanded.reference-section {
|
|
2451
|
+
display: grid;
|
|
2452
|
+
grid-template-rows: auto;
|
|
2453
|
+
grid-auto-flow: row;
|
|
2454
|
+
grid-column-gap: 10px;
|
|
2455
|
+
grid-row-gap: 10px;
|
|
2456
|
+
margin: 10px;
|
|
2457
|
+
}
|
|
2458
|
+
|
|
2459
|
+
div#question-starters {
|
|
2460
|
+
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
|
|
2461
|
+
grid-column-gap: 8px;
|
|
2462
|
+
}
|
|
2463
|
+
|
|
2464
|
+
button.question-starter {
|
|
2465
|
+
background: var(--background-color);
|
|
2466
|
+
color: var(--main-text-color);
|
|
2467
|
+
border: 1px solid var(--main-text-color);
|
|
2468
|
+
border-radius: 5px;
|
|
2469
|
+
padding: 5px;
|
|
2470
|
+
font-size: 14px;
|
|
2471
|
+
font-weight: 300;
|
|
2472
|
+
line-height: 1.5em;
|
|
2473
|
+
cursor: pointer;
|
|
2474
|
+
transition: background 0.2s ease-in-out;
|
|
2475
|
+
text-align: left;
|
|
2476
|
+
max-height: 75px;
|
|
2477
|
+
transition: max-height 0.3s ease-in-out;
|
|
2478
|
+
overflow: hidden;
|
|
2479
|
+
}
|
|
2480
|
+
button.question-starter:hover {
|
|
2481
|
+
background: var(--primary-hover);
|
|
2482
|
+
}
|
|
2483
|
+
|
|
2484
|
+
button.reference-button {
|
|
2485
|
+
background: var(--background-color);
|
|
2486
|
+
color: var(--main-text-color);
|
|
2487
|
+
border: 1px solid var(--main-text-color);
|
|
2488
|
+
border-radius: 5px;
|
|
2489
|
+
padding: 5px;
|
|
2490
|
+
font-size: 14px;
|
|
2491
|
+
font-weight: 300;
|
|
2492
|
+
line-height: 1.5em;
|
|
2493
|
+
cursor: pointer;
|
|
2494
|
+
transition: background 0.2s ease-in-out;
|
|
2495
|
+
text-align: left;
|
|
2496
|
+
max-height: 75px;
|
|
2497
|
+
transition: max-height 0.3s ease-in-out;
|
|
2498
|
+
overflow: hidden;
|
|
2499
|
+
}
|
|
2500
|
+
button.reference-button.expanded {
|
|
2501
|
+
max-height: none;
|
|
2502
|
+
white-space: pre-wrap;
|
|
2503
|
+
}
|
|
2504
|
+
|
|
2505
|
+
button.reference-button::before {
|
|
2506
|
+
content: "▶";
|
|
2507
|
+
margin-right: 5px;
|
|
2508
|
+
display: inline-block;
|
|
2509
|
+
transition: transform 0.1s ease-in-out;
|
|
2510
|
+
}
|
|
2511
|
+
|
|
2512
|
+
button.reference-button.expanded::before,
|
|
2513
|
+
button.reference-button:active:before,
|
|
2514
|
+
button.reference-button[aria-expanded="true"]::before {
|
|
2515
|
+
transform: rotate(90deg);
|
|
2516
|
+
}
|
|
2517
|
+
|
|
2518
|
+
button.reference-expand-button {
|
|
2519
|
+
background: var(--background-color);
|
|
2520
|
+
color: var(--main-text-color);
|
|
2521
|
+
border: 1px dotted var(--main-text-color);
|
|
2522
|
+
border-radius: 5px;
|
|
2523
|
+
padding: 5px;
|
|
2524
|
+
font-size: 14px;
|
|
2525
|
+
font-weight: 300;
|
|
2526
|
+
line-height: 1.5em;
|
|
2527
|
+
cursor: pointer;
|
|
2528
|
+
transition: background 0.4s ease-in-out;
|
|
2529
|
+
text-align: left;
|
|
2530
|
+
}
|
|
2531
|
+
|
|
2532
|
+
button.reference-expand-button:hover {
|
|
2533
|
+
background: var(--primary-hover);
|
|
2534
|
+
}
|
|
2535
|
+
|
|
2536
|
+
code.chat-response {
|
|
2537
|
+
background: var(--primary-hover);
|
|
2538
|
+
color: var(--primary-inverse);
|
|
2539
|
+
border-radius: 5px;
|
|
2540
|
+
padding: 5px;
|
|
2541
|
+
font-size: 14px;
|
|
2542
|
+
font-weight: 300;
|
|
2543
|
+
line-height: 1.5em;
|
|
2544
|
+
}
|
|
2545
|
+
|
|
2546
|
+
input.conversation-title-input {
|
|
2547
|
+
font-family: var(--font-family);
|
|
2548
|
+
font-size: 14px;
|
|
2549
|
+
font-weight: 300;
|
|
2550
|
+
line-height: 1.5em;
|
|
2551
|
+
padding: 5px;
|
|
2552
|
+
border: 1px solid var(--main-text-color);
|
|
2553
|
+
border-radius: 5px;
|
|
2554
|
+
margin: 4px;
|
|
2555
|
+
}
|
|
2556
|
+
|
|
2557
|
+
input.conversation-title-input:focus {
|
|
2558
|
+
outline: none;
|
|
2559
|
+
}
|
|
2560
|
+
|
|
2561
|
+
#chat-section-wrapper {
|
|
2562
|
+
display: grid;
|
|
2563
|
+
grid-template-columns: auto 1fr;
|
|
2564
|
+
grid-column-gap: 10px;
|
|
2565
|
+
grid-row-gap: 10px;
|
|
2566
|
+
padding: 10px;
|
|
2567
|
+
margin: 10px;
|
|
2568
|
+
overflow-y: scroll;
|
|
2569
|
+
}
|
|
2570
|
+
|
|
2571
|
+
#chat-body-wrapper {
|
|
2572
|
+
display: flex;
|
|
2573
|
+
flex-direction: column;
|
|
2574
|
+
overflow: hidden;
|
|
2575
|
+
}
|
|
2576
|
+
|
|
2577
|
+
#side-panel {
|
|
2578
|
+
width: 250px;
|
|
2579
|
+
padding: 10px;
|
|
2580
|
+
background: var(--background-color);
|
|
2581
|
+
border-radius: 5px;
|
|
2582
|
+
box-shadow: 0 0 11px #aaa;
|
|
2583
|
+
text-align: left;
|
|
2584
|
+
transition: width 0.3s ease-in-out;
|
|
2585
|
+
max-height: 100%;
|
|
2586
|
+
display: grid;
|
|
2587
|
+
grid-template-rows: auto 1fr auto;
|
|
2588
|
+
}
|
|
2589
|
+
|
|
2590
|
+
div#existing-conversations {
|
|
2591
|
+
max-height: 95%;
|
|
2592
|
+
overflow-y: auto;
|
|
2593
|
+
}
|
|
2594
|
+
|
|
2595
|
+
div#side-panel.collapsed {
|
|
2596
|
+
width: 0;
|
|
2597
|
+
padding: 0;
|
|
2598
|
+
display: block;
|
|
2599
|
+
overflow: hidden;
|
|
2600
|
+
}
|
|
2601
|
+
|
|
2602
|
+
div#collapse-side-panel {
|
|
2603
|
+
align-self: center;
|
|
2604
|
+
padding: 8px;
|
|
2605
|
+
}
|
|
2606
|
+
|
|
2607
|
+
div#conversation-list-body {
|
|
2608
|
+
display: grid;
|
|
2609
|
+
grid-template-columns: 1fr;
|
|
2610
|
+
grid-gap: 8px;
|
|
2611
|
+
}
|
|
2612
|
+
|
|
2613
|
+
div#conversation-list {
|
|
2614
|
+
height: 1px;
|
|
2615
|
+
}
|
|
2616
|
+
|
|
2617
|
+
div#side-panel-wrapper {
|
|
2618
|
+
display: flex;
|
|
2619
|
+
}
|
|
2620
|
+
|
|
2621
|
+
#chat-body {
|
|
2622
|
+
height: 100%;
|
|
2623
|
+
font-size: 1.1em;
|
|
2624
|
+
margin: 0px;
|
|
2625
|
+
line-height: 20px;
|
|
2626
|
+
overflow-y: scroll;
|
|
2627
|
+
overflow-x: hidden;
|
|
2628
|
+
transition: background-color 0.2s;
|
|
2629
|
+
transition: opacity 0.2s;
|
|
2630
|
+
}
|
|
2631
|
+
|
|
2632
|
+
#chat-body.dragover {
|
|
2633
|
+
background-color: var(--primary-active);
|
|
2634
|
+
}
|
|
2635
|
+
|
|
2636
|
+
.relative-position {
|
|
2637
|
+
position: relative;
|
|
2638
|
+
}
|
|
2639
|
+
|
|
2640
|
+
#chat-body.dragover {
|
|
2641
|
+
opacity: 50%;
|
|
2642
|
+
}
|
|
2643
|
+
|
|
2644
|
+
div.dropzone-overlay {
|
|
2645
|
+
position: absolute;
|
|
2646
|
+
top: 0;
|
|
2647
|
+
left: 0;
|
|
2648
|
+
width: 100%;
|
|
2649
|
+
height: 100%;
|
|
2650
|
+
display: flex;
|
|
2651
|
+
align-items: center;
|
|
2652
|
+
justify-content: center;
|
|
2653
|
+
font-size: 2rem;
|
|
2654
|
+
color: #333;
|
|
2655
|
+
z-index: 9999; /* This is the important part */
|
|
2656
|
+
pointer-events: none;
|
|
2657
|
+
}
|
|
2658
|
+
|
|
2659
|
+
div.loading-screen {
|
|
2660
|
+
position: absolute;
|
|
2661
|
+
width: 100%;
|
|
2662
|
+
height: 100%;
|
|
2663
|
+
display: flex;
|
|
2664
|
+
align-items: center;
|
|
2665
|
+
justify-content: center;
|
|
2666
|
+
font-size: 2rem;
|
|
2667
|
+
color: #333;
|
|
2668
|
+
z-index: 9999; /* This is the important part */
|
|
2669
|
+
}
|
|
2670
|
+
|
|
2671
|
+
/* add chat metatdata to bottom of bubble */
|
|
2672
|
+
.chat-message::after {
|
|
2673
|
+
content: attr(data-meta);
|
|
2674
|
+
display: block;
|
|
2675
|
+
font-size: x-small;
|
|
2676
|
+
color: var(--main-text-color);
|
|
2677
|
+
margin: -8px 4px 0px 0px;
|
|
2678
|
+
}
|
|
2679
|
+
/* move message by khoj to left */
|
|
2680
|
+
.chat-message.khoj {
|
|
2681
|
+
margin-left: auto;
|
|
2682
|
+
text-align: left;
|
|
2683
|
+
height: fit-content;
|
|
2684
|
+
}
|
|
2685
|
+
/* move message by you to right */
|
|
2686
|
+
.chat-message.you {
|
|
2687
|
+
margin-right: auto;
|
|
2688
|
+
text-align: right;
|
|
2689
|
+
height: fit-content;
|
|
2690
|
+
}
|
|
2691
|
+
/* basic style chat message text */
|
|
2692
|
+
.chat-message-text {
|
|
2693
|
+
margin: 10px;
|
|
2694
|
+
border-radius: 10px;
|
|
2695
|
+
padding: 10px;
|
|
2696
|
+
position: relative;
|
|
2697
|
+
display: inline-block;
|
|
2698
|
+
max-width: 80%;
|
|
2699
|
+
text-align: left;
|
|
2700
|
+
white-space: pre-line;
|
|
2701
|
+
}
|
|
2702
|
+
/* color chat bubble by khoj blue */
|
|
2703
|
+
.chat-message-text.khoj {
|
|
2704
|
+
color: var(--primary-inverse);
|
|
2705
|
+
background: var(--primary);
|
|
2706
|
+
margin-left: auto;
|
|
2707
|
+
}
|
|
2708
|
+
.chat-message-text ol,
|
|
2709
|
+
.chat-message-text ul {
|
|
2710
|
+
white-space: normal;
|
|
2711
|
+
margin: 0;
|
|
2712
|
+
}
|
|
2713
|
+
.chat-message-text-response {
|
|
2714
|
+
margin-bottom: 0px;
|
|
2715
|
+
}
|
|
2716
|
+
|
|
2717
|
+
/* Spinner symbol when the chat message is loading */
|
|
2718
|
+
.spinner {
|
|
2719
|
+
border: 4px solid #f3f3f3;
|
|
2720
|
+
border-top: 4px solid var(--primary-inverse);
|
|
2721
|
+
border-radius: 50%;
|
|
2722
|
+
width: 12px;
|
|
2723
|
+
height: 12px;
|
|
2724
|
+
animation: spin 2s linear infinite;
|
|
2725
|
+
margin: 0px 0px 0px 10px;
|
|
2726
|
+
display: inline-block;
|
|
2727
|
+
}
|
|
2728
|
+
@keyframes spin {
|
|
2729
|
+
0% { transform: rotate(0deg); }
|
|
2730
|
+
100% { transform: rotate(360deg); }
|
|
2731
|
+
}
|
|
2732
|
+
/* add left protrusion to khoj chat bubble */
|
|
2733
|
+
.chat-message-text.khoj:after {
|
|
2734
|
+
content: '';
|
|
2735
|
+
position: absolute;
|
|
2736
|
+
bottom: -2px;
|
|
2737
|
+
left: -7px;
|
|
2738
|
+
border: 10px solid transparent;
|
|
2739
|
+
border-top-color: var(--primary);
|
|
2740
|
+
border-bottom: 0;
|
|
2741
|
+
transform: rotate(-60deg);
|
|
2742
|
+
}
|
|
2743
|
+
/* color chat bubble by you dark grey */
|
|
2744
|
+
.chat-message-text.you {
|
|
2745
|
+
color: #f8fafc;
|
|
2746
|
+
background: #475569;
|
|
2747
|
+
margin-right: auto;
|
|
2748
|
+
}
|
|
2749
|
+
/* add right protrusion to you chat bubble */
|
|
2750
|
+
.chat-message-text.you:after {
|
|
2751
|
+
content: '';
|
|
2752
|
+
position: absolute;
|
|
2753
|
+
top: 91%;
|
|
2754
|
+
right: -2px;
|
|
2755
|
+
border: 10px solid transparent;
|
|
2756
|
+
border-left-color: var(--main-text-color);
|
|
2757
|
+
border-right: 0;
|
|
2758
|
+
margin-top: -10px;
|
|
2759
|
+
transform: rotate(-60deg)
|
|
2760
|
+
}
|
|
2761
|
+
img.text-to-image {
|
|
2762
|
+
max-width: 60%;
|
|
2763
|
+
}
|
|
2764
|
+
h3 > img.text-to-image {
|
|
2765
|
+
height: 24px;
|
|
2766
|
+
vertical-align: sub;
|
|
2767
|
+
}
|
|
2768
|
+
|
|
2769
|
+
#chat-footer {
|
|
2770
|
+
padding: 0;
|
|
2771
|
+
margin: 8px;
|
|
2772
|
+
display: grid;
|
|
2773
|
+
grid-template-columns: minmax(70px, 100%);
|
|
2774
|
+
grid-column-gap: 10px;
|
|
2775
|
+
grid-row-gap: 10px;
|
|
2776
|
+
}
|
|
2777
|
+
#input-row {
|
|
2778
|
+
display: grid;
|
|
2779
|
+
grid-template-columns: 32px auto 40px 32px;
|
|
2780
|
+
grid-column-gap: 10px;
|
|
2781
|
+
grid-row-gap: 10px;
|
|
2782
|
+
background: var(--background-color);
|
|
2783
|
+
align-items: center;
|
|
2784
|
+
}
|
|
2785
|
+
.option:hover {
|
|
2786
|
+
box-shadow: 0 0 11px #aaa;
|
|
2787
|
+
}
|
|
2788
|
+
|
|
2789
|
+
.helpoption:hover {
|
|
2790
|
+
background-color: #d9d9d9;
|
|
2791
|
+
}
|
|
2792
|
+
|
|
2793
|
+
#chat-input {
|
|
2794
|
+
font-family: var(--font-family);
|
|
2795
|
+
font-size: medium;
|
|
2796
|
+
height: 48px;
|
|
2797
|
+
border-radius: 16px;
|
|
2798
|
+
resize: none;
|
|
2799
|
+
overflow-y: hidden;
|
|
2800
|
+
max-height: 200px;
|
|
2801
|
+
box-sizing: border-box;
|
|
2802
|
+
padding: 8px 0 0 12px;
|
|
2803
|
+
line-height: 1.5em;
|
|
2804
|
+
margin: 0;
|
|
2805
|
+
}
|
|
2806
|
+
#chat-input:focus {
|
|
2807
|
+
outline: none !important;
|
|
2808
|
+
}
|
|
2809
|
+
.input-row-button {
|
|
2810
|
+
background: var(--background-color);
|
|
2811
|
+
border: none;
|
|
2812
|
+
box-shadow: none;
|
|
2813
|
+
border-radius: 50%;
|
|
2814
|
+
font-size: small;
|
|
2815
|
+
font-weight: 300;
|
|
2816
|
+
line-height: 1.5em;
|
|
2817
|
+
cursor: pointer;
|
|
2818
|
+
transition: background 0.3s ease-in-out;
|
|
2819
|
+
width: 40px;
|
|
2820
|
+
height: 40px;
|
|
2821
|
+
margin-top: -2px;
|
|
2822
|
+
margin-left: -5px;
|
|
2823
|
+
}
|
|
2824
|
+
|
|
2825
|
+
.side-panel-button {
|
|
2826
|
+
background: none;
|
|
2827
|
+
border: none;
|
|
2828
|
+
box-shadow: none;
|
|
2829
|
+
font-size: small;
|
|
2830
|
+
font-weight: 300;
|
|
2831
|
+
line-height: 1.5em;
|
|
2832
|
+
cursor: pointer;
|
|
2833
|
+
transition: background 0.3s ease-in-out;
|
|
2834
|
+
border-radius: 5%;;
|
|
2835
|
+
font-family: var(--font-family);
|
|
2836
|
+
}
|
|
2837
|
+
|
|
2838
|
+
svg#side-panel-collapse {
|
|
2839
|
+
width: 30px;
|
|
2840
|
+
height: 30px;
|
|
2841
|
+
}
|
|
2842
|
+
|
|
2843
|
+
.side-panel-button:hover,
|
|
2844
|
+
.input-row-button:hover {
|
|
2845
|
+
background: var(--primary-hover);
|
|
2846
|
+
}
|
|
2847
|
+
.side-panel-button:active,
|
|
2848
|
+
.input-row-button:active {
|
|
2849
|
+
background: var(--primary-active);
|
|
2850
|
+
}
|
|
2851
|
+
|
|
2852
|
+
.input-row-button-img {
|
|
2853
|
+
width: 24px;
|
|
2854
|
+
height: 24px;
|
|
2855
|
+
}
|
|
2856
|
+
#send-button {
|
|
2857
|
+
padding: 0;
|
|
2858
|
+
position: relative;
|
|
2859
|
+
}
|
|
2860
|
+
#send-button-img {
|
|
2861
|
+
width: 28px;
|
|
2862
|
+
height: 28px;
|
|
2863
|
+
background: var(--primary-hover);
|
|
2864
|
+
border-radius: 50%;
|
|
2865
|
+
}
|
|
2866
|
+
|
|
2867
|
+
#stop-send-button-img {
|
|
2868
|
+
position: absolute;
|
|
2869
|
+
top: 6px;
|
|
2870
|
+
right: 6px;
|
|
2871
|
+
width: 28px;
|
|
2872
|
+
height: 28px;
|
|
2873
|
+
transform: rotateY(-180deg) rotateZ(-90deg);
|
|
2874
|
+
}
|
|
2875
|
+
#countdown-circle {
|
|
2876
|
+
stroke-dasharray: 44px; /* The circumference of the circle with 7px radius */
|
|
2877
|
+
stroke-dashoffset: 0px;
|
|
2878
|
+
stroke-linecap: round;
|
|
2879
|
+
stroke-width: 1px;
|
|
2880
|
+
stroke: var(--main-text-color);
|
|
2881
|
+
fill: none;
|
|
2882
|
+
}
|
|
2883
|
+
@keyframes countdown {
|
|
2884
|
+
from {
|
|
2885
|
+
stroke-dashoffset: 0px;
|
|
2886
|
+
}
|
|
2887
|
+
to {
|
|
2888
|
+
stroke-dashoffset: -44px; /* The circumference of the circle with 7px radius */
|
|
2889
|
+
}
|
|
2890
|
+
}
|
|
2891
|
+
|
|
2892
|
+
.option-enabled {
|
|
2893
|
+
box-shadow: 0 0 12px rgb(119, 156, 46);
|
|
2894
|
+
}
|
|
2895
|
+
|
|
2896
|
+
.option-enabled:focus {
|
|
2897
|
+
outline: none !important;
|
|
2898
|
+
border:1px solid #475569;
|
|
2899
|
+
box-shadow: 0 0 16px var(--primary);
|
|
2900
|
+
}
|
|
2901
|
+
|
|
2902
|
+
a.inline-chat-link {
|
|
2903
|
+
color: var(--main-text-color);
|
|
2904
|
+
text-decoration: none;
|
|
2905
|
+
border-bottom: 1px dotted var(--main-text-color);
|
|
2906
|
+
}
|
|
2907
|
+
|
|
2908
|
+
a.reference-link {
|
|
2909
|
+
color: var(--main-text-color);
|
|
2910
|
+
border-bottom: 1px dotted var(--main-text-color);
|
|
2911
|
+
}
|
|
2912
|
+
|
|
2913
|
+
button.copy-button {
|
|
2914
|
+
border-radius: 4px;
|
|
2915
|
+
background-color: var(--background-color);
|
|
2916
|
+
border: 1px solid var(--main-text-color);
|
|
2917
|
+
text-align: center;
|
|
2918
|
+
font-size: medium;
|
|
2919
|
+
transition: all 0.5s;
|
|
2920
|
+
cursor: pointer;
|
|
2921
|
+
padding: 4px;
|
|
2922
|
+
float: right;
|
|
2923
|
+
}
|
|
2924
|
+
|
|
2925
|
+
img.speech-icon {
|
|
2926
|
+
width: 18px;
|
|
2927
|
+
}
|
|
2928
|
+
|
|
2929
|
+
button.thumbs-up-button,
|
|
2930
|
+
button.thumbs-down-button,
|
|
2931
|
+
button.speech-button {
|
|
2932
|
+
border-radius: 4px;
|
|
2933
|
+
background-color: var(--background-color);
|
|
2934
|
+
border: 1px solid var(--main-text-color);
|
|
2935
|
+
text-align: center;
|
|
2936
|
+
font-size: medium;
|
|
2937
|
+
transition: all 0.5s;
|
|
2938
|
+
cursor: pointer;
|
|
2939
|
+
padding: 4px;
|
|
2940
|
+
float: right;
|
|
2941
|
+
margin-right: 4px;
|
|
2942
|
+
}
|
|
2943
|
+
|
|
2944
|
+
button.copy-button span {
|
|
2945
|
+
cursor: pointer;
|
|
2946
|
+
display: inline-block;
|
|
2947
|
+
position: relative;
|
|
2948
|
+
transition: 0.5s;
|
|
2949
|
+
}
|
|
2950
|
+
|
|
2951
|
+
img.copy-icon {
|
|
2952
|
+
width: 18px;
|
|
2953
|
+
height: 18px;
|
|
2954
|
+
}
|
|
2955
|
+
|
|
2956
|
+
img.thumbs-up-icon {
|
|
2957
|
+
width: 18px;
|
|
2958
|
+
height: 18px;
|
|
2959
|
+
}
|
|
2960
|
+
|
|
2961
|
+
img.thumbs-down-icon {
|
|
2962
|
+
width: 18px;
|
|
2963
|
+
height: 18px;
|
|
2964
|
+
}
|
|
2965
|
+
|
|
2966
|
+
button.copy-button:hover,
|
|
2967
|
+
button.thumbs-up-button:hover,
|
|
2968
|
+
button.thumbs-down-button:hover,
|
|
2969
|
+
button.speech-button:hover {
|
|
2970
|
+
background-color: var(--primary-hover);
|
|
2971
|
+
color: #f5f5f5;
|
|
2972
|
+
}
|
|
2973
|
+
|
|
2974
|
+
|
|
2975
|
+
pre {
|
|
2976
|
+
text-wrap: unset;
|
|
2977
|
+
}
|
|
2978
|
+
|
|
2979
|
+
@media (pointer: coarse), (hover: none) {
|
|
2980
|
+
abbr[title] {
|
|
2981
|
+
position: relative;
|
|
2982
|
+
padding-left: 4px; /* space references out to ease tapping */
|
|
2983
|
+
}
|
|
2984
|
+
abbr[title]:focus:after {
|
|
2985
|
+
content: attr(title);
|
|
2986
|
+
|
|
2987
|
+
/* position tooltip */
|
|
2988
|
+
position: absolute;
|
|
2989
|
+
left: 16px; /* open tooltip to right of ref link, instead of on top of it */
|
|
2990
|
+
width: auto;
|
|
2991
|
+
z-index: 1; /* show tooltip above chat messages */
|
|
2992
|
+
|
|
2993
|
+
/* style tooltip */
|
|
2994
|
+
background-color: #aaa;
|
|
2995
|
+
color: #f8fafc;
|
|
2996
|
+
border-radius: 2px;
|
|
2997
|
+
box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.4);
|
|
2998
|
+
font-size: small;
|
|
2999
|
+
padding: 2px 4px;
|
|
3000
|
+
}
|
|
3001
|
+
}
|
|
3002
|
+
@media only screen and (max-width: 700px) {
|
|
3003
|
+
body {
|
|
3004
|
+
grid-template-columns: 1fr;
|
|
3005
|
+
grid-template-rows: auto auto minmax(80px, 100%) auto;
|
|
3006
|
+
}
|
|
3007
|
+
body > * {
|
|
3008
|
+
grid-column: 1;
|
|
3009
|
+
}
|
|
3010
|
+
#chat-footer {
|
|
3011
|
+
padding: 0;
|
|
3012
|
+
margin: 4px;
|
|
3013
|
+
grid-template-columns: auto;
|
|
3014
|
+
}
|
|
3015
|
+
img.text-to-image {
|
|
3016
|
+
max-width: 100%;
|
|
3017
|
+
}
|
|
3018
|
+
#clear-chat-button {
|
|
3019
|
+
margin-left: 0;
|
|
3020
|
+
}
|
|
3021
|
+
|
|
3022
|
+
div#side-panel.collapsed {
|
|
3023
|
+
width: 0px;
|
|
3024
|
+
display: block;
|
|
3025
|
+
overflow: hidden;
|
|
3026
|
+
padding: 0;
|
|
3027
|
+
}
|
|
3028
|
+
|
|
3029
|
+
svg#side-panel-collapse {
|
|
3030
|
+
width: 24px;
|
|
3031
|
+
height: 24px;
|
|
3032
|
+
}
|
|
3033
|
+
|
|
3034
|
+
#chat-body-wrapper {
|
|
3035
|
+
min-width: 0;
|
|
3036
|
+
}
|
|
3037
|
+
|
|
3038
|
+
div#chat-section-wrapper {
|
|
3039
|
+
padding: 4px;
|
|
3040
|
+
margin: 4px;
|
|
3041
|
+
grid-column-gap: 4px;
|
|
3042
|
+
}
|
|
3043
|
+
div#collapse-side-panel {
|
|
3044
|
+
align-self: center;
|
|
3045
|
+
padding: 0px;
|
|
3046
|
+
}
|
|
3047
|
+
}
|
|
3048
|
+
@media only screen and (min-width: 700px) {
|
|
3049
|
+
body {
|
|
3050
|
+
grid-template-columns: auto min(90vw, 100%) auto;
|
|
3051
|
+
grid-template-rows: auto auto minmax(80px, 100%) auto;
|
|
3052
|
+
}
|
|
3053
|
+
body > * {
|
|
3054
|
+
grid-column: 2;
|
|
3055
|
+
}
|
|
3056
|
+
}
|
|
3057
|
+
|
|
3058
|
+
div#chat-tooltip {
|
|
3059
|
+
text-align: left;
|
|
3060
|
+
font-size: medium;
|
|
3061
|
+
}
|
|
3062
|
+
div#chat-tooltip:hover {
|
|
3063
|
+
cursor: pointer;
|
|
3064
|
+
}
|
|
3065
|
+
|
|
3066
|
+
svg.new-convo-button {
|
|
3067
|
+
width: 20px;
|
|
3068
|
+
margin-left: 5px;
|
|
3069
|
+
margin-top: 2px;
|
|
3070
|
+
}
|
|
3071
|
+
|
|
3072
|
+
svg.file-toggle-button:hover {
|
|
3073
|
+
background: var(--primary-hover);
|
|
3074
|
+
cursor: pointer;
|
|
3075
|
+
}
|
|
3076
|
+
|
|
3077
|
+
div#new-conversation {
|
|
3078
|
+
display: grid;
|
|
3079
|
+
grid-auto-flow: column;
|
|
3080
|
+
grid-template-columns: 1fr auto;
|
|
3081
|
+
font-size: medium;
|
|
3082
|
+
text-align: left;
|
|
3083
|
+
border-bottom: 1px solid var(--main-text-color);
|
|
3084
|
+
margin-top: 8px;
|
|
3085
|
+
margin-bottom: 8px;
|
|
3086
|
+
}
|
|
3087
|
+
|
|
3088
|
+
button#copy-share-url-button,
|
|
3089
|
+
button#new-conversation-button {
|
|
3090
|
+
display: grid;
|
|
3091
|
+
grid-auto-flow: column;
|
|
3092
|
+
margin-top: 2px;
|
|
3093
|
+
}
|
|
3094
|
+
|
|
3095
|
+
div.conversation-button {
|
|
3096
|
+
background: var(--background-color);
|
|
3097
|
+
color: var(--main-text-color);
|
|
3098
|
+
border: 1px solid var(--main-text-color);
|
|
3099
|
+
border-radius: 5px;
|
|
3100
|
+
padding: 5px;
|
|
3101
|
+
font-size: small;
|
|
3102
|
+
font-weight: 300;
|
|
3103
|
+
line-height: 2em;
|
|
3104
|
+
cursor: pointer;
|
|
3105
|
+
transition: background 0.2s ease-in-out;
|
|
3106
|
+
text-align: left;
|
|
3107
|
+
display: flex;
|
|
3108
|
+
position: relative;
|
|
3109
|
+
margin-right: 8px;
|
|
3110
|
+
}
|
|
3111
|
+
|
|
3112
|
+
.three-dot-menu {
|
|
3113
|
+
display: block;
|
|
3114
|
+
border-radius: 5px;
|
|
3115
|
+
position: absolute;
|
|
3116
|
+
right: 4px;
|
|
3117
|
+
top: 4px;
|
|
3118
|
+
}
|
|
3119
|
+
|
|
3120
|
+
button.three-dot-menu-button-item {
|
|
3121
|
+
background: var(--background-color);
|
|
3122
|
+
color: var(--main-text-color);
|
|
3123
|
+
border: none;
|
|
3124
|
+
box-shadow: none;
|
|
3125
|
+
font-size: 14px;
|
|
3126
|
+
font-weight: 300;
|
|
3127
|
+
line-height: 1.5em;
|
|
3128
|
+
cursor: pointer;
|
|
3129
|
+
transition: background 0.3s ease-in-out;
|
|
3130
|
+
font-family: var(--font-family);
|
|
3131
|
+
border-radius: 4px;
|
|
3132
|
+
right: 0;
|
|
3133
|
+
}
|
|
3134
|
+
|
|
3135
|
+
button.three-dot-menu-button-item:hover {
|
|
3136
|
+
background: var(--primary-hover);
|
|
3137
|
+
color: var(--primary-inverse);
|
|
3138
|
+
}
|
|
3139
|
+
|
|
3140
|
+
.three-dot-menu-button {
|
|
3141
|
+
background: var(--background-color);
|
|
3142
|
+
border: none;
|
|
3143
|
+
box-shadow: none;
|
|
3144
|
+
font-size: 14px;
|
|
3145
|
+
font-weight: 300;
|
|
3146
|
+
line-height: 1.5em;
|
|
3147
|
+
cursor: pointer;
|
|
3148
|
+
transition: background 0.3s ease-in-out;
|
|
3149
|
+
font-family: var(--font-family);
|
|
3150
|
+
border-radius: 4px;
|
|
3151
|
+
right: 0;
|
|
3152
|
+
}
|
|
3153
|
+
|
|
3154
|
+
.conversation-button:hover .three-dot-menu {
|
|
3155
|
+
display: block;
|
|
3156
|
+
}
|
|
3157
|
+
|
|
3158
|
+
div.conversation-menu {
|
|
3159
|
+
position: absolute;
|
|
3160
|
+
z-index: 1;
|
|
3161
|
+
top: 100%;
|
|
3162
|
+
right: 0;
|
|
3163
|
+
text-align: right;
|
|
3164
|
+
background-color: var(--background-color);
|
|
3165
|
+
border: 1px solid var(--main-text-color);
|
|
3166
|
+
border-radius: 5px;
|
|
3167
|
+
padding: 5px;
|
|
3168
|
+
box-shadow: 0 0 11px #aaa;
|
|
3169
|
+
}
|
|
3170
|
+
|
|
3171
|
+
div.conversation-button:hover {
|
|
3172
|
+
background: var(--primary-hover);
|
|
3173
|
+
color: var(--primary-inverse);
|
|
3174
|
+
}
|
|
3175
|
+
|
|
3176
|
+
div.selected-conversation {
|
|
3177
|
+
background: var(--primary-hover) !important;
|
|
3178
|
+
color: var(--primary-inverse) !important;
|
|
3179
|
+
}
|
|
3180
|
+
|
|
3181
|
+
@keyframes gradient {
|
|
3182
|
+
0% {
|
|
3183
|
+
background-position: 0% 50%;
|
|
3184
|
+
}
|
|
3185
|
+
50% {
|
|
3186
|
+
background-position: 100% 50%;
|
|
3187
|
+
}
|
|
3188
|
+
100% {
|
|
3189
|
+
background-position: 0% 50%;
|
|
3190
|
+
}
|
|
3191
|
+
}
|
|
3192
|
+
|
|
3193
|
+
#connection-status {
|
|
3194
|
+
display: grid;
|
|
3195
|
+
grid-auto-flow: column;
|
|
3196
|
+
grid-template-columns: auto 1fr;
|
|
3197
|
+
align-items: center;
|
|
3198
|
+
border-top: 1px solid black;
|
|
3199
|
+
}
|
|
3200
|
+
#connection-status-icon {
|
|
3201
|
+
width: 10px;
|
|
3202
|
+
height: 10px;
|
|
3203
|
+
border-radius: 50%;
|
|
3204
|
+
margin-right: 5px;
|
|
3205
|
+
}
|
|
3206
|
+
#connection-status-text {
|
|
3207
|
+
margin: 5px;
|
|
3208
|
+
}
|
|
3209
|
+
|
|
3210
|
+
a.khoj-logo {
|
|
3211
|
+
text-align: center;
|
|
3212
|
+
}
|
|
3213
|
+
|
|
3214
|
+
div.khoj-empty-container {
|
|
3215
|
+
margin: 0px;
|
|
3216
|
+
padding: 0px;
|
|
3217
|
+
}
|
|
3218
|
+
|
|
3219
|
+
p {
|
|
3220
|
+
margin: 0;
|
|
3221
|
+
}
|
|
3222
|
+
|
|
3223
|
+
div.programmatic-output {
|
|
3224
|
+
background-color: #f5f5f5;
|
|
3225
|
+
border: 1px solid #ddd;
|
|
3226
|
+
border-radius: 3px;
|
|
3227
|
+
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
|
|
3228
|
+
color: #333;
|
|
3229
|
+
font-family: monospace;
|
|
3230
|
+
font-size: 14px;
|
|
3231
|
+
line-height: 1.5;
|
|
3232
|
+
margin: 10px 0;
|
|
3233
|
+
overflow-x: auto;
|
|
3234
|
+
padding: 10px;
|
|
3235
|
+
white-space: pre-wrap;
|
|
3236
|
+
}
|
|
3237
|
+
|
|
3238
|
+
.loader {
|
|
3239
|
+
width: 18px;
|
|
3240
|
+
height: 18px;
|
|
3241
|
+
border: 3px solid #FFF;
|
|
3242
|
+
border-radius: 50%;
|
|
3243
|
+
display: inline-block;
|
|
3244
|
+
position: relative;
|
|
3245
|
+
box-sizing: border-box;
|
|
3246
|
+
animation: rotation 1s linear infinite;
|
|
3247
|
+
}
|
|
3248
|
+
.loader::after {
|
|
3249
|
+
content: '';
|
|
3250
|
+
box-sizing: border-box;
|
|
3251
|
+
position: absolute;
|
|
3252
|
+
left: 50%;
|
|
3253
|
+
top: 50%;
|
|
3254
|
+
transform: translate(-50%, -50%);
|
|
3255
|
+
width: 18px;
|
|
3256
|
+
height: 18px;
|
|
3257
|
+
border-radius: 50%;
|
|
3258
|
+
border: 3px solid transparent;
|
|
3259
|
+
border-bottom-color: var(--flower);
|
|
3260
|
+
}
|
|
3261
|
+
|
|
3262
|
+
@keyframes rotation {
|
|
3263
|
+
0% {
|
|
3264
|
+
transform: rotate(0deg);
|
|
3265
|
+
}
|
|
3266
|
+
100% {
|
|
3267
|
+
transform: rotate(360deg);
|
|
3268
|
+
}
|
|
3269
|
+
}
|
|
3270
|
+
|
|
3271
|
+
|
|
3272
|
+
.loading-spinner {
|
|
3273
|
+
display: inline-block;
|
|
3274
|
+
position: relative;
|
|
3275
|
+
width: 80px;
|
|
3276
|
+
height: 80px;
|
|
3277
|
+
}
|
|
3278
|
+
.loading-spinner div {
|
|
3279
|
+
position: absolute;
|
|
3280
|
+
border: 4px solid var(--primary-hover);
|
|
3281
|
+
opacity: 1;
|
|
3282
|
+
border-radius: 50%;
|
|
3283
|
+
animation: lds-ripple 0.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
|
|
3284
|
+
}
|
|
3285
|
+
.loading-spinner div:nth-child(2) {
|
|
3286
|
+
animation-delay: -0.5s;
|
|
3287
|
+
}
|
|
3288
|
+
@keyframes lds-ripple {
|
|
3289
|
+
0% {
|
|
3290
|
+
top: 36px;
|
|
3291
|
+
left: 36px;
|
|
3292
|
+
width: 0;
|
|
3293
|
+
height: 0;
|
|
3294
|
+
opacity: 1;
|
|
3295
|
+
border-color: var(--primary-hover);
|
|
3296
|
+
}
|
|
3297
|
+
50% {
|
|
3298
|
+
border-color: var(--flower);
|
|
3299
|
+
}
|
|
3300
|
+
100% {
|
|
3301
|
+
top: 0px;
|
|
3302
|
+
left: 0px;
|
|
3303
|
+
width: 72px;
|
|
3304
|
+
height: 72px;
|
|
3305
|
+
opacity: 0;
|
|
3306
|
+
border-color: var(--water);
|
|
3307
|
+
}
|
|
3308
|
+
}
|
|
3309
|
+
|
|
3310
|
+
#agent-metadata-content {
|
|
3311
|
+
display: grid;
|
|
3312
|
+
grid-template-columns: auto 1fr;
|
|
3313
|
+
padding: 10px;
|
|
3314
|
+
background-color: var(--primary);
|
|
3315
|
+
border-radius: 5px;
|
|
3316
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
|
3317
|
+
margin-bottom: 20px;
|
|
3318
|
+
}
|
|
3319
|
+
|
|
3320
|
+
#agent-metadata {
|
|
3321
|
+
border-top: 1px solid black;
|
|
3322
|
+
padding-top: 10px;
|
|
3323
|
+
}
|
|
3324
|
+
|
|
3325
|
+
#agent-avatar-wrapper {
|
|
3326
|
+
margin-right: 10px;
|
|
3327
|
+
}
|
|
3328
|
+
|
|
3329
|
+
#agent-avatar {
|
|
3330
|
+
width: 50px;
|
|
3331
|
+
height: 50px;
|
|
3332
|
+
border-radius: 50%;
|
|
3333
|
+
object-fit: cover;
|
|
3334
|
+
}
|
|
3335
|
+
|
|
3336
|
+
#agent-name-wrapper {
|
|
3337
|
+
display: grid;
|
|
3338
|
+
align-items: center;
|
|
3339
|
+
}
|
|
3340
|
+
|
|
3341
|
+
#agent-name {
|
|
3342
|
+
font-size: 18px;
|
|
3343
|
+
font-weight: bold;
|
|
3344
|
+
color: #333;
|
|
3345
|
+
}
|
|
3346
|
+
|
|
3347
|
+
#agent-owned-by-user {
|
|
3348
|
+
font-size: 12px;
|
|
3349
|
+
color: #007BFF;
|
|
3350
|
+
margin-top: 5px;
|
|
3351
|
+
}
|
|
3352
|
+
|
|
3353
|
+
.modal {
|
|
3354
|
+
position: fixed; /* Stay in place */
|
|
3355
|
+
z-index: 1; /* Sit on top */
|
|
3356
|
+
left: 0;
|
|
3357
|
+
top: 0;
|
|
3358
|
+
width: 100%; /* Full width */
|
|
3359
|
+
height: 100%; /* Full height */
|
|
3360
|
+
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
|
|
3361
|
+
margin: 0px;
|
|
3362
|
+
}
|
|
3363
|
+
|
|
3364
|
+
.modal-content {
|
|
3365
|
+
margin: 15% auto; /* 15% from the top and centered */
|
|
3366
|
+
padding: 20px;
|
|
3367
|
+
border: 1px solid #888;
|
|
3368
|
+
width: 300px;
|
|
3369
|
+
text-align: left;
|
|
3370
|
+
background: var(--background-color);
|
|
3371
|
+
border-radius: 5px;
|
|
3372
|
+
box-shadow: 0 0 11px #aaa;
|
|
3373
|
+
text-align: left;
|
|
3374
|
+
}
|
|
3375
|
+
|
|
3376
|
+
.modal-header {
|
|
3377
|
+
display: grid;
|
|
3378
|
+
grid-template-columns: 1fr auto;
|
|
3379
|
+
color: var(--main-text-color);
|
|
3380
|
+
align-items: baseline;
|
|
3381
|
+
}
|
|
3382
|
+
|
|
3383
|
+
.modal-header h2 {
|
|
3384
|
+
margin: 0;
|
|
3385
|
+
text-align: left;
|
|
3386
|
+
}
|
|
3387
|
+
|
|
3388
|
+
.modal-body {
|
|
3389
|
+
display: grid;
|
|
3390
|
+
grid-auto-flow: row;
|
|
3391
|
+
gap: 8px;
|
|
3392
|
+
}
|
|
3393
|
+
|
|
3394
|
+
.modal-body a {
|
|
3395
|
+
/* text-decoration: none; */
|
|
3396
|
+
color: var(--summer-sun);
|
|
3397
|
+
}
|
|
3398
|
+
|
|
3399
|
+
.modal-close-button {
|
|
3400
|
+
margin: 0;
|
|
3401
|
+
font-size: 20px;
|
|
3402
|
+
background: none;
|
|
3403
|
+
border: none;
|
|
3404
|
+
color: var(--summer-sun);
|
|
3405
|
+
}
|
|
3406
|
+
|
|
3407
|
+
.modal-close-button:hover,
|
|
3408
|
+
.modal-close-button:focus {
|
|
3409
|
+
color: #000;
|
|
3410
|
+
text-decoration: none;
|
|
3411
|
+
cursor: pointer;
|
|
3412
|
+
}
|
|
3413
|
+
|
|
3414
|
+
#new-conversation-form {
|
|
3415
|
+
display: flex;
|
|
3416
|
+
flex-direction: column;
|
|
3417
|
+
}
|
|
3418
|
+
|
|
3419
|
+
#new-conversation-form label,
|
|
3420
|
+
#new-conversation-form input,
|
|
3421
|
+
#new-conversation-form button {
|
|
3422
|
+
margin-bottom: 10px;
|
|
3423
|
+
}
|
|
3424
|
+
|
|
3425
|
+
#new-conversation-form button {
|
|
3426
|
+
cursor: pointer;
|
|
3427
|
+
}
|
|
3428
|
+
|
|
3429
|
+
.modal-footer {
|
|
3430
|
+
display: grid;
|
|
3431
|
+
grid-template-columns: 1fr 1fr;
|
|
3432
|
+
grid-gap: 12px;
|
|
3433
|
+
}
|
|
3434
|
+
|
|
3435
|
+
.modal-body button {
|
|
3436
|
+
cursor: pointer;
|
|
3437
|
+
border-radius: 12px;
|
|
3438
|
+
padding: 8px;
|
|
3439
|
+
border: 1px solid var(--main-text-color);
|
|
3440
|
+
}
|
|
3441
|
+
|
|
3442
|
+
.share-link {
|
|
3443
|
+
display: block;
|
|
3444
|
+
width: 100%;
|
|
3445
|
+
padding: 10px;
|
|
3446
|
+
margin-top: 10px;
|
|
3447
|
+
border: 1px solid #ccc;
|
|
3448
|
+
border-radius: 4px;
|
|
3449
|
+
background-color: #f9f9f9;
|
|
3450
|
+
font-family: 'Courier New', monospace;
|
|
3451
|
+
color: #333;
|
|
3452
|
+
font-size: 16px;
|
|
3453
|
+
box-sizing: border-box;
|
|
3454
|
+
transition: all 0.3s ease;
|
|
3455
|
+
}
|
|
3456
|
+
|
|
3457
|
+
.share-link:focus {
|
|
3458
|
+
outline: none;
|
|
3459
|
+
border-color: #007BFF;
|
|
3460
|
+
box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
|
|
3461
|
+
}
|
|
3462
|
+
|
|
3463
|
+
button#copy-share-url-button,
|
|
3464
|
+
button#new-conversation-submit-button {
|
|
3465
|
+
background: var(--summer-sun);
|
|
3466
|
+
transition: background 0.2s ease-in-out;
|
|
3467
|
+
}
|
|
3468
|
+
|
|
3469
|
+
button#close-button {
|
|
3470
|
+
background: var(--background-color);
|
|
3471
|
+
transition: background 0.2s ease-in-out;
|
|
3472
|
+
}
|
|
3473
|
+
|
|
3474
|
+
button#copy-share-url-button:hover,
|
|
3475
|
+
button#new-conversation-submit-button:hover {
|
|
3476
|
+
background: var(--primary);
|
|
3477
|
+
}
|
|
3478
|
+
|
|
3479
|
+
button#close-button:hover {
|
|
3480
|
+
background: var(--primary-hover);
|
|
3481
|
+
}
|
|
3482
|
+
|
|
3483
|
+
.modal-body select {
|
|
3484
|
+
padding: 8px;
|
|
3485
|
+
border-radius: 12px;
|
|
3486
|
+
border: 1px solid var(--main-text-color);
|
|
3487
|
+
}
|
|
3488
|
+
|
|
3489
|
+
|
|
3490
|
+
.lds-ellipsis {
|
|
3491
|
+
display: inline-block;
|
|
3492
|
+
position: relative;
|
|
3493
|
+
width: 60px;
|
|
3494
|
+
height: 32px;
|
|
3495
|
+
}
|
|
3496
|
+
.lds-ellipsis div {
|
|
3497
|
+
position: absolute;
|
|
3498
|
+
top: 12px;
|
|
3499
|
+
width: 8px;
|
|
3500
|
+
height: 8px;
|
|
3501
|
+
border-radius: 50%;
|
|
3502
|
+
background: var(--main-text-color);
|
|
3503
|
+
animation-timing-function: cubic-bezier(0, 1, 1, 0);
|
|
3504
|
+
}
|
|
3505
|
+
.lds-ellipsis div:nth-child(1) {
|
|
3506
|
+
left: 8px;
|
|
3507
|
+
animation: lds-ellipsis1 0.6s infinite;
|
|
3508
|
+
}
|
|
3509
|
+
.lds-ellipsis div:nth-child(2) {
|
|
3510
|
+
left: 8px;
|
|
3511
|
+
animation: lds-ellipsis2 0.6s infinite;
|
|
3512
|
+
}
|
|
3513
|
+
.lds-ellipsis div:nth-child(3) {
|
|
3514
|
+
left: 32px;
|
|
3515
|
+
animation: lds-ellipsis2 0.6s infinite;
|
|
3516
|
+
}
|
|
3517
|
+
.lds-ellipsis div:nth-child(4) {
|
|
3518
|
+
left: 56px;
|
|
3519
|
+
animation: lds-ellipsis3 0.6s infinite;
|
|
3520
|
+
}
|
|
3521
|
+
@keyframes lds-ellipsis1 {
|
|
3522
|
+
0% {
|
|
3523
|
+
transform: scale(0);
|
|
3524
|
+
}
|
|
3525
|
+
100% {
|
|
3526
|
+
transform: scale(1);
|
|
3527
|
+
}
|
|
3528
|
+
}
|
|
3529
|
+
@keyframes lds-ellipsis3 {
|
|
3530
|
+
0% {
|
|
3531
|
+
transform: scale(1);
|
|
3532
|
+
}
|
|
3533
|
+
100% {
|
|
3534
|
+
transform: scale(0);
|
|
3535
|
+
}
|
|
3536
|
+
}
|
|
3537
|
+
@keyframes lds-ellipsis2 {
|
|
3538
|
+
0% {
|
|
3539
|
+
transform: translate(0, 0);
|
|
3540
|
+
}
|
|
3541
|
+
100% {
|
|
3542
|
+
transform: translate(24px, 0);
|
|
3543
|
+
}
|
|
3544
|
+
}
|
|
3545
|
+
</style>
|
|
3546
|
+
</html>
|