@pickaxeproject/react 0.0.28 → 0.0.30

package/dist/esm/components/Pickaxe/common/PickaxeMarkdown.js

@@ -1 +0,0 @@
-import{jsx as e}from"react/jsx-runtime";import{useRef as t,useEffect as o,useMemo as r}from"react";import{marked as n}from"marked";import{renderer as c}from"../../../common/renderer.js";import{usePickaxeContext as i}from"../../../hooks/pickaxe/usePickaxeContext.js";import{useStyleFontSize as s}from"../../../hooks/studio/useStyleFontSize.js";import{useLinkPreviews as m}from"../../../hooks/pickaxe/useLinkPreviews.js";import{useActions as a}from"../../../hooks/pickaxe/useActions.js";import l from"marked-katex-extension";import d from"copy-to-clipboard";import u from"../../Core/HtmlRenderer.js";import p from"../../../common/cn.js";n.use(l({throwOnError:!1,output:"mathml"}));const h=({html:l,className:h,style:f,marked:b,renderer:k,onClick:y})=>{const{styles:v,colors:w}=i(),x=t(null),g=s({type:"body"});m(x,{theme:v.theme}),a(x,{theme:v.theme,accentColor:w.accent,accentTextColor:w.accentText}),o((()=>{const e=x.current;if(!e)return;const t=e=>{var t,o,r;const n=e.target.closest(".copy-code-button");if(n){const e=null!==(r=null===(o=null===(t=n.parentElement)||void 0===t?void 0:t.querySelector("code"))||void 0===o?void 0:o.textContent)&&void 0!==r?r:"";if(!e)return;d(e)}};return e.addEventListener("click",t),()=>{e.removeEventListener("click",t)}}),[x]);const j=r((()=>{let e=l||"";const t=e.match(/<iframe\s+[^>]*src=["']https:\/\/www\.youtube\.com\/embed\/([\w-]+)(\?[^"' >]*)?["'][^>]*><\/iframe>/gi);return t&&t.forEach((t=>{var o;const r=`<div style="width: 100%; height: 315px; max-width: 560px;">\n    <iframe src="https://www.youtube.com/embed/${null===(o=t.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([\w-]+)/))||void 0===o?void 0:o[1]}"\n        style="width: 100%; height: 100%;"\n        frameborder="0"\n        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"\n        allowfullscreen>\n    </iframe>\n</div>`;e=e.replace(t,r)})),e.replace(/```[\s\S]*?```|(\n(?=\n))/g,((e,t)=>t?"\n\n<br/>\n":e))}),[l]);return e("div",Object.assign({ref:x},{children:e(u,{html:n.parse(j,Object.assign({gfm:!0,breaks:!0,renderer:c(Object.assign(Object.assign({},k),{theme:v.theme,accentColor:w.accent,centerMedia:!1,linkPreviews:!0,actions:!0}))},b)).toString(),className:p(h,g()),style:f,onClick:y})}))};export{h as default};

package/dist/esm/hooks/pickaxe/useActions.js

