Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@markprompt/web
Advanced tools
@markprompt/web - npm Package Compare versions
Comparing version 0.2.2-beta34 to 0.2.2-beta35
@@ -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 { |
| { | ||
| "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", |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-0.05%
640350
- Lines of code
- decreased by-0.06%
16290
No dependency changes