Skip to content

Commit

Permalink
minor updates in progress (working)
Browse files Browse the repository at this point in the history
  • Loading branch information
manu chatterjee committed May 8, 2024
1 parent 913de06 commit d3e0cb7
Show file tree
Hide file tree
Showing 8 changed files with 337 additions and 95 deletions.
101 changes: 76 additions & 25 deletions dev/div-test4.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
rel="stylesheet">
<link href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='0.9em' font-size='90' style='fill:blue'>&#x1F4AC;</text></svg>" rel="icon" />
<link
href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='0.9em' font-size='90' style='fill:blue'>&#x1F4AC;</text></svg>"
rel="icon" />

<script src="https://www.unpkg.com/[email protected]/bitwrench.min.js"></script>
<style>
Expand All @@ -25,7 +27,7 @@
.parent {
height: 40vh;
width: 40vw;
border: 2px solid rgb(221, 32, 180);
/* border: 2px solid rgb(221, 32, 180);*/
}

/* these are not part of the widget, just for the demo test */
Expand Down Expand Up @@ -147,55 +149,68 @@
}

/* set of themes to highlight compontents of yackbox */
/* yackbox dark theme - sleek and stylish */
.yackbox-theme-dark {
/* Styles for the chat widget */
border: 1px solid black;
border-radius: 10px;
padding: 5px;
background-color: #444;
border: 1px solid #555555;
border-radius: 8px;
padding: 10px;
background-color: #212121;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.yackbox-theme-dark .yackbox-title-area {
background-color: #444;
color: #eee;
background-color: #263238;
color: #eceff1;
padding: 8px;
font-weight: bold;
border-bottom: 1px solid #37474f;
}

.yackbox-theme-dark .yackbox-messages-area {
background-color: #444;
border: 1px solid #ccc;
color: #eee;
margin-bottom: 2px;
border-radius: 4px;
background-color: #424242;
color: #eceff1;
padding: 10px;
}

.yackbox-theme-dark .yackbox-message-1 {
background-color: #555;
color: #eee;
background-color: #004d40;
color: #b2dfdb;
padding: 6px;
border-radius: 4px;
margin-bottom: 4px;
}

.yackbox-theme-dark .yackbox-message-2 {
background-color: #333;
color: #eee;
background-color: #6a1b9a;
color: #e1bee7;
padding: 6px;
border-radius: 4px;
margin-bottom: 4px;
}

.yackbox-theme-dark .yackbox-input-area {
background-color: lightgray;
border-radius: 4px;
padding: 8px;
background-color: #263238;
}

.yackbox-theme-dark .yackbox-input-textbox {
background-color: #444;
border: 2px solid #ccc;
width: 75%;
padding: 8px;
background-color: #424242;
border: 1px solid #555;
border-radius: 4px;
font-size: 14px;
color: #ddd;
color: #eceff1;
}

.yackbox-theme-dark .yackbox-input-send-btn {
background-color: #444;
background-color: #1b5e20;
color: white;
border: none;
border-radius: 4px;
padding: 8px 16px;
margin-left: 10px;
cursor: pointer;
}
</style>

Expand Down Expand Up @@ -266,7 +281,7 @@ <h2>Component Styles and Resize Checks</h2>
addMessage(message);
}
}
function addMessage(message) {
function addMessageBare(message) {
// Add the message to the messages area
const messageDiv = document.createElement('div');
messageDiv.classList.add('yackbox-message');
Expand All @@ -283,6 +298,42 @@ <h2>Component Styles and Resize Checks</h2>
textEntry.value = '';
adjustMessagesAreaHeight();
}
function addMessage(message, user = "foo", align = 'left') {

// Add the message to the messages area
const messageDiv = document.createElement('div');
messageDiv.classList.add('yackbox-message');
if (messagesArea.children.length % 2 === 1) {
messageDiv.classList.add('yackbox-message-1');
}
else {
messageDiv.classList.add('yackbox-message-2');
}
const userDiv = document.createElement('div');
userPadding = "padding-left: 20px; padding-right: 20px;"
switch (align) {
case 'left':
userPadding = "padding-right: 8px;";
break;
case 'right':
userPadding = "padding-left: 8px;";
break;
}
userDiv.textContent = user;
userDiv.style = `width: 100%; text-align: ${align}; font-size: 1em; font-weight:700; color: #444;`;

const contentDiv = document.createElement('div');
contentDiv.style = `width: 100%; text-align: ${align};`;
contentDiv.textContent = message;

messageDiv.appendChild(userDiv);
messageDiv.appendChild(contentDiv);
messagesArea.appendChild(messageDiv);
messagesArea.lastChild.scrollIntoView()

textEntry.value = '';
adjustMessagesAreaHeight();
}
window.addEventListener('resize', handleContainerResize);
adjustMessagesAreaHeight();
adjustSendButtonWidth();
Expand Down
31 changes: 31 additions & 0 deletions dev/features.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,3 +54,34 @@ npm install etc
rollup, terser, etc

Note while rollup and other tools are used for bundling / packaging yackbox doesn't have any dependacies.

##

config {
styles : {
title
messageContainer
message
entryContainer
textEntry
submitBtn
}
features : {
onSubmitCallback : fn (text, this)
onMessageCallback : fn (text, this)
}
}
chat = new yackbox({DOMEl, config})
chat.addMessageRaw ({userString, content, alignment}) : msgID # pure HTML inputs

chat.updateMessage ({messageID, messageContent })
chat.addMessage ({userID, messageContent})

chat.showTimestamps (true/false)
chat.addUser({displayName, metadata, role, displayHTML, cssClass })
chat.updateUser (userID, {})
chat.removeUser (userID)

chat.getMessageHistoryRange(n,m) # messages only
chat.getMessageHistoryFull() # messages only (copy)
chat.getFullLog() # includes system messages such as "user X entered the chat"
Loading

0 comments on commit d3e0cb7

Please sign in to comment.