@markprompt/web - npm Package Compare versions

Comparing version 0.2.2-beta34 to 0.2.2-beta35

dist/markprompt-content.js

@@ -1,4 +0,4 @@
-var u=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var r=(l,p,e,o)=>{for(var i=o>1?void 0:o?y(p,e):p,d=l.length-1,c;d>=0;d--)(c=l[d])&&(i=(o?c(p,e,i):c(i))||i);return o&&i&&u(p,e,i),i};import{LitElement as w,html as n,css as g,nothing as m}from"lit";import{customElement as f,property as s}from"lit/decorators.js";import{classMap as b}from"lit/directives/class-map.js";import{I_DONT_KNOW_MESSAGE as v,MARKPROMPT_COMPLETIONS_URL as x,DEFAULT_MODEL as z,submitPrompt as k}from"@markprompt/core";import{unified as S}from"unified";import $ from"remark-parse";import I from"remark-rehype";import T from"rehype-sanitize";import q from"rehype-stringify";import E from"remark-gfm";import{until as R}from"lit/directives/until.js";import{unsafeHTML as A}from"lit/directives/unsafe-html.js";let t=class extends w{constructor(){super(...arguments);this.model=z;this.iDontKnowMessage=v;this.completionsUrl=x;this.projectKey="";this.dark=!1;this.accentColor="";this.responseStyle="";this.referenceItemStyle="";this.placeholder="Ask me anything\u2026";this.prompt="";this.idToRefMap={};this.loading=!1;this.answer="";this.references=[]}onInput(e){const o=e.target;this.prompt=o.value}scrollToBottom(){const e=this.renderRoot.querySelector("#response");e.scrollTop=e.scrollHeight}getRefFromId(e){}reset(){const e=this.renderRoot.querySelector("#prompt-input");e.value="",e.focus(),this.answer="",this.references=[],this.loading=!1}focus(){this.renderRoot.querySelector("#prompt-input").focus()}async onSubmit(e){e.preventDefault(),this.prompt!==""&&(this.answer="",this.references=[],this.loading=!0,await k(this.prompt,this.projectKey,o=>{this.scrollToBottom(),this.answer+=o},o=>{this.scrollToBottom(),this.references=o},{model:this.model,iDontKnowMessage:this.iDontKnowMessage,completionsUrl:this.completionsUrl}),this.loading=!1)}async renderMarkdown(e){const o=await S().use($).use(E).use(I,{allowDangerousHtml:!0}).use(T).use(q).process(e);return typeof o.value!="string"?"":A(o.value)}render(){return n`
+var u=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var r=(l,p,e,o)=>{for(var i=o>1?void 0:o?y(p,e):p,d=l.length-1,c;d>=0;d--)(c=l[d])&&(i=(o?c(p,e,i):c(i))||i);return o&&i&&u(p,e,i),i};import{LitElement as w,html as n,css as g,nothing as m}from"lit";import{customElement as f,property as s}from"lit/decorators.js";import{classMap as b}from"lit/directives/class-map.js";import{I_DONT_KNOW_MESSAGE as v,MARKPROMPT_COMPLETIONS_URL as x,DEFAULT_MODEL as z,submitPrompt as S}from"@markprompt/core";import{unified as k}from"unified";import I from"remark-parse";import T from"remark-rehype";import q from"rehype-sanitize";import $ from"rehype-stringify";import E from"remark-gfm";import{until as R}from"lit/directives/until.js";import{unsafeHTML as A}from"lit/directives/unsafe-html.js";let t=class extends w{constructor(){super(...arguments);this.model=z;this.iDontKnowMessage=v;this.completionsUrl=x;this.projectKey="";this.dark=!0;this.accentColor="";this.responseStyle="";this.referenceItemStyle="";this.placeholder="Ask me anything\u2026";this.prompt="";this.idToRefMap={};this.loading=!1;this.answer="";this.references=[]}onInput(e){const o=e.target;this.prompt=o.value}scrollToBottom(){const e=this.renderRoot.querySelector("#result");e.scrollTop=e.scrollHeight}getRefFromId(e){}reset(){const e=this.renderRoot.querySelector("#prompt-input");e.value="",this.answer="",this.references=[],this.loading=!1}focus(){this.renderRoot.querySelector("#prompt-input").focus()}async onSubmit(e){e.preventDefault(),this.prompt!==""&&(this.answer="",this.references=[],this.loading=!0,await S(this.prompt,this.projectKey,o=>{this.scrollToBottom(),this.answer+=o},o=>{this.scrollToBottom(),this.references=o},{model:this.model,iDontKnowMessage:this.iDontKnowMessage,completionsUrl:this.completionsUrl}),this.loading=!1)}async renderMarkdown(e){const o=await k().use(I).use(E).use(T,{allowDangerousHtml:!0}).use(q).use($).process(e);return typeof o.value!="string"?"":A(o.value)}render(){return n`
       <div class="root">
-        <div class="prompt">
+        <div class="input-container">
           <svg
@@ -34,14 +34,8 @@ xmlns="http://www.w3.org/2000/svg"
 
-        <div
-          class="${b({gradient:!0,"gradient-dark":this.dark})}"
-        ></div>
-        <prose-block class="response" id="response">
+        <div class="gradient"></div>
+        <prose-block class="result" id="result">
           <div class="answer prose">
-            ${this.loading&&!(this.answer.length>0)?n`<animated-caret
-                  style="${this.accentColor?`color: ${this.accentColor}`:"color: rgb(217, 70, 239);"}"
-                ></animated-caret>`:m}
+            ${this.loading&&!(this.answer.length>0)?n`<animated-caret class="caret"></animated-caret>`:m}
             ${R(this.renderMarkdown(this.answer),m)}
-            ${this.loading&&this.answer.length>0?n`<animated-caret
-                  style="${this.accentColor?`color: ${this.accentColor}`:"color: rgb(217, 70, 239);"}"
-                ></animated-caret>`:m}
+            ${this.loading&&this.answer.length>0?n`<animated-caret class="caret"></animated-caret>`:m}
           </div>
@@ -57,10 +51,6 @@ ${this.answer.length>0&&this.references.length>0?n`
                             href="${o.href}"
-                            style="color: ${this.accentColor||"#0ea5e9"}"
                             class="reference-item"
                           >
                             ${o.label||e}</a
-                          >`:n`<div
-                          style="color: ${this.accentColor||"#0ea5e9"}"
-                          class="reference-item"
-                        >
+                          >`:n`<div class="reference-item">
                           ${e}
@@ -83,3 +73,3 @@ </div>`})}
 
