@websolutespa/bom-llm 0.0.57 → 0.0.59

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @websolutespa/bom-llm
 
+## 0.0.59
+
+### Patch Changes
+
+- fb1caf0: Add feedback functionality
+
+## 0.0.58
+
+### Patch Changes
+
+- Fixing: chunksToChunkItems first chunk
+
 ## 0.0.57
 
 ### Patch Changes

package/dist/umd/index.css

@@ -511,11 +511,14 @@ llm-embed {
   margin: 0;
   padding: 0;
   border: none;
+  border-radius: 0;
   text-decoration: none;
   background: none;
+  color: inherit;
   appearance: none;
   font-family: inherit;
   font-style: inherit;
+  font-size: inherit;
   font-variant-ligatures: inherit;
   font-variant-caps: inherit;
   font-variant-numeric: inherit;
@@ -628,11 +631,14 @@ llm-embed {
   margin: 0;
   padding: 0;
   border: none;
+  border-radius: 0;
   text-decoration: none;
   background: none;
+  color: inherit;
   appearance: none;
   font-family: inherit;
   font-style: inherit;
+  font-size: inherit;
   font-variant-ligatures: inherit;
   font-variant-caps: inherit;
   font-variant-numeric: inherit;
@@ -995,11 +1001,14 @@ llm-embed {
   margin: 0;
   padding: 0;
   border: none;
+  border-radius: 0;
   text-decoration: none;
   background: none;
+  color: inherit;
   appearance: none;
   font-family: inherit;
   font-style: inherit;
+  font-size: inherit;
   font-variant-ligatures: inherit;
   font-variant-caps: inherit;
   font-variant-numeric: inherit;
@@ -1064,11 +1073,14 @@ llm-embed {
   margin: 0;
   padding: 0;
   border: none;
+  border-radius: 0;
   text-decoration: none;
   background: none;
+  color: inherit;
   appearance: none;
   font-family: inherit;
   font-style: inherit;
+  font-size: inherit;
   font-variant-ligatures: inherit;
   font-variant-caps: inherit;
   font-variant-numeric: inherit;
@@ -1138,11 +1150,14 @@ llm-embed {
   margin: 0;
   padding: 0;
   border: none;
+  border-radius: 0;
   text-decoration: none;
   background: none;
+  color: inherit;
   appearance: none;
   font-family: inherit;
   font-style: inherit;
+  font-size: inherit;
   font-variant-ligatures: inherit;
   font-variant-caps: inherit;
   font-variant-numeric: inherit;
@@ -1311,11 +1326,14 @@ llm-embed {
   margin: 0;
   padding: 0;
   border: none;
+  border-radius: 0;
   text-decoration: none;
   background: none;
+  color: inherit;
   appearance: none;
   font-family: inherit;
   font-style: inherit;
+  font-size: inherit;
   font-variant-ligatures: inherit;
   font-variant-caps: inherit;
   font-variant-numeric: inherit;
@@ -1368,6 +1386,7 @@ llm-embed {
   color: var(--llm-hint-title-color, inherit);
 }
 .llm .llm__hint-title.row {
+  width: 100%;
   flex-direction: row;
   align-items: center;
 }
@@ -1498,11 +1517,14 @@ llm-embed {
   margin: 0;
   padding: 0;
   border: none;
+  border-radius: 0;
   text-decoration: none;
   background: none;
+  color: inherit;
   appearance: none;
   font-family: inherit;
   font-style: inherit;
+  font-size: inherit;
   font-variant-ligatures: inherit;
   font-variant-caps: inherit;
   font-variant-numeric: inherit;
@@ -1593,11 +1615,14 @@ llm-embed {
   margin: 0;
   padding: 0;
   border: none;
+  border-radius: 0;
   text-decoration: none;
   background: none;
+  color: inherit;
   appearance: none;
   font-family: inherit;
   font-style: inherit;
+  font-size: inherit;
   font-variant-ligatures: inherit;
   font-variant-caps: inherit;
   font-variant-numeric: inherit;
@@ -1644,11 +1669,14 @@ llm-embed {
   margin: 0;
   padding: 0;
   border: none;
+  border-radius: 0;
   text-decoration: none;
   background: none;
+  color: inherit;
   appearance: none;
   font-family: inherit;
   font-style: inherit;
+  font-size: inherit;
   font-variant-ligatures: inherit;
   font-variant-caps: inherit;
   font-variant-numeric: inherit;
@@ -1724,11 +1752,14 @@ llm-embed {
   margin: 0;
   padding: 0;
   border: none;
+  border-radius: 0;
   text-decoration: none;
   background: none;
+  color: inherit;
   appearance: none;
   font-family: inherit;
   font-style: inherit;
+  font-size: inherit;
   font-variant-ligatures: inherit;
   font-variant-caps: inherit;
   font-variant-numeric: inherit;
@@ -1855,11 +1886,14 @@ llm-embed {
   margin: 0;
   padding: 0;
   border: none;
+  border-radius: 0;
   text-decoration: none;
   background: none;
+  color: inherit;
   appearance: none;
   font-family: inherit;
   font-style: inherit;
+  font-size: inherit;
   font-variant-ligatures: inherit;
   font-variant-caps: inherit;
   font-variant-numeric: inherit;
@@ -1926,11 +1960,14 @@ llm-embed {
   margin: 0;
   padding: 0;
   border: none;
+  border-radius: 0;
   text-decoration: none;
   background: none;
+  color: inherit;
   appearance: none;
   font-family: inherit;
   font-style: inherit;
+  font-size: inherit;
   font-variant-ligatures: inherit;
   font-variant-caps: inherit;
   font-variant-numeric: inherit;
@@ -1989,11 +2026,14 @@ llm-embed {
   margin: 0;
   padding: 0;
   border: none;
+  border-radius: 0;
   text-decoration: none;
   background: none;
+  color: inherit;
   appearance: none;
   font-family: inherit;
   font-style: inherit;
+  font-size: inherit;
   font-variant-ligatures: inherit;
   font-variant-caps: inherit;
   font-variant-numeric: inherit;
@@ -4408,6 +4448,175 @@ llm-embed {
   margin-top: auto;
 }
 
+.llm .llm__feedback {
+  --size: var(--llm-feedback-size, 1rem);
+}
+.llm .llm__feedback--stars, .llm .llm__feedback--faces {
+  --unchecked: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" clip-rule="evenodd" fill="white" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" %3e%3cpath d="m11.322 2.923c.126-.259.39-.423.678-.423.289 0 .552.164.678.423.974 1.998 2.65 5.44 2.65 5.44s3.811.524 6.022.829c.403.055.65.396.65.747 0 .19-.072.383-.231.536-1.61 1.538-4.382 4.191-4.382 4.191s.677 3.767 1.069 5.952c.083.462-.275.882-.742.882-.122 0-.244-.029-.355-.089-1.968-1.048-5.359-2.851-5.359-2.851s-3.391 1.803-5.359 2.851c-.111.06-.234.089-.356.089-.465 0-.825-.421-.741-.882.393-2.185 1.07-5.952 1.07-5.952s-2.773-2.653-4.382-4.191c-.16-.153-.232-.346-.232-.535 0-.352.249-.694.651-.748 2.211-.305 6.021-.829 6.021-.829s1.677-3.442 2.65-5.44zm.678 2.033-2.361 4.792-5.246.719 3.848 3.643-.948 5.255 4.707-2.505 4.707 2.505-.951-5.236 3.851-3.662-5.314-.756z" fill-rule="nonzero" /%3e%3c/svg%3e');
+  --checked: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" clip-rule="evenodd" fill="orange" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" %3e%3cpath d="m11.322 2.923c.126-.259.39-.423.678-.423.289 0 .552.164.678.423.974 1.998 2.65 5.44 2.65 5.44s3.811.524 6.022.829c.403.055.65.396.65.747 0 .19-.072.383-.231.536-1.61 1.538-4.382 4.191-4.382 4.191s.677 3.767 1.069 5.952c.083.462-.275.882-.742.882-.122 0-.244-.029-.355-.089-1.968-1.048-5.359-2.851-5.359-2.851s-3.391 1.803-5.359 2.851c-.111.06-.234.089-.356.089-.465 0-.825-.421-.741-.882.393-2.185 1.07-5.952 1.07-5.952s-2.773-2.653-4.382-4.191c-.16-.153-.232-.346-.232-.535 0-.352.249-.694.651-.748 2.211-.305 6.021-.829 6.021-.829s1.677-3.442 2.65-5.44z" fill-rule="nonzero" /%3e%3c/svg%3e');
+  --hover: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" clip-rule="evenodd" fill="orange" fill-rule="evenodd" stroke="black" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" %3e%3cpath d="m11.322 2.923c.126-.259.39-.423.678-.423.289 0 .552.164.678.423.974 1.998 2.65 5.44 2.65 5.44s3.811.524 6.022.829c.403.055.65.396.65.747 0 .19-.072.383-.231.536-1.61 1.538-4.382 4.191-4.382 4.191s.677 3.767 1.069 5.952c.083.462-.275.882-.742.882-.122 0-.244-.029-.355-.089-1.968-1.048-5.359-2.851-5.359-2.851s-3.391 1.803-5.359 2.851c-.111.06-.234.089-.356.089-.465 0-.825-.421-.741-.882.393-2.185 1.07-5.952 1.07-5.952s-2.773-2.653-4.382-4.191c-.16-.153-.232-.346-.232-.535 0-.352.249-.694.651-.748 2.211-.305 6.021-.829 6.021-.829s1.677-3.442 2.65-5.44z" fill-rule="nonzero" /%3e%3c/svg%3e');
+  --count: 5;
+}
+.llm .llm__feedback__group {
+  margin-top: var(--llm-feedback-padding);
+  padding-top: var(--llm-feedback-padding);
+  background: transparent;
+  color: white;
+  padding: 0.5rem 1rem;
+  border-radius: 8px;
+  border: var(--llm-feedback-border);
+  background: transparent;
+  backdrop-filter: blur(20px);
+}
+.llm .llm__feedback__title {
+  font-size: 16px;
+  font-weight: 500;
+}
+.llm .llm__feedback__form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--llm-feedback-gap);
+  margin-top: 0.5em;
+}
+@media (min-width: 768px) {
+  .llm .llm__feedback__form {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+.llm .llm__feedback__rating, .llm .llm__feedback__message, .llm .llm__feedback__cta {
+  appearance: none;
+  display: flex;
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+.llm .llm__feedback__rating legend, .llm .llm__feedback__message legend, .llm .llm__feedback__cta legend {
+  font-size: 0;
+  line-height: 0;
+}
+.llm .llm__feedback__message {
+  width: 100%;
+}
+.llm .llm__feedback__message input {
+  box-sizing: border-box;
+  width: 100%;
+  height: auto;
+  padding: 0.3em 0.5em;
+  border-radius: 4px;
+  border: none;
+  font-size: 16px;
+  line-height: 1.25;
+  background: rgba(0, 0, 0, 0.1);
+}
+.llm .llm__feedback__message input::placeholder {
+  color: white;
+  opacity: 0.5;
+}
+@media (min-width: 768px) {
+  .llm .llm__feedback__message {
+    flex-grow: 1;
+    width: auto;
+  }
+}
+.llm .llm__feedback__stars {
+  position: relative;
+  height: var(--size);
+  width: calc(var(--size) * var(--count));
+  background-image: var(--unchecked);
+  background-size: var(--size) var(--size);
+}
+.llm .llm__feedback__stars label {
+  position: absolute;
+  height: 100%;
+  background-size: var(--size) var(--size);
+  cursor: pointer;
+}
+.llm .llm__feedback__stars label:nth-of-type(1) {
+  z-index: 10;
+  width: var(--size);
+}
+.llm .llm__feedback__stars label:nth-of-type(2) {
+  z-index: 9;
+  width: calc(var(--size) * 2);
+}
+.llm .llm__feedback__stars label:nth-of-type(3) {
+  z-index: 8;
+  width: calc(var(--size) * 3);
+}
+.llm .llm__feedback__stars label:nth-of-type(4) {
+  z-index: 7;
+  width: calc(var(--size) * 4);
+}
+.llm .llm__feedback__stars label:nth-of-type(5) {
+  z-index: 6;
+  width: calc(var(--size) * 5);
+}
+.llm .llm__feedback__stars label:nth-of-type(6) {
+  z-index: 5;
+  width: calc(var(--size) * 6);
+}
+.llm .llm__feedback__stars label:nth-of-type(7) {
+  z-index: 4;
+  width: calc(var(--size) * 7);
+}
+.llm .llm__feedback__stars label:nth-of-type(8) {
+  z-index: 3;
+  width: calc(var(--size) * 8);
+}
+.llm .llm__feedback__stars label:nth-of-type(9) {
+  z-index: 2;
+  width: calc(var(--size) * 9);
+}
+.llm .llm__feedback__stars label:nth-of-type(10) {
+  z-index: 1;
+  width: calc(var(--size) * 10);
+}
+.llm .llm__feedback__stars input:checked + label, .llm .llm__feedback__stars input:focus + label {
+  background-image: var(--checked);
+}
+.llm .llm__feedback__stars input:checked + label:hover, .llm .llm__feedback__stars label:hover {
+  background-image: var(--hover);
+}
+.llm .llm__feedback__stars input:focus + label {
+  outline: var(--llm-feedback-border);
+}
+.llm .llm__feedback__stars input, .llm .llm__feedback__stars label > span {
+  border: 0;
+  padding: 0;
+  margin: 0;
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px 1px 1px 1px);
+  /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
+  clip: rect(1px, 1px, 1px, 1px);
+  /*maybe deprecated but we need to support legacy browsers */
+  clip-path: inset(50%);
+  /*modern browsers, clip-path works inwards from each corner*/
+  white-space: nowrap;
+  /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
+}
+.llm .llm__feedback__cta button {
+  padding: 0.3em 1em;
+  border: var(--llm-feedback-border);
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 500;
+  text-transform: lowercase;
+  cursor: pointer;
+  transition: background-color ease-in-out 250ms;
+}
+.llm .llm__feedback__cta button:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+.llm .llm__feedback__cta button[disabled] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
 /**
  * Swiper 8.4.7
  * Most modern mobile touch slider and framework with hardware accelerated transitions