@@ -1 +0,0 @@
-import{__awaiter as e}from"../../_virtual/_tslib.js";import{useEffect as t}from"react";import{marked as o}from"marked";import{renderer as n}from"../../common/renderer.js";import{streamer as r}from"../../common/api/streamer.js";import l from"../../common/api/utils.js";const i=(t,r)=>e(void 0,void 0,void 0,(function*(){var e,l;const i=t.replace(/```[\s\S]*?```|(\n(?=\n))/g,((e,t)=>t?"\n\n<br/>\n":e));return yield o.parse(i,{gfm:!0,breaks:!0,renderer:n({theme:null!==(e=null==r?void 0:r.theme)&&void 0!==e?e:"light",accentColor:null!==(l=null==r?void 0:r.accentColor)&&void 0!==l?l:"#228DD7",centerMedia:!1,linkPreviews:!0,actions:!0})})})),s=(t,o)=>e(void 0,void 0,void 0,(function*(){try{yield l.post("/fn/update",{id:t,data:o})}catch(e){console.error("[updateCache] error",e)}})),d=(o,n)=>{t((()=>{const t=null==o?void 0:o.current;if(!t)return;const l=new MutationObserver((()=>e(void 0,void 0,void 0,(function*(){var e,t,o,l,d,c,a;const u=document.querySelectorAll(".marked-link-function-calling-loader");for(const m of u){if(m.dataset.processed)continue;"development"===process.env.NODE_ENV&&console.log("[useActions] getting action",m.href);const u=null!==(o=null!==(t=null===(e=m.parentElement)||void 0===e?void 0:e.parentElement)&&void 0!==t?t:m.parentElement)&&void 0!==o?o:null;if(!u){console.error("[useActions] missing message container");continue}const p=null!==(l=m.getAttribute("alt"))&&void 0!==l?l:m.getAttribute("data-fn-url");if(!p){console.error("[useActions] missing fn result url");continue}const f=yield fetch(p);if(200!==f.status){console.error("[useActions] failed fetching result:",f);continue}const v=yield f.json();if(v.error)console.error("[useActions] error in req:",v.error);else if(v.fcid)"development"===process.env.NODE_ENV&&console.log("[useActions] waiting for fn call to complete");else{if(v.url){m.remove();const e=document.createElement("img");e.src=v.url,e.alt=null!==(d=v.prompt)&&void 0!==d?d:"Generated Image",e.style.marginTop="1em",e.style.borderRadius="4px",e.style.width="100%",u.appendChild(e);const t=document.createElement("div");t.style.marginTop="1em",t.style.display="flex",t.style.alignItems="center",t.style.justifyContent="flex-end",t.style.gap="0.5em",t.style.width="100%";const o=document.createElement("button");o.innerHTML='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M21 21H3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n<path d="M7 10L12 15L17 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n<path d="M12 15V3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n</svg>\n',o.style.padding=".5em",o.style.backgroundColor="#228DD7",o.style.color=null!==(c=null==n?void 0:n.accentTextColor)&&void 0!==c?c:"#FFFFFF",o.style.textAlign="center",o.style.textDecoration="none",o.style.borderRadius="4px",o.style.fontSize="16px",o.style.fontWeight="bold",o.style.boxShadow="0 2px 5px rgba(0, 0, 0, 0.2)",o.style.transition="background-color 0.3s ease",o.addEventListener("mouseover",(function(){var e;o.style.backgroundColor=(null!==(e=null==n?void 0:n.accentColor)&&void 0!==e?e:"#228DD7")+"CC"})),o.addEventListener("mouseout",(function(){var e;o.style.backgroundColor=null!==(e=null==n?void 0:n.accentColor)&&void 0!==e?e:"#228DD7"})),o.addEventListener("click",(function(e){var t;e.preventDefault();const o=document.createElement("a");o.href=null!==(t=v.url)&&void 0!==t?t:"",o.download="generated_image.png",o.click()})),t.appendChild(o),u.appendChild(t)}if(v.text){m.remove();const e=document.createElement("div");e.style.marginTop="1em",e.innerHTML=yield i(v.text),u.appendChild(e)}if(v.button_link){m.remove();const e=document.createElement("a");e.href=v.button_link,e.target="_blank",e.classList.add("link-preview-button"),e.textContent=v.button_text||"",e.style.display="inline-block",e.style.padding="10px 20px",e.style.backgroundColor="#228DD7",e.style.color="#ffffff",e.style.textAlign="center",e.style.textDecoration="none",e.style.borderRadius="4px",e.style.fontSize="16px",e.style.fontWeight="bold",e.style.boxShadow="0 2px 5px rgba(0, 0, 0, 0.2)",e.style.transition="background-color 0.3s ease",e.addEventListener("mouseover",(function(){e.style.backgroundColor="#489dd9"})),e.addEventListener("mouseout",(function(){e.style.backgroundColor="#228DD7"})),u.appendChild(document.createElement("br")),u.appendChild(e)}if(v.openaidata&&!v.text){const e=null!==(a=new URL(p).searchParams.get("id"))&&void 0!==a?a:v.call_id,t=null==v?void 0:v.actionId;m.remove();const o=v.formId;if(!o){console.error("Missing formId from result data");continue}const n=v.responseId;if(!n){console.error("Missing responseId from result data");continue}const l=(yield r({formId:o,responseId:n,data:v.openaidata})).body;if(!l){console.error("Streaming error, no response body");continue}let d=!0,c="";const f=document.createElement("div");f.style.marginTop="1em",f.dataset.actionId=t,u.appendChild(f);const g=l.getReader(),y=new TextDecoder;for(;d;){const{value:e,done:t}=yield g.read();d=!t;c+=y.decode(e),"marked"in window?f.innerHTML=yield i(c):f.textContent=c}const b=null!=e?e:v.call_id;b&&(yield s(b,Object.assign(Object.assign({},v),{text:c})))}}}}))));return l.observe(t,{childList:!0,subtree:!0}),()=>{l.disconnect()}}),[o])};export{d as useActions};

package/dist/esm/hooks/pickaxe/useLinkPreviews.js

