Merge pull request #33 from christianhellsten/add-user-icon

Add user icons

css/ChatHistory.scss

@@ -4,7 +4,7 @@
  display: flex;
  flex-grow: 1;
  flex-direction: column;
- padding: 1rem;
+ padding: 0.5rem;
  max-width: 1024px;
  width: 100%; /* Full width of its parent */
  overflow-y: auto; /* Enable vertical scrolling */
@@ -27,9 +27,26 @@
 /* Styling for user messages */
 .user-chat-message {
  @extend %font-weight-bolder;
+
+ .system-icon {
+ display: none;
+ }
 }
 
 /* Styling for system messages */
 .assistant-chat-message {
  margin-bottom: 0.5rem;
+
+ .you-icon {
+ display: none;
+ }
+}
+
+.chat-message-menu {
+ @extend %box-shadow;
+
+ position: absolute;
+ padding: 0.5rem;
+ background: var(--bg-color);
+ z-index: 300;
 }

css/Hoverable.scss

@@ -1,9 +1,11 @@
 .hoverable {
  visibility: collapse;
+ transition: visibility 0s; /* Add a transition for smooth animation */
 }
 
 .hover {
  .hoverable {
  visibility: visible;
+ transition: visibility 0.7s ease-in-out; /* Add a transition for smooth animation */
  }
 }

css/UINotification.scss

@@ -2,9 +2,9 @@
  position: fixed;
  top: 0;
  left: 0;
- color: var(--bg-color);
  width: calc(100vw - 2rem);
  z-index: 30000;
+ color: var(--text-color);
  background-color: var(--bg-color);
  padding: 1rem;
  margin: 1rem;

css/grid.scss

@@ -20,3 +20,7 @@
 .justify-left {
  justify-content: left;
 }
+
+.height-100 {
+ height: 100%;
+}

css/icons.scss

@@ -15,12 +15,33 @@ svg {
  vertical-align: middle;
 }
 
+.user-icon {
+ margin: 0.25rem 0.75rem 0 0;
+ width: 2.5rem; /* Adjust the size as needed */
+ height: 2.5rem; /* Should be equal to the width for a perfect circle */
+ border-radius: 50%; /* This makes the shape a circle */
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 0.75rem;
+}
+
+.system-icon {
+ color: var(--text-color);
+ background-color: var(--tertiary-color);
+}
+
+.you-icon {
+ background-color: var(--text-color);
+ color: var(--bg-color);
+}
+
 .icon-export::before {
  content: "\1F5E8 \2B07"; /* Speech Bubble and Downward Arrow */
 }
 
 .icon-flag::before { /* Triangular Flag on Post */
- content: "\26A0";
+ content: "\2757";
 }
 
 .icon-bad::before {

css/list.scss

@@ -38,12 +38,14 @@ ul {
  border-top-color: #cccccc5e;
  }
 
+ /*
  li.selected::after {
  position: absolute;
- right: 1rem;
+ right: 1.5rem;
  padding-left: 0.5rem;
- content: '\203A\00a0'; // \00a0 is a non-breaking space
+ content: '\203A'; // \00a0 is a non-breaking space
  }
+ */
 
  li.hover {
  border-top-color: #cccccc5e;

css/style.scss

@@ -4,6 +4,14 @@ html {
  margin: 0;
  padding: 0;
  height: 100%;
+
+ /* For Mozilla Firefox */
+ -moz-osx-font-smoothing: grayscale;
+ /* Modern browsers (WebKit-based) */
+ -webkit-font-smoothing: antialiased;
+ /* Fallback for other browsers */
+ /* stylelint-disable-next-line property-no-unknown */
+ font-smoothing: antialiased;
 }
 
 body {

dist/index.html

@@ -170,24 +170,30 @@ <h2 class="col grw chat-title">Chat settings</h2>
  </div>
  <!-- Chat message template -->
  <template id="chat-message-template">
- <div class="chat-message">
- <span class="chat-message-text"></span>
- <div class="col hoverable">
- <button class="delete-chat-message-button button-sm" title="Delete chat message">
- <i class="icon-delete"></i>
- </button>
- <button class="copy-chat-message-button button-sm" title="Copy chat message to clipboard">
- <i class="icon-copy copy-button"></i>
- </button>
- <button class="good-chat-message-button copy-button button-sm" title="Good chat message">
- <i class="icon-good"></i>
- </button>
- <button class="bad-chat-message-button button-sm" title="Bad chat message">
- <i class="icon-bad"></i>
- </button>
- <button class="flag-chat-message-button button-sm" title="Flag chat message">
- <i class="icon-flag"></i>
- </button>
+ <div class="chat-message row">
+ <div class="col height-100">
+ <div class="user-icon system-icon">&#x25A0;</div>
+ <div class="user-icon you-icon">You</div>
+ <div class="hoverable chat-message-menu">
+ <button class="copy-chat-message-button button-sm" title="Copy chat message to clipboard">
+ <i class="icon-copy copy-button"></i>
+ </button>
+ <button class="good-chat-message-button copy-button button-sm" title="Good chat message">
+ <i class="icon-good"></i>
+ </button>
+ <button class="bad-chat-message-button button-sm" title="Bad chat message">
+ <i class="icon-bad"></i>
+ </button>
+ <button class="flag-chat-message-button button-sm" title="Flag chat message">
+ <i class="icon-flag"></i>
+ </button>
+ <button class="delete-chat-message-button button-sm" title="Delete chat message">
+ <i class="icon-delete"></i>
+ </button>
+ </div>
+ </div>
+ <div class="col grw">
+ <span class="chat-message-text"></span>
  </div>
  </div></template>
  <!-- Chat list item template -->