@markprompt/web - npm Package Compare versions

Comparing version 0.2.3 to 0.3.1-beta1

dist/index.d.ts

 import 'client-only';
-import { OpenAIModelId } from '@markprompt/core';
-import './markprompt-content.js';
-declare global {
-    interface Window {
-        markprompt: {
-            projectKey: string;
-            completionsUrl?: string;
-            model?: OpenAIModelId;
-            iDontKnowMessage?: string;
-            placeholder?: string;
-            dark?: boolean;
-            accentColor?: string;
-            idToRefMap?: {
-                [key: string]: {
-                    label: string;
-                    href: string;
-                };
-            };
-        };
-    }
-}
+import './markprompt-content';
 //# sourceMappingURL=index.d.ts.map

dist/index.js

@@ -1,1 +0,39 @@
-import"client-only";import'./markprompt-content.js';
+import 'client-only';
+import './markprompt-content';
+// declare global {
+//   interface Window {
+//     'markprompt-content': {
+//       projectKey: string;
+//       promptTemplate?: string;
+//       completionsUrl?: string;
+//       model?: OpenAIModelId;
+//       iDontKnowMessage?: string;
+//       placeholder?: string;
+//       idToRefMap?: { [key: string]: { label: string; href: string } };
+//     };
+//   }
+// }
+// const required = ['projectKey'] as const;
+// const optional = [
+//   'completionsUrl',
+//   'dark',
+//   'iDontKnowMessage',
+//   'model',
+//   'placeholder',
+// ];
+// (async () => {
+//   const root = document.createElement('markprompt-content');
+//   // const markprompt = window.markprompt;
+//   // for (let key of required) {
+//   //   if (!markprompt?.[key]) {
+//   //     throw new Error(`Missing Markprompt configuration option: ${key}`);
+//   //   }
+//   //   root.setAttribute(key, markprompt[key]);
+//   // }
+//   // for (let key of optional) {
+//   //   if (!markprompt?.[key]) continue;
+//   //   root.setAttribute(key, markprompt[key]);
+//   // }
+//   document.body.appendChild(root);
+// })();
+//# sourceMappingURL=index.js.map

dist/markprompt-content.d.ts

@@ -0,3 +1,4 @@
+import { OpenAIModelId } from '@markprompt/core';
 import { LitElement } from 'lit';