@@ -1 +0,0 @@
-import{__awaiter as e}from"../../_virtual/_tslib.js";import{useEffect as t}from"react";import o from"../../common/api/utils.js";import r from"../../common/error.js";const i=e=>{setTimeout((()=>{e.style.opacity="1",e.style.transform="scale(1)"}),50)},n=e=>{e.onmouseover=()=>{e.style.transform="scale(.99)"},e.onmouseout=()=>{e.style.transform="scale(1)"}},s=t=>e(void 0,void 0,void 0,(function*(){try{const e=yield o.get(`/metadata?url=${encodeURIComponent(t)}`);return e.data}catch(e){const t=r(e);return console.error("[fetchMetadata] error",t),null}})),a=(o,r)=>{t((()=>{const t=null==o?void 0:o.current;if(!t)return;const a=new MutationObserver((()=>e(void 0,void 0,void 0,(function*(){const e=t.querySelectorAll(".marked-link-possible-preview-render");for(const t of e){"development"===process.env.NODE_ENV&&console.log("[useLinkPreviews] getting preview for",t.href),t.classList.remove("marked-link-possible-preview-render");const e=t.closest(".chat-message");if(!e)continue;if(e.querySelector(`div[data-href="${t.href}"]`))continue;const o=yield s(t.href);if(!o||!o.image||!o.title)continue;const a=document.createElement("div");a.setAttribute("style","display: flex; margin-top: 2em; text-decoration: none;"),a.dataset.href=t.href,a.dataset.processed="true";const l=r?"dark"===r.theme:document.documentElement.classList.contains("dark"),d=document.createElement("a");if(d.href=t.href,d.setAttribute("target","_blank"),d.setAttribute("style",`display: flex; position: relative; flex-direction: column; border-radius: 20px; border-bottom-left-radius: 10px; width: 100%; max-width: 220px; background-color: #${l?"000000":"E9E9EB"}; overflow: hidden;`),o.image&&(o.image.startsWith("http")||o.image.startsWith("data:image")||o.image.startsWith("blob:"))){const e=document.createElement("div");e.setAttribute("style",`position: relative; flex-grow: 1; width: 100%; overflow: hidden; background-image: url("${o.image}"); background-size: cover; background-position: center; height: 90px;`),d.appendChild(e)}const c=document.createElement("div");c.setAttribute("style","display: flex; flex-direction: column; padding: 0.25em 1em; gap: 0.2em;");const m=document.createElement("p");m.textContent=o.title,m.setAttribute("style","font-size: 14px; font-weight: 600; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"),c.appendChild(m);const p=document.createElement("p");p.textContent=o.href,p.setAttribute("style","opacity: 0.6; font-size: 14px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"),c.appendChild(p),d.appendChild(c),a.appendChild(d);const u=t.closest(".chat-message");u&&(u.querySelector(`div[data-href="${t.href}"]`)||(u.appendChild(a),i(d),n(d)))}}))));return a.observe(t,{childList:!0,subtree:!0}),()=>{a.disconnect()}}),[o])};export{a as useLinkPreviews};

package/dist/esm/src/common/renderer.d.ts

@@ -1,14 +0,0 @@
-import "prismjs/components/prism-css";
-import "prismjs/components/prism-javascript";
-import "prismjs/components/prism-markdown";
-import "prismjs/components/prism-markup";
-import "prismjs/components/prism-python";
-export interface RendererOptions {
-    theme?: "light" | "dark";
-    accentColor?: string;
-    centerMedia?: boolean;
-    forceMobile?: boolean;
-    linkPreviews?: boolean;
-    actions?: boolean;
-}
-export declare const renderer: ({ theme, accentColor, centerMedia, forceMobile, linkPreviews, actions, }?: RendererOptions) => import("marked").Renderer;

package/dist/esm/src/components/Pickaxe/common/PickaxeMarkdown.d.ts

@@ -1,13 +0,0 @@
-import { type CSSProperties } from "react";
-import { type MarkedOptions } from "marked";
-import { type RendererOptions } from "../../../common/renderer";
-interface PickaxeMarkdownProps {
-    html?: string | null;
-    className?: string;
-    style?: CSSProperties;
-    renderer?: RendererOptions;
-    marked?: MarkedOptions;
-    onClick?: () => void;
-}
-declare const PickaxeMarkdown: ({ html: _html, className, style, marked: _marked, renderer: _renderer, onClick, }: PickaxeMarkdownProps) => import("react/jsx-runtime").JSX.Element;
-export default PickaxeMarkdown;

package/dist/esm/src/hooks/pickaxe/useActions.d.ts

@@ -1,8 +0,0 @@
-import { RefObject } from "react";
-interface UseActionsOptions {
-    theme?: "light" | "dark";
-    accentColor?: string;
-    accentTextColor?: string;
-}
-export declare const useActions: (ref: RefObject<HTMLDivElement> | null, opt?: UseActionsOptions) => void;
-export {};

package/dist/esm/src/hooks/pickaxe/useLinkPreviews.d.ts

@@ -1,6 +0,0 @@
-import { RefObject } from "react";
-interface UseLinkPreviewOptions {
-    theme?: "light" | "dark";
-}
-export declare const useLinkPreviews: (ref: RefObject<HTMLDivElement> | null, opt?: UseLinkPreviewOptions) => void;
-export {};