chore: replace icons with iconcloud set

packages/chat-component/public/svg/readme.md

@@ -1,18 +1,4 @@
 ## Icon sources
 
-All icons in this sample are free and open source
-
-- [Trash Can Icon](https://fontawesome.com/icons/trash?f=classic&s=solid)
-- [Send Icon](https://fontawesome.com/icons/paper-plane?f=classic&s=solid)
-- [Settings Icon](https://fontawesome.com/icons/cog?f=classic&s=solid)
-- [Close Icon](https://fontawesome.com/icons/times-circle?f=classic&s=solid)
-- [Info Icon](https://fontawesome.com/icons/info-circle?f=classic&s=solid)
-- [Copy Icon](https://fontawesome.com/icons/copy?f=classic&s=solid)
-- [Double Check Icon](https://fontawesome.com/icons/check-double?f=classic&s=solid)
-- [Email Icon](https://fontawesome.com/icons/envelope-open-text?f=classic&s=solid)
-- [Lightbulb Icon](https://fontawesome.com/icons/lightbulb?f=classic&s=solid)
-- [Question Icon](https://fontawesome.com/icons/circle-question?f=classic&s=solid)
-
-## FontAwesome License
-
-For the full information and license, please visit [Font Awesome License](https://github.com/FortAwesome/Font-Awesome/blob/6.x/LICENSE.txt)
+All icons in this sample are part of the
+https://iconcloud.design/ icon set.

packages/chat-component/src/main.ts

@@ -8,15 +8,17 @@ import { getAPIResponse } from './core/http/index.js';
 import { parseStreamedMessages } from './core/parser/index.js';
 import { mainStyle } from './style.js';
 import { getTimestamp, processText } from './utils/index.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 
 // TODO: allow host applications to customize these icons
-import iconLightBulb from '../public/svg/lightbulb-icon.svg?inline';
-import iconDelete from '../public/svg/delete-icon.svg?inline';
-import iconDoubleCheck from '../public/svg/doublecheck-icon.svg?inline';
-import iconCopyToClipboard from '../public/svg/copy-icon.svg?inline';
-import iconSend from '../public/svg/send-icon.svg?inline';
-import iconClose from '../public/svg/close-icon.svg?inline';
-import iconQuestion from '../public/svg/question-icon.svg?inline';
+
+import iconLightBulb from '../public/svg/lightbulb-icon.svg?raw';
+import iconDelete from '../public/svg/delete-icon.svg?raw';
+import iconSuccess from '../public/svg/success-icon.svg?raw';
+import iconCopyToClipboard from '../public/svg/copy-icon.svg?raw';
+import iconSend from '../public/svg/send-icon.svg?raw';
+import iconClose from '../public/svg/close-icon.svg?raw';
+import iconQuestion from '../public/svg/question-icon.svg?raw';
 
 /**
  * A chat component that allows the user to ask questions and get answers from an API.
@@ -387,13 +389,7 @@ export class ChatComponent extends LitElement {
     if (followupQuestions && followupQuestions.length > 0) {
       return html`
         <div class="items__listWrapper">
-          <img
-            class="icon"
-            src="${iconQuestion}"
-            alt="${globalConfig.FOLLOW_UP_QUESTIONS_LABEL_TEXT}"
-            width="35"
-            height="35"
-          />
+          ${unsafeSVG(iconQuestion)}
           <ul class="items__list followup">
             ${followupQuestions.map(
               (followupQuestion) => html`
@@ -430,7 +426,7 @@ export class ChatComponent extends LitElement {
                     @click="${this.resetCurrentChat}"
                   >
                     <span class="chat__header--span">${globalConfig.RESET_CHAT_BUTTON_TITLE}</span>
-                    <img src="${iconDelete}" alt="${globalConfig.RESET_CHAT_BUTTON_TITLE}" width="12" height="12" />
+                    ${unsafeSVG(iconDelete)}
                   </button>
                 </div>
                 <ul class="chat__list" aria-live="assertive">
@@ -450,12 +446,8 @@ export class ChatComponent extends LitElement {
                                   <span class="chat__header--span"
                                     >${globalConfig.SHOW_THOUGH_PROCESS_BUTTON_LABEL_TEXT}</span
                                   >
-                                  <img
-                                    src="${iconLightBulb}"
-                                    alt="${globalConfig.SHOW_THOUGH_PROCESS_BUTTON_LABEL_TEXT}"
-                                    width="12"
-                                    height="12"
-                                  />
+
+                                  ${unsafeSVG(iconLightBulb)}
                                 </button>
                                 <button
                                   title="${globalConfig.COPY_RESPONSE_BUTTON_LABEL_TEXT}"
@@ -468,12 +460,7 @@ export class ChatComponent extends LitElement {
                                       ? globalConfig.COPIED_SUCCESSFULLY_MESSAGE
                                       : globalConfig.COPY_RESPONSE_BUTTON_LABEL_TEXT}</span
                                   >
-                                  <img
-                                    src="${this.isResponseCopied ? iconDoubleCheck : iconCopyToClipboard}"
-                                    alt="${globalConfig.COPY_RESPONSE_BUTTON_LABEL_TEXT}"
-                                    width="12"
-                                    height="12"
-                                  />
+                                  ${this.isResponseCopied ? unsafeSVG(iconSuccess) : unsafeSVG(iconCopyToClipboard)}
                                 </button>
                               </div>`}
                           ${message.text.map((textEntry) => this.renderTextEntry(textEntry))}
@@ -566,7 +553,7 @@ export class ChatComponent extends LitElement {
                 title="${globalConfig.CHAT_BUTTON_LABEL_TEXT}"
                 ?disabled="${this.isDisabled}"
               >
-                <img src="${iconSend}" alt="${globalConfig.CHAT_BUTTON_LABEL_TEXT}" width="25" height="25" />
+                ${unsafeSVG(iconSend)}
               </button>
               <button
                 title="${globalConfig.RESET_BUTTON_TITLE_TEXT}"
@@ -600,12 +587,7 @@ export class ChatComponent extends LitElement {
                     @click="${this.hideThoughtProcess}"
                   >
                     <span class="chat__header--span">${globalConfig.HIDE_THOUGH_PROCESS_BUTTON_LABEL_TEXT}</span>
-                    <img
-                      src="${iconClose}"
-                      alt="${globalConfig.HIDE_THOUGH_PROCESS_BUTTON_LABEL_TEXT}"
-                      width="12"
-                      height="12"
-                    />
+                    ${unsafeSVG(iconClose)}
                   </button>
                 </div>
                 <nav class="aside__nav">

packages/chat-component/src/style.ts

@@ -253,11 +253,19 @@ export const mainStyle = css`
     opacity: 0.5;
     cursor: not-allowed;
   }
+  .chatbox__button svg {
+    fill: var(--accent-high);
+    width: 25px;
+  }
   .chat__header--span {
     margin-right: 5px;
     text-align: left;
     font-size: smaller;
   }
+  .chat__header--button svg {
+    fill: currentColor;
+    width: 12px;
+  }
   .chatbox__container {
     position: relative;
     height: 50px;
@@ -272,11 +280,16 @@ export const mainStyle = css`
     margin-left: 8px;
     width: 80px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    transition: background 0.3s ease-in-out;
   }
   .chatbox__button:hover,
   .chatbox__button:focus {
     background: var(--secondary-color);
   }
+  .chatbox__button:hover svg,
+  .chatbox__button:focus svg {
+    opacity: 0.8;
+  }
   .chatbox__button--reset {
     position: absolute;
     right: 115px;
@@ -351,9 +364,13 @@ export const mainStyle = css`
     border-top: 1px dotted var(--light-gray);
     display: flex;
   }
-  .items__listWrapper .icon {
-    padding-top: 35px;
-    opacity: 0.3;
+  .items__listWrapper svg {
+    fill: var(--accent-high);
+    width: 40px;
+    margin-left: 25px;
+  }
+  svg {
+    height: auto;
   }
   .items__list.followup {
     display: flex;
@@ -366,6 +383,9 @@ export const mainStyle = css`
     margin: 10px 0;
     display: block;
   }
+  svg {
+    fill: var(--text-color);
+  }
   .items__listItem--followup {
     cursor: pointer;
     padding: 0 15px;