-import { OpenAIModelId } from '@markprompt/core';
+import { Ref } from 'lit/directives/ref.js';
 declare global {
@@ -12,22 +13,27 @@ interface HTMLElementTagNameMap {
     model: OpenAIModelId;
-    iDontKnowMessage: "Sorry, I am not sure how to answer that.";
-    completionsUrl: "https://api.markprompt.com/v1/completions";
+    promptTemplate: string | undefined;
+    iDontKnowMessage: string;
+    completionsUrl: string;
     projectKey: string;
-    dark: boolean;
-    accentColor: string;
-    responseStyle: string;
-    referenceItemStyle: string;
     placeholder: string;
     prompt: string;
-    idToRefMap: {};
+    idToRefMap: Record<typeof this.references[number], {
+        href: string;
+        label: string;
+    }>;
     loading: boolean;
     answer: string;
-    references: any[];
+    references: string[];
+    controller: AbortController;
+    inputRef: Ref<HTMLInputElement>;
+    resultRef: Ref<HTMLDivElement>;
     static styles: import("lit").CSSResult;
+    disconnectedCallback(): void;
     onInput(event: Event): void;
     scrollToBottom(): void;
-    getRefFromId(id: string): any;
-    show(): void;
+    getRefFromId(id: string): undefined;
+    reset(): void;
+    focus(): void;
     onSubmit(event: Event): Promise<void>;
-    renderMarkdown(markdown: string): Promise<import("lit-html/directive").DirectiveResult<typeof import("lit-html/directives/unsafe-html").UnsafeHTMLDirective>>;
+    renderMarkdown(markdown: string): Promise<import("lit-html/directive.js").DirectiveResult<typeof import("lit-html/directives/unsafe-html.js").UnsafeHTMLDirective>>;
     render(): import("lit-html").TemplateResult<1>;
@@ -34,0 +40,0 @@ }

dist/markprompt-content.js

@@ -1,2 +0,105 @@
-var u=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var r=(l,p,e,o)=>{for(var i=o>1?void 0:o?v(p,e):p,c=l.length-1,d;c>=0;c--)(d=l[c])&&(i=(o?d(p,e,i):d(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 y,MARKPROMPT_COMPLETIONS_URL as x,DEFAULT_MODEL as z,submitPrompt as k}from"@markprompt/core";import{unified as T}from"unified";import S from"remark-parse";import q from"remark-rehype";import I 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=y;this.completionsUrl=x;this.projectKey="";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 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.promptTemplate?{promptTemplate:this.promptTemplate}:{}}),this.loading=!1)}async renderMarkdown(e){const o=await T().use(S).use(E).use(q,{allowDangerousHtml:!0}).use(I).use($).process(e);return typeof o.value!="string"?"":A(o.value)}render(){return n`
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { DEFAULT_MODEL, I_DONT_KNOW_MESSAGE, MARKPROMPT_COMPLETIONS_URL, submitPrompt, } from '@markprompt/core';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { until } from 'lit/directives/until.js';
+import rehypeSanitize from 'rehype-sanitize';
+import rehypeStringify from 'rehype-stringify';
+import remarkGfm from 'remark-gfm';
+import remarkParse from 'remark-parse';
+import remarkRehype from 'remark-rehype';
+import { unified } from 'unified';
+let Markprompt = class Markprompt extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.model = DEFAULT_MODEL;
+        this.promptTemplate = undefined;
+        this.iDontKnowMessage = I_DONT_KNOW_MESSAGE;
+        this.completionsUrl = MARKPROMPT_COMPLETIONS_URL;
+        this.projectKey = '';
+        this.placeholder = 'Ask me anything…';
+        this.prompt = '';
+        this.idToRefMap = {};
+        this.loading = false;
+        this.answer = '';
+        this.references = [];
+        this.controller = new AbortController();
+        this.inputRef = createRef();
+        this.resultRef = createRef();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        // abort requests on removal from DOM
+        this.controller.abort();
+    }
+    onInput(event) {
+        const input = event.target;
+        this.prompt = input.value;
+    }
+    scrollToBottom() {
+        const results = this.resultRef.value;
+        if (!results)
+            return;
+        results.scrollTop = results.scrollHeight;
+    }
+    getRefFromId(id) {
+        return undefined;
+    }
+    reset() {
+        this.prompt = '';
+        this.answer = '';
+        this.references = [];
+        this.loading = false;
+    }
+    focus() {
+        const input = this.inputRef.value;
+        input?.focus();
+    }
+    async onSubmit(event) {
+        event.preventDefault();
+        if (this.prompt === '')
+            return;
+        this.answer = '';
+        this.references = [];
+        this.loading = true;
+        await submitPrompt(this.prompt, this.projectKey, (chunk) => {
+            this.scrollToBottom();
+            this.answer += chunk;
+        }, (references) => {
+            this.scrollToBottom();
+            this.references = references;
+        }, (error) => {
+            console.error(error);
+        }, {
+            model: this.model,
+            iDontKnowMessage: this.iDontKnowMessage,
+            completionsUrl: this.completionsUrl,
+            signal: this.controller.signal,
+            ...(this.promptTemplate ? { promptTemplate: this.promptTemplate } : {}),
+        });
+        this.loading = false;
+    }
+    async renderMarkdown(markdown) {
+        const file = await unified()
+            .use(remarkParse)
+            .use(remarkGfm)
+            .use(remarkRehype, { allowDangerousHtml: true })
+            .use(rehypeSanitize)
+            .use(rehypeStringify)
+            .process(markdown);
+        if (typeof file.value !== 'string') {
+            return '';
+        }
+        return unsafeHTML(file.value);
+    }
+    render() {
+        return html `
       <div class="root">
@@ -18,3 +121,3 @@ <div class="input-container">
             <input
-              id="prompt-input"
+              ${ref(this.inputRef)}
               class="prompt-input"
@@ -36,31 +139,53 @@ type="text"
         <div class="gradient"></div>
-        <prose-block class="result" id="result">
-          <div class="answer prose">
-            ${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 class="caret"></animated-caret>`:m}
+        <prose-block class="result" ${ref(this.resultRef)}>
+          <div class="answer">
+            ${this.loading && !(this.answer.length > 0)
+            ? html `<animated-caret class="caret"></animated-caret>`
+            : nothing}
+            ${until(this.renderMarkdown(this.answer), nothing)}
+            ${this.loading && this.answer.length > 0
+            ? html `<animated-caret class="caret"></animated-caret>`
+            : nothing}
           </div>
-          ${this.answer.length>0&&this.references.length>0?n`
+          ${this.answer.length > 0 && this.references.length > 0
+            ? html `
                 <div class="references-container">
                   <div
-                    class="${b({"animate-slide-up":!this.loading})}"
+                    class="${classMap({
+                'animate-slide-up': !this.loading,
+            })}"
                   >
                     <p>Generated from the following sources:</p>
                     <div class="references">
-                      ${this.references.map(e=>{let o=this.idToRefMap?this.idToRefMap[e]:void 0;return o||(o=this.getRefFromId(e)),o&&o.href?n`<a
-                            href="${o.href}"
+                      ${this.references.map((reference) => {
+                let refInfo = this.idToRefMap
+                    ? this.idToRefMap[reference]
+                    : undefined;
+                if (!refInfo) {
+                    refInfo = this.getRefFromId(reference);
+                }
+                if (refInfo && refInfo.href) {
+                    return html `<a
+                            href="${refInfo.href}"
                             class="reference-item"
                           >
-                            ${o.label||e}</a
-                          >`:n`<div class="reference-item">
-                          ${e}
-                        </div>`})}
+                            ${refInfo.label || reference}</a
+                          >`;
+                }
+                return html `<div class="reference-item">
+                          ${reference}
+                        </div>`;
+            })}
                     </div>
                   </div>
                 </div>
-              `:m}
+              `
+            : nothing}
           <div class="spacer"></div>
         </prose-block>
       </div>
-    `}};t.styles=g`
+    `;
+    }
+};
+Markprompt.styles = css `
     .root {
@@ -160,2 +285,7 @@ position: relative;
 
+    .answer pre {
+      max-width: 100%;
+      overflow-x: hidden;
+    }
+
     .answer a {
@@ -226,3 +356,46 @@ color: var(--link-color);
     }
-  `,r([s({type:String})],t.prototype,"model",2),r([s({type:String})],t.prototype,"promptTemplate",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: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 w{render(){return n`<span></span>`}};h.styles=g`
+  `;
+__decorate([
+    property({ type: String })
+], Markprompt.prototype, "model", void 0);
+__decorate([
+    property({ type: String })
+], Markprompt.prototype, "promptTemplate", void 0);
+__decorate([
+    property({ type: String })
+], Markprompt.prototype, "iDontKnowMessage", void 0);
+__decorate([
+    property({ type: String })
+], Markprompt.prototype, "completionsUrl", void 0);
+__decorate([
+    property({ type: String })
+], Markprompt.prototype, "projectKey", void 0);
+__decorate([
+    property({ type: String })
+], Markprompt.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: String, state: true })
+], Markprompt.prototype, "prompt", void 0);
+__decorate([
+    property({ type: Object })
+], Markprompt.prototype, "idToRefMap", void 0);
+__decorate([
+    property({ type: Boolean, state: true })
+], Markprompt.prototype, "loading", void 0);
+__decorate([
+    property({ type: String, state: true })
+], Markprompt.prototype, "answer", void 0);
+__decorate([
+    property({ type: Array, state: true })
+], Markprompt.prototype, "references", void 0);
+Markprompt = __decorate([
+    customElement('markprompt-content')
+], Markprompt);
+export { Markprompt };
+let Caret = class Caret extends LitElement {
+    render() {
+        return html `<span></span>`;
+    }
+};
+Caret.styles = css `
     :host {
@@ -251,9 +424,26 @@ display: inline-block;
     }
-  `,h=r([f("animated-caret")],h);let a=class extends w{constructor(){super(...arguments);this.class=""}render(){return n`
+  `;
+Caret = __decorate([
+    customElement('animated-caret')
+], Caret);
+export { Caret };
+let ProseBlock = class ProseBlock extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.class = '';
+    }
+    render() {
+        return html `
       <div
-        class="${b({prose:!0,[this.class]:this.class.length>0})}"
+        class="${classMap({
+            prose: true,
+            [this.class]: this.class.length > 0,
+        })}"
       >
         <slot></slot>
       </div>
-    `}};a.styles=g`
+    `;
+    }
+};
+ProseBlock.styles = css `
     .prose {
@@ -892,2 +1082,10 @@ color: var(--tw-prose-body);
     }
-  `,r([s({type:String})],a.prototype,"class",2),a=r([f("prose-block")],a);export{h as Caret,t as Markprompt,a as ProseBlock};
+  `;
+__decorate([
+    property({ type: String })
+], ProseBlock.prototype, "class", void 0);
+ProseBlock = __decorate([
+    customElement('prose-block')
+], ProseBlock);
+export { ProseBlock };
+//# sourceMappingURL=markprompt-content.js.map

package.json

 {
   "name": "@markprompt/web",
-  "version": "0.2.3",
+  "version": "0.3.1-beta1",
   "description": "A web component for adding GPT-4 powered search using the Markprompt API.",
   "author": "Motif",
-  "main": "dist/index.cjs",
-  "typings": "dist/index.d.ts",
-  "module": "dist/markprompt.esm.js",
+  "main": "dist/index.js",
+  "exports": "./dist/index.js",
   "license": "MIT",
@@ -15,7 +14,2 @@ "type": "module",
   ],
-  "exports": {
-    "import": "./dist/markprompt.esm.js",
-    "require": "./dist/index.cjs",
-    "types": "./dist/index.d.ts"
-  },
   "repository": {
@@ -30,8 +24,9 @@ "type": "git",
   "scripts": {
-    "dev": "npx tsc -b -w",
-    "build": "./scripts/build.sh --external:react --external:react-dom",
+    "prepack": "tsc --build",
+    "dev": "tsc --build --watch",
+    "build": "tsc --build",
     "vite": "vite"
   },
   "dependencies": {
-    "@markprompt/core": "0.2.1",
+    "@markprompt/core": "^0.3.0",
     "lit": "^2.7.2",
@@ -38,0 +33,0 @@ "rehype-sanitize": "^5.0.1",

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

647349

increased by1.73%

Number of package files

14

increased by16.67%

Lines of code

16498

increased by1.29%

Number of medium supply chain risk alerts

2

decreased by-33.33%

Dependency changes

• + Added@markprompt/core@0.3.2(transitive)

• - Removed@markprompt/core@0.2.1(transitive)

• Updated@markprompt/core@^0.3.0