@markprompt/web - npm Package Compare versions

Comparing version 0.2.2-beta26 to 0.2.2-beta27

dist/markprompt-content.js

@@ -1,5 +0,17 @@
-var u=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var r=(l,p,o,e)=>{for(var i=e>1?void 0:e?y(p,o):p,d=l.length-1,w;d>=0;d--)(w=l[d])&&(i=(e?w(p,o,i):w(i))||i);return e&&i&&u(p,o,i),i};import{LitElement as c,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 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 c{constructor(){super(...arguments);this.model=z;this.iDontKnowMessage=v;this.completionsUrl=x;this.projectKey="";this.dark=!1;this.responseStyle="";this.referenceItemStyle="";this.placeholder="Ask me anything\u2026";this.prompt="";this.idToRefMap={};this.loading=!1;this.answer="";this.references=[]}onInput(o){const e=o.target;this.prompt=e.value}scrollToBottom(){const o=this.renderRoot.querySelector("#response");o.scrollTop=o.scrollHeight}getRefFromId(o){}async onSubmit(o){o.preventDefault(),this.prompt!==""&&(this.answer="",this.references=[],this.loading=!0,await k(this.prompt,this.projectKey,e=>{this.scrollToBottom(),this.answer+=e},e=>{this.scrollToBottom(),this.references=e},{model:this.model,iDontKnowMessage:this.iDontKnowMessage,completionsUrl:this.completionsUrl}),this.loading=!1)}async renderMarkdown(o){const e=await S().use(I).use(E).use(T,{allowDangerousHtml:!0}).use(q).use($).process(o);return typeof e.value!="string"?"":A(e.value)}render(){return n`
-      <div class="root markprompt">
+var u=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var o=(l,p,t,e)=>{for(var i=e>1?void 0:e?y(p,t):p,d=l.length-1,c;d>=0;d--)(c=l[d])&&(i=(e?c(p,t,i):c(i))||i);return e&&i&&u(p,t,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 A}from"lit/directives/until.js";import{unsafeHTML as R}from"lit/directives/unsafe-html.js";let r=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(t){const e=t.target;this.prompt=e.value}scrollToBottom(){const t=this.renderRoot.querySelector("#response");t.scrollTop=t.scrollHeight}getRefFromId(t){}async onSubmit(t){t.preventDefault(),this.prompt!==""&&(this.answer="",this.references=[],this.loading=!0,await k(this.prompt,this.projectKey,e=>{this.scrollToBottom(),this.answer+=e},e=>{this.scrollToBottom(),this.references=e},{model:this.model,iDontKnowMessage:this.iDontKnowMessage,completionsUrl:this.completionsUrl}),this.loading=!1)}async renderMarkdown(t){const e=await S().use($).use(E).use(I,{allowDangerousHtml:!0}).use(T).use(q).process(t);return typeof e.value!="string"?"":R(e.value)}render(){return n`
+      <div class="root">
         <div class="prompt">
-          <form @submit="${this.onSubmit}">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
+              clip-rule="evenodd"
+            />
+          </svg>
+
+          <form class="prompt-form" @submit="${this.onSubmit}">
             <input
@@ -25,17 +37,31 @@ class="prompt-input"
         <prose-block class="response" id="response">
-          ${this.loading&&!(this.answer.length>0)?n`<animated-caret class="caret"></animated-caret>`:m}
-          ${R(this.renderMarkdown(this.answer),m)}
-          ${this.answer.length>0&&!this.loading?n`<animated-caret class="caret"></animated-caret>`:m}
+          <div class="answer">
+            ${this.loading&&!(this.answer.length>0)?n`<animated-caret
+                  style="${this.accentColor?`color: ${this.accentColor}`:"color: rgb(217, 70, 239);"}"
+                ></animated-caret>`:m}
+            ${A(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}
+          </div>
           ${this.answer.length>0&&this.references.length>0?n`
                 <div class="references-container">
-                  <p>Generated from the following sources:</p>
-                  <div class="references">
-                    ${this.references.map(o=>{let e=this.idToRefMap?this.idToRefMap[o]:void 0;return console.log("refInfo 1",e),e||(e=this.getRefFromId(o),console.log("refInfo 2",e)),e&&e.href?n`<a
-                          href="${e.href}"
+                  <div
+                    class="${b({"animate-slide-up":!this.loading})}"
+                  >
+                    <p>Generated from the following sources:</p>
+                    <div class="references">
+                      ${this.references.map(t=>{let e=this.idToRefMap?this.idToRefMap[t]:void 0;return console.log("refInfo 1",e),e||(e=this.getRefFromId(t),console.log("refInfo 2",e)),e&&e.href?n`<a
+                            href="${e.href}"
+                            style="color: ${this.accentColor||"#0ea5e9"}"
+                            class="reference-item"
+                          >
+                            ${e.label||t}</a
+                          >`:n`<div
+                          style="color: ${this.accentColor||"#0ea5e9"}"
                           class="reference-item"
                         >
-                          ${e.label||o}</a
-                        >`:n`<div class="reference-item">
-                        ${o}
-                      </div>`})}
+                          ${t}
+                        </div>`})}
+                    </div>
                   </div>
@@ -47,3 +73,3 @@ </div>
       </div>
-    `}};t.styles=g`
+    `}};r.styles=g`
     .root {
@@ -57,23 +83,38 @@ position: relative;
     .prompt {
+      box-sizing: border-box;
+      padding: 1rem;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 0.5rem;
+      width: 100%;
+      border-bottom-width: 1px;
+      border-color: #e5e5e5;
       height: 3rem;
-      border-bottom-width: 1px;
-      border-bottom-color: rgb(23 23 23);
-      background-color: var(--prompt-bg-color);
     }
 
+    .prompt svg {
+      height: 20px;
+      width: 20px;
+      color: #aaa;
+      flex: none;
+    }
+
+    .prompt-form {
+      flex-grow: 1;
+    }
+
     .prompt-input {
+      box-sizing: border-box;
       width: 100%;
+      padding: 4px;
       appearance: none;
       border-radius: 0.375rem;
-      border-width: 0;
+      border-width: 0px;
       background-color: transparent;
-      padding-inline: 0;
-      padding-block-start: 0.25rem;
-      padding-block-end: 0.5rem;
       font-size: 1rem;
-      line-height: 1.5rem;
     }
 
     .prompt-input::placeholder {
-      color: rgb(115 115 115);
+      color: #a3a3a3;
     }
@@ -102,2 +143,5 @@
     .response {
+      box-sizing: border-box;
+      background-color: #fafafa;
+      border-top: 1px solid #e5e5e5;
       scrollbar-width: none;
@@ -114,4 +158,2 @@ -ms-overflow-style: none;
       scroll-behavior: smooth;
-      padding-block-start: 1rem;
-      padding-block-end: 2rem;
     }
@@ -123,4 +165,4 @@
 
-    .caret {
-      color: rgb(217, 70, 239);
+    .response .answer {
+      padding: 1rem;
     }
@@ -133,6 +175,4 @@
     .references-container {
-      margin-block-start: 1rem;
-      border-block-start-width: 1px;
-      border-color: rgb(23 23 23 / 1);
-      padding-block-start: 0.25rem;
+      border-top: 1px solid #e5e5e5;
+      padding: 1rem;
       font-size: 0.875rem;
@@ -150,3 +190,40 @@ line-height: 1.25rem;
     }
-  `,r([s({type:String})],t.prototype,"model",2),r([s({type:String})],t.prototype,"iDontKnowMessage",2),r([s({type:String})],t.prototype,"completionsUrl",2),r([s({type:String})],t.prototype,"projectKey",2),r([s({type:Boolean})],t.prototype,"dark",2),r([s({type:String})],t.prototype,"responseStyle",2),r([s({type:String})],t.prototype,"referenceItemStyle",2),r([s({type:String})],t.prototype,"placeholder",2),r([s({type:String,state:!0})],t.prototype,"prompt",2),r([s({type:Object})],t.prototype,"idToRefMap",2),r([s({type:Boolean,state:!0})],t.prototype,"loading",2),r([s({type:String,state:!0})],t.prototype,"answer",2),r([s({type:Array,state:!0})],t.prototype,"references",2),t=r([f("markprompt-content")],t);let h=class extends c{render(){return n`<span></span>`}};h.styles=g`
+
+    .reference-item {
+      font-weight: 500;
+      padding-left: 0.5rem;
+      padding-right: 0.5rem;
+      padding-top: 0.25rem;
+      padding-bottom: 0.25rem;
+      border-radius: 0.375rem;
+      border: 1px solid #e5e5e5;
+      text-decoration: none;
+      background-color: #f5f5f5;
+      transition-property: background-color, border-color, color, fill, stroke,
+        opacity, box-shadow, transform;
+      transition-duration: 200ms;
+    }
+
+    .reference-item:hover {
+      background-color: #ebebeb;
+    }
+
+    @keyframes slide-up {
+      from {
+        opacity: 0;
+        transform: translateY(16px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    .animate-slide-up {
+      animation-name: slide-up;
+      animation-duration: 1s;
+      animation-fill-mode: both;
+      transition-timing-function: ease-in-out;
+    }
+  `,o([s({type:String})],r.prototype,"model",2),o([s({type:String})],r.prototype,"iDontKnowMessage",2),o([s({type:String})],r.prototype,"completionsUrl",2),o([s({type:String})],r.prototype,"projectKey",2),o([s({type:Boolean})],r.prototype,"dark",2),o([s({type:String})],r.prototype,"accentColor",2),o([s({type:String})],r.prototype,"responseStyle",2),o([s({type:String})],r.prototype,"referenceItemStyle",2),o([s({type:String})],r.prototype,"placeholder",2),o([s({type:String,state:!0})],r.prototype,"prompt",2),o([s({type:Object})],r.prototype,"idToRefMap",2),o([s({type:Boolean,state:!0})],r.prototype,"loading",2),o([s({type:String,state:!0})],r.prototype,"answer",2),o([s({type:Array,state:!0})],r.prototype,"references",2),r=o([f("markprompt-content")],r);let h=class extends w{render(){return n`<span></span>`}};h.styles=g`
     :host {
@@ -176,3 +253,3 @@ display: inline-block;
     }
-  `,h=r([f("animated-caret")],h);let a=class extends c{constructor(){super(...arguments);this.class=""}render(){return n`
+  `,h=o([f("animated-caret")],h);let a=class extends w{constructor(){super(...arguments);this.class=""}render(){return n`
       <div
@@ -817,2 +894,2 @@ class="${b({prose:!0,[this.class]:this.class.length>0})}"
     }
-  `,r([s({type:String})],a.prototype,"class",2),a=r([f("prose-block")],a);export{h as Caret,t as Markprompt,a as ProseBlock};
+  `,o([s({type:String})],a.prototype,"class",2),a=o([f("prose-block")],a);export{h as Caret,r as Markprompt,a as ProseBlock};

package.json

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

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

639453

increased by1.01%

Lines of code

16270

increased by1.35%

No dependency changes