-    .prompt {
+    .input-container {
       box-sizing: border-box;
@@ -93,10 +83,11 @@ padding: 1rem;
       border-bottom-width: 1px;
-      border-color: #e5e5e5;
+      background-color: var(--input-bg-color);
+      border-color: var(--border-color);
       height: 3rem;
     }
 
-    .prompt svg {
+    .input-container svg {
       height: 20px;
       width: 20px;
-      color: #aaa;
+      color: var(--search-icon-color);
       flex: none;
@@ -117,2 +108,3 @@ }
       background-color: transparent;
+      color: var(--text-color);
       font-size: 1rem;
@@ -122,3 +114,3 @@ }
     .prompt-input::placeholder {
-      color: #a3a3a3;
+      color: var(--input-placeholder-color);
     }
@@ -142,10 +134,10 @@
 
-    .gradient-dark {
-      background-image: linear-gradient(to top, #050505, rgb(5 5 5 / 0));
+    .dark .gradient {
+      // background-image: linear-gradient(to top, #050505, rgb(5 5 5 / 0));
     }
 
-    .response {
+    .result {
       box-sizing: border-box;
-      background-color: #fafafa;
-      border-top: 1px solid #e5e5e5;
+      border-top: 1px solid var(--border-color);
+      background-color: var(--result-bg-color);
       scrollbar-width: none;
@@ -164,8 +156,9 @@ -ms-overflow-style: none;
 
-    .response::-webkit-scrollbar {
+    .result::-webkit-scrollbar {
       display: none;
     }
 
-    .response .answer {
+    .result .answer {
       padding: 2rem;
+      color: var(--text-color);
     }
@@ -178,3 +171,3 @@
     .references-container {
-      border-top: 1px solid #e5e5e5;
+      border-top: 1px solid var(--border-color);
       padding: 2rem;
@@ -201,5 +194,6 @@ font-size: 0.875rem;
       border-radius: 0.375rem;
-      border: 1px solid #e5e5e5;
+      border: 1px solid var(--border-color);
+      color: var(--accent-color);
       text-decoration: none;
-      background-color: #f5f5f5;
+      background-color: var(--reference-item-bg-color);
       transition-property: background-color, border-color, color, fill, stroke,
@@ -211,5 +205,9 @@ opacity, box-shadow, transform;
     .reference-item:hover {
-      background-color: #ebebeb;
+      background-color: var(--reference-item-bg-color-hover);
     }
 
+    .caret {
+      color: var(--caret-color);
+    }
+
     @keyframes slide-up {
@@ -216,0 +214,0 @@ from {

package.json

 {
   "name": "@markprompt/web",
-  "version": "0.2.2-beta34",
+  "version": "0.2.2-beta35",
   "description": "A web component for adding GPT-4 powered search using the Markprompt API.",
@@ -5,0 +5,0 @@ "author": "Motif",

No alert changes

Worsened metrics

Total package byte prevSize

640350

decreased by-0.05%

Lines of code

16290

decreased by-0.06%

No dependency changes