Adjust the directory structure to prepare for merging into Master.
This commit is contained in:
Liu Zhicong
tsukasa
@@ -0,0 +1,412 @@
|
||||
:root {
|
||||
--side-bar-bg-color: #fafafa;
|
||||
--control-text-color: #777;
|
||||
}
|
||||
|
||||
@include-when-export url(https://fonts.loli.net/css?family=Open+Sans:400italic,700italic,700,400&subset=latin,latin-ext);
|
||||
|
||||
/* open-sans-regular - latin-ext_latin */
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
src: local('Open Sans Regular'), local('OpenSans-Regular'), url('./github/open-sans-v17-latin-ext_latin-regular.woff2') format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* open-sans-italic - latin-ext_latin */
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
src: local('Open Sans Italic'), local('OpenSans-Italic'), url('./github/open-sans-v17-latin-ext_latin-italic.woff2') format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* open-sans-700 - latin-ext_latin */
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
src: local('Open Sans Bold'), local('OpenSans-Bold'), url('./github/open-sans-v17-latin-ext_latin-700.woff2') format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* open-sans-700italic - latin-ext_latin */
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url('./github/open-sans-v17-latin-ext_latin-700italic.woff2') format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 16px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Open Sans","Clear Sans", "Helvetica Neue", Helvetica, Arial, 'Segoe UI Emoji', sans-serif;
|
||||
color: rgb(51, 51, 51);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
#write {
|
||||
max-width: 860px;
|
||||
margin: 0 auto;
|
||||
padding: 30px;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1400px) {
|
||||
#write {
|
||||
max-width: 1024px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1800px) {
|
||||
#write {
|
||||
max-width: 1200px;
|
||||
}
|
||||
}
|
||||
|
||||
#write > ul:first-child,
|
||||
#write > ol:first-child{
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #4183C4;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
position: relative;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
font-weight: bold;
|
||||
line-height: 1.4;
|
||||
cursor: text;
|
||||
}
|
||||
h1:hover a.anchor,
|
||||
h2:hover a.anchor,
|
||||
h3:hover a.anchor,
|
||||
h4:hover a.anchor,
|
||||
h5:hover a.anchor,
|
||||
h6:hover a.anchor {
|
||||
text-decoration: none;
|
||||
}
|
||||
h1 tt,
|
||||
h1 code {
|
||||
font-size: inherit;
|
||||
}
|
||||
h2 tt,
|
||||
h2 code {
|
||||
font-size: inherit;
|
||||
}
|
||||
h3 tt,
|
||||
h3 code {
|
||||
font-size: inherit;
|
||||
}
|
||||
h4 tt,
|
||||
h4 code {
|
||||
font-size: inherit;
|
||||
}
|
||||
h5 tt,
|
||||
h5 code {
|
||||
font-size: inherit;
|
||||
}
|
||||
h6 tt,
|
||||
h6 code {
|
||||
font-size: inherit;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2.25em;
|
||||
line-height: 1.2;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.75em;
|
||||
line-height: 1.225;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
/*@media print {
|
||||
.typora-export h1,
|
||||
.typora-export h2 {
|
||||
border-bottom: none;
|
||||
padding-bottom: initial;
|
||||
}
|
||||
|
||||
.typora-export h1::after,
|
||||
.typora-export h2::after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 100px;
|
||||
margin-top: -96px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
}*/
|
||||
|
||||
h3 {
|
||||
font-size: 1.5em;
|
||||
line-height: 1.43;
|
||||
}
|
||||
h4 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
h5 {
|
||||
font-size: 1em;
|
||||
}
|
||||
h6 {
|
||||
font-size: 1em;
|
||||
color: #777;
|
||||
}
|
||||
p,
|
||||
blockquote,
|
||||
ul,
|
||||
ol,
|
||||
dl,
|
||||
table{
|
||||
margin: 0.8em 0;
|
||||
}
|
||||
li>ol,
|
||||
li>ul {
|
||||
margin: 0 0;
|
||||
}
|
||||
hr {
|
||||
height: 2px;
|
||||
padding: 0;
|
||||
margin: 16px 0;
|
||||
background-color: #e7e7e7;
|
||||
border: 0 none;
|
||||
overflow: hidden;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
li p.first {
|
||||
display: inline-block;
|
||||
}
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 30px;
|
||||
}
|
||||
ul:first-child,
|
||||
ol:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
ul:last-child,
|
||||
ol:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
blockquote {
|
||||
border-left: 4px solid #dfe2e5;
|
||||
padding: 0 15px;
|
||||
color: #777777;
|
||||
}
|
||||
blockquote blockquote {
|
||||
padding-right: 0;
|
||||
}
|
||||
table {
|
||||
padding: 0;
|
||||
word-break: initial;
|
||||
}
|
||||
table tr {
|
||||
border: 1px solid #dfe2e5;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
table tr:nth-child(2n),
|
||||
thead {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
table th {
|
||||
font-weight: bold;
|
||||
border: 1px solid #dfe2e5;
|
||||
border-bottom: 0;
|
||||
margin: 0;
|
||||
padding: 6px 13px;
|
||||
}
|
||||
table td {
|
||||
border: 1px solid #dfe2e5;
|
||||
margin: 0;
|
||||
padding: 6px 13px;
|
||||
}
|
||||
table th:first-child,
|
||||
table td:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
table th:last-child,
|
||||
table td:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.CodeMirror-lines {
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.code-tooltip {
|
||||
box-shadow: 0 1px 1px 0 rgba(0,28,36,.3);
|
||||
border-top: 1px solid #eef2f2;
|
||||
}
|
||||
|
||||
.md-fences,
|
||||
code,
|
||||
tt {
|
||||
border: 1px solid #e7eaed;
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 3px;
|
||||
padding: 0;
|
||||
padding: 2px 4px 0px 4px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: #f3f4f4;
|
||||
padding: 0 2px 0 2px;
|
||||
}
|
||||
|
||||
.md-fences {
|
||||
margin-bottom: 15px;
|
||||
margin-top: 15px;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
|
||||
.md-task-list-item > input {
|
||||
margin-left: -1.3em;
|
||||
}
|
||||
|
||||
@media print {
|
||||
html {
|
||||
font-size: 13px;
|
||||
}
|
||||
pre {
|
||||
page-break-inside: avoid;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
.md-fences {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
#write pre.md-meta-block {
|
||||
padding: 1rem;
|
||||
font-size: 85%;
|
||||
line-height: 1.45;
|
||||
background-color: #f7f7f7;
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
color: #777777;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.mathjax-block>.code-tooltip {
|
||||
bottom: .375rem;
|
||||
}
|
||||
|
||||
.md-mathjax-midline {
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
#write>h3.md-focus:before{
|
||||
left: -1.5625rem;
|
||||
top: .375rem;
|
||||
}
|
||||
#write>h4.md-focus:before{
|
||||
left: -1.5625rem;
|
||||
top: .285714286rem;
|
||||
}
|
||||
#write>h5.md-focus:before{
|
||||
left: -1.5625rem;
|
||||
top: .285714286rem;
|
||||
}
|
||||
#write>h6.md-focus:before{
|
||||
left: -1.5625rem;
|
||||
top: .285714286rem;
|
||||
}
|
||||
.md-image>.md-meta {
|
||||
/*border: 1px solid #ddd;*/
|
||||
border-radius: 3px;
|
||||
padding: 2px 0px 0px 4px;
|
||||
font-size: 0.9em;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.md-tag {
|
||||
color: #a7a7a7;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.md-toc {
|
||||
margin-top:20px;
|
||||
padding-bottom:20px;
|
||||
}
|
||||
|
||||
.sidebar-tabs {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
#typora-quick-open {
|
||||
border: 1px solid #ddd;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
#typora-quick-open-item {
|
||||
background-color: #FAFAFA;
|
||||
border-color: #FEFEFE #e5e5e5 #e5e5e5 #eee;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
/** focus mode */
|
||||
.on-focus-mode blockquote {
|
||||
border-left-color: rgba(85, 85, 85, 0.12);
|
||||
}
|
||||
|
||||
header, .context-menu, .megamenu-content, footer{
|
||||
font-family: "Segoe UI", "Arial", sans-serif;
|
||||
}
|
||||
|
||||
.file-node-content:hover .file-node-icon,
|
||||
.file-node-content:hover .file-node-open-state{
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.mac-seamless-mode #typora-sidebar {
|
||||
background-color: #fafafa;
|
||||
background-color: var(--side-bar-bg-color);
|
||||
}
|
||||
|
||||
.md-lang {
|
||||
color: #b4654d;
|
||||
}
|
||||
|
||||
/*.html-for-mac {
|
||||
--item-hover-bg-color: #E6F0FE;
|
||||
}*/
|
||||
|
||||
#md-notification .btn {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.dropdown-menu .divider {
|
||||
border-color: #e5e5e5;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.ty-preferences .window-content {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.ty-preferences .nav-group-item.active {
|
||||
color: white;
|
||||
background: #999;
|
||||
}
|
||||
|
||||
.menu-item-container a.menu-style-btn {
|
||||
background-color: #f5f8fa;
|
||||
background-image: linear-gradient( 180deg , hsla(0, 0%, 100%, 0.8), hsla(0, 0%, 100%, 0));
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
pre code {
|
||||
display: block;
|
||||
white-space: break-spaces;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#app-wrap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#messages {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#status {
|
||||
}
|
||||
|
||||
#bottom_bar {
|
||||
display: flex;
|
||||
flex-basis: 56px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#bottom_bar {
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
padding: 0.25rem;
|
||||
box-sizing: border-box;
|
||||
backdrop-filter: blur(1px);
|
||||
}
|
||||
|
||||
#status {
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
color: #300000;
|
||||
}
|
||||
|
||||
#form {
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
padding: 0.25rem;
|
||||
display: flex;
|
||||
height: 3rem;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
backdrop-filter: blur(1px);
|
||||
}
|
||||
#input {
|
||||
border: none;
|
||||
padding: 0 1rem;
|
||||
flex-grow: 1;
|
||||
border-radius: 2rem;
|
||||
margin: 0.25rem;
|
||||
}
|
||||
#input:focus {
|
||||
outline: none;
|
||||
}
|
||||
#form > button {
|
||||
background: #333;
|
||||
border: none;
|
||||
padding: 0 1rem;
|
||||
margin: 0.25rem;
|
||||
border-radius: 3px;
|
||||
outline: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#messages {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
#messages > li {
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
/* #messages > li:nth-child(odd) {
|
||||
background: #efefef;
|
||||
} */
|
||||
.align_right {
|
||||
text-align: right;
|
||||
background: #efefef;
|
||||
}
|
||||
|
||||
.alarm_table {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.alarm_table td,
|
||||
.alarm_table th {
|
||||
border: 1px solid #ddd;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.alarm_table tr:nth-child(even) {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
/* .alarm_table tr:hover {background-color: #ddd;} */
|
||||
|
||||
.alarm_table th {
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
text-align: left;
|
||||
background-color: #4caf50;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.replied-img {
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-height: 400px;
|
||||
max-width: 100%;
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Socket.IO chat</title>
|
||||
<link rel="stylesheet" href="./css/main.css">
|
||||
<link rel="stylesheet" href="/css/github.css">
|
||||
<script src="/js/showdown.min.js"></script>
|
||||
<script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app-wrap">
|
||||
<ul id="messages"></ul>
|
||||
<div id="status"></div>
|
||||
<div id="bottom_bar">
|
||||
<div id="form">
|
||||
<input id="input" autocomplete="off" placeholder="Drag an image here to send image" />
|
||||
<button id="send_button">Send</button>
|
||||
<button id="reset_button">ClearMemory</button>
|
||||
<button id="test_button">AutoTest</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./js/main.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,222 @@
|
||||
(() => {
|
||||
// Utils
|
||||
function scrollElementToEnd(ele) {
|
||||
ele.scrollTop = ele.scrollHeight;
|
||||
}
|
||||
|
||||
let messageIdCounter = 0;
|
||||
function makeChatMessage(messageContent, messageType) {
|
||||
return JSON.stringify({
|
||||
user: {
|
||||
id: "FakeUserID",
|
||||
},
|
||||
chat: {
|
||||
id: "FakeChatID",
|
||||
},
|
||||
message: {
|
||||
type: messageType,
|
||||
content: messageContent,
|
||||
id: `FakeMessageID_${messageIdCounter++}`,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
let socketIoAddr = document.location.origin;
|
||||
let socket = io(socketIoAddr);
|
||||
let status = document.getElementById("status");
|
||||
let input = document.getElementById("input");
|
||||
let sendButton = document.getElementById("send_button");
|
||||
let resetButton = document.getElementById("reset_button");
|
||||
let testButton = document.getElementById("test_button");
|
||||
|
||||
let testContentArray = [
|
||||
"What's the date today?",
|
||||
"Who are you?",
|
||||
"What technology are you based on?",
|
||||
"Generate a picture of a panda.",
|
||||
"I need the panda in a house.",
|
||||
"Tell me about the newest videos of @tiabtc.",
|
||||
"Give me a summary of the latest video above.",
|
||||
"What this video is talking about: https://www.youtube.com/watch?v=HtcPWORWJ1U",
|
||||
"Remind me to go shopping tomorrow 6pm.",
|
||||
"What reminders do I currently have?",
|
||||
"Tweet out: Hello, this is a message from AI.",
|
||||
]
|
||||
const mdCvt = new showdown.Converter({
|
||||
tables: true,
|
||||
});
|
||||
|
||||
function appendChatItem(who, msg) {
|
||||
let item = document.createElement("li");
|
||||
if (who == "me") {
|
||||
item.classList.add("align_right");
|
||||
}
|
||||
item.innerHTML = msg;
|
||||
messages.appendChild(item);
|
||||
scrollElementToEnd(messages);
|
||||
}
|
||||
|
||||
let isProcessing = false;
|
||||
let notification = "";
|
||||
function startProcessing() {
|
||||
notification = "";
|
||||
isProcessing = true;
|
||||
|
||||
let dotCount = 0;
|
||||
|
||||
scrollElementToEnd(messages);
|
||||
|
||||
let inter = setInterval(() => {
|
||||
if (!isProcessing) {
|
||||
status.classList.add("hidden");
|
||||
clearInterval(inter);
|
||||
return;
|
||||
}
|
||||
status.classList.remove("hidden");
|
||||
status.innerHTML = notification;
|
||||
if (notification.length > 0) {
|
||||
status.innerHTML += "<br/>";
|
||||
}
|
||||
status.innerHTML += "Processing";
|
||||
for (let i = 0; i < dotCount; ++i) {
|
||||
status.innerHTML += ".";
|
||||
}
|
||||
dotCount += 1;
|
||||
if (dotCount == 4) {
|
||||
dotCount = 0;
|
||||
}
|
||||
}, 500);
|
||||
}
|
||||
function stopProcessing() {
|
||||
isProcessing = false;
|
||||
}
|
||||
|
||||
socket.on("chat_message", (msg) => {
|
||||
if (typeof(msg) !== 'object') {
|
||||
console.log("Expecting object, got: ", msg);
|
||||
return;
|
||||
}
|
||||
let msgType = msg.message.type;
|
||||
let msgContent = msg.message.content;
|
||||
switch (msgType) {
|
||||
case "text":
|
||||
msgContent = msgContent.replaceAll('\n', '<br/>');
|
||||
console.log("text message: " + msgContent);
|
||||
appendChatItem("remote", msgContent);
|
||||
break;
|
||||
case "image": {
|
||||
var item = document.createElement("li");
|
||||
item.innerHTML = `<img src="data:image/png;base64,${msgContent}" alt="Image" class="replied-img">`;
|
||||
messages.appendChild(item);
|
||||
scrollElementToEnd(messages);
|
||||
break;
|
||||
}
|
||||
case "markdown": {
|
||||
const item = document.createElement("li");
|
||||
console.log(msgContent);
|
||||
item.innerHTML = mdCvt.makeHtml(msgContent);
|
||||
messages.appendChild(item);
|
||||
scrollElementToEnd(messages);
|
||||
break;
|
||||
}
|
||||
case "notification": {
|
||||
notification = msgContent;
|
||||
break;
|
||||
}
|
||||
case "end": {
|
||||
stopProcessing();
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
socket.on("connect", () => {
|
||||
let tzOffset = `${-new Date().getTimezoneOffset()/60}`;
|
||||
socket.emit("chat_message", makeChatMessage(tzOffset, 'set_ts_offset'));
|
||||
});
|
||||
socket.on("disconnect", (reason) => {
|
||||
console.log("Disconnect due to: ", reason)
|
||||
});
|
||||
|
||||
function submitMessage() {
|
||||
if (input.value) {
|
||||
socket.emit(
|
||||
"chat_message",
|
||||
makeChatMessage(input.value, 'text')
|
||||
);
|
||||
appendChatItem("me", input.value);
|
||||
startProcessing();
|
||||
input.value = "";
|
||||
}
|
||||
}
|
||||
sendButton.addEventListener('click', function (e) {
|
||||
submitMessage();
|
||||
});
|
||||
resetButton.addEventListener('click', function(e) {
|
||||
socket.emit('chat_message', makeChatMessage('', 'clear'));
|
||||
stopProcessing();
|
||||
messages.innerHTML = "";
|
||||
})
|
||||
testButton.addEventListener('click', function(e) {
|
||||
let index = 0;
|
||||
let isWaitingForResponse = false;
|
||||
|
||||
function sendNextMessage() {
|
||||
if (index < testContentArray.length && !isWaitingForResponse) {
|
||||
input.value = testContentArray[index];
|
||||
submitMessage();
|
||||
index++;
|
||||
isWaitingForResponse = true;
|
||||
}
|
||||
}
|
||||
|
||||
socket.on("chat_message", function(msg) {
|
||||
if (isWaitingForResponse) {
|
||||
if (msg.message.type === 'end') {
|
||||
isWaitingForResponse = false;
|
||||
sendNextMessage();
|
||||
} else {
|
||||
// Jarvis have not finish his reply, just wait
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
sendNextMessage();
|
||||
});
|
||||
|
||||
input.addEventListener('keyup', function (e) {
|
||||
if (e.key === 'Enter') {
|
||||
submitMessage();
|
||||
}
|
||||
});
|
||||
|
||||
input.addEventListener('drop', function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
const files = e.dataTransfer.files;
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
const file = files[i];
|
||||
const reader = new FileReader();
|
||||
reader.onload = function(e) {
|
||||
const file = e.currentTarget.result;
|
||||
if (file.startsWith('data:image')) {
|
||||
const base64Index = file.indexOf('base64,');
|
||||
const base64Content = file.substring(base64Index + 7)
|
||||
// Send to jarvis
|
||||
socket.emit(
|
||||
"chat_message",
|
||||
makeChatMessage(base64Content, 'image')
|
||||
);
|
||||
|
||||
// display on the page
|
||||
var item = document.createElement("li");
|
||||
item.innerHTML = `<img src="${file}" alt="Image" class="replied-img">`;
|
||||
item.classList.add("align_right");
|
||||
messages.appendChild(item);
|
||||
scrollElementToEnd(messages);
|
||||
}
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
});
|
||||
})();
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,65 @@
|
||||
const express = require("express");
|
||||
const app = express();
|
||||
const http = require("http");
|
||||
const server = http.createServer(app);
|
||||
const { Server } = require("socket.io");
|
||||
const io = new Server(server, {
|
||||
maxHttpBufferSize: 50000000,
|
||||
});
|
||||
const readline = require("readline");
|
||||
const { randomBytes } = require("crypto");
|
||||
|
||||
app.get("/", (req, res) => {
|
||||
res.sendFile(__dirname + "/index.html");
|
||||
});
|
||||
|
||||
io.on("connection", (socket) => {
|
||||
console.log("a user connected");
|
||||
let isRunning = true;
|
||||
const rl = readline.createInterface({
|
||||
input: process.stdin,
|
||||
output: process.stdout,
|
||||
});
|
||||
|
||||
socket.on("disconnect", (reason) => {
|
||||
isRunning = false;
|
||||
rl.close();
|
||||
console.log("Client disconnected: ", reason);
|
||||
});
|
||||
socket.on("chat_message", (msg) => {
|
||||
console.log("Received: ", msg);
|
||||
});
|
||||
|
||||
async function readLine() {
|
||||
return new Promise((resolve) => {
|
||||
rl.question("Input: ", (answer) => {
|
||||
resolve(answer);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async function readLoop() {
|
||||
while (isRunning) {
|
||||
let input = await readLine();
|
||||
socket.emit("chat_message", {
|
||||
user: {
|
||||
id: "user_id",
|
||||
},
|
||||
chat: {
|
||||
id: "session_id",
|
||||
},
|
||||
message: {
|
||||
type: "text",
|
||||
content: input,
|
||||
id: `${Math.random() * 1000}`,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
readLoop();
|
||||
});
|
||||
|
||||
server.listen(3000, () => {
|
||||
console.log("listening on *:3000");
|
||||
});
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"dependencies": {
|
||||
"express": "^4.18.2",
|
||||
"socket.io": "^4.6.1"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user