openmagic 0.8.0 → 0.8.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cli.js +13 -18
- package/dist/cli.js.map +1 -1
- package/dist/toolbar/index.global.js +11 -11
- package/dist/toolbar/index.global.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
|
-
"use strict";var OpenMagicToolbar=(()=>{var
|
|
2
|
+
"use strict";var OpenMagicToolbar=(()=>{var q=`
|
|
3
3
|
:host {
|
|
4
4
|
all: initial;
|
|
5
5
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
@@ -198,7 +198,7 @@
|
|
|
198
198
|
.om-select option { background: #151528; color: #e0e0e0; }
|
|
199
199
|
|
|
200
200
|
.om-key-row { display: flex; gap: 6px; align-items: stretch; }
|
|
201
|
-
.om-key-input { flex: 1; min-width: 0; }
|
|
201
|
+
.om-key-input { flex: 1; min-width: 0; -webkit-text-security: disc; }
|
|
202
202
|
|
|
203
203
|
.om-btn-get-key {
|
|
204
204
|
display: flex; align-items: center; gap: 4px;
|
|
@@ -274,29 +274,29 @@
|
|
|
274
274
|
font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
|
|
275
275
|
font-size: 10px; color: #666; max-height: 80px; overflow-y: auto; margin-bottom: 8px;
|
|
276
276
|
}
|
|
277
|
-
`;var
|
|
277
|
+
`;var m=null,p=new Map,ge=[],N=[],E=!1,P=null;function _(){return Math.random().toString(36).slice(2)+Date.now().toString(36)}function O(e,t){return new Promise((o,n)=>{try{m=new WebSocket(`ws://127.0.0.1:${e}/__openmagic__/ws`),m.onopen=()=>{let i=_();R({id:i,type:"handshake",payload:{token:t}}),p.set(i,s=>{if(s.type==="handshake.ok"){E=!0;for(let r of N)m?.send(r);N=[],o()}else s.type==="error"&&n(new Error(s.payload?.message||"Handshake failed"))})},m.onmessage=i=>{try{let s=JSON.parse(i.data);s.id&&p.has(s.id)&&(p.get(s.id)(s),(s.type==="llm.done"||s.type==="llm.error"||!s.type.startsWith("llm."))&&p.delete(s.id));for(let r of ge)r(s)}catch{}},m.onclose=()=>{E=!1,P||(P=setTimeout(()=>{P=null,O(e,t).catch(()=>{})},2e3))},m.onerror=()=>{}}catch(i){n(i)}})}function R(e){let t=JSON.stringify(e);m&&m.readyState===WebSocket.OPEN&&E?m.send(t):N.push(t)}function w(e,t){return new Promise((o,n)=>{let i=_(),s=setTimeout(()=>{p.delete(i),n(new Error("Request timeout"))},3e4);p.set(i,r=>{clearTimeout(s),r.type==="error"?n(new Error(r.payload?.message||"Unknown error")):o(r)}),R({id:i,type:e,payload:t})})}function B(e,t,o){return new Promise((n,i)=>{let s=_(),r=setTimeout(()=>{p.delete(s),i(new Error("Stream timeout"))},12e4);p.set(s,l=>{l.type==="llm.chunk"?o(l.payload?.delta||""):l.type==="llm.done"?(clearTimeout(r),p.delete(s),n(l.payload)):(l.type==="llm.error"||l.type==="error")&&(clearTimeout(r),p.delete(s),i(new Error(l.payload?.message||"Stream error")))}),R({id:s,type:e,payload:t})})}function z(){return E}var fe=["display","position","width","height","margin","padding","color","background-color","background","font-size","font-weight","font-family","border","border-radius","box-shadow","flex-direction","justify-content","align-items","gap","grid-template-columns","grid-template-rows","overflow","opacity","z-index","text-align","line-height","letter-spacing"];function U(e){let t=window.getComputedStyle(e),o={};for(let i of fe)o[i]=t.getPropertyValue(i);let n=e.getBoundingClientRect();return{tagName:e.tagName.toLowerCase(),id:e.id||"",className:e.className||"",textContent:(e.textContent||"").trim().slice(0,200),outerHTML:be(e),cssSelector:xe(e),xpath:ye(e),computedStyles:o,rect:{x:n.x,y:n.y,width:n.width,height:n.height}}}function be(e){let t=e.cloneNode(!0);t.querySelectorAll("script, style, svg").forEach(i=>i.remove());let n=t.outerHTML;if(n.length>2e3){let i=e.tagName.toLowerCase(),s=Array.from(e.attributes).map(l=>`${l.name}="${l.value}"`).join(" "),r=Array.from(e.children).slice(0,5).map(l=>`<${l.tagName.toLowerCase()} .../>`).join(`
|
|
278
278
|
`);n=`<${i} ${s}>
|
|
279
279
|
${r}
|
|
280
280
|
${e.children.length>5?`<!-- +${e.children.length-5} more children -->`:""}
|
|
281
|
-
</${i}>`}return n}function
|
|
281
|
+
</${i}>`}return n}function xe(e){if(e.id)return`#${e.id}`;let t=[],o=e;for(;o&&o!==document.body;){let n=o.tagName.toLowerCase();if(o.id){t.unshift(`#${o.id}`);break}if(o.className&&typeof o.className=="string"){let s=o.className.trim().split(/\s+/).filter(r=>!r.startsWith("__")&&r.length<30).slice(0,2);s.length>0&&(n+="."+s.join("."))}let i=o.parentElement;if(i){let s=Array.from(i.children).filter(r=>r.tagName===o.tagName);if(s.length>1){let r=s.indexOf(o)+1;n+=`:nth-child(${r})`}}t.unshift(n),o=o.parentElement}return t.join(" > ")}function ye(e){let t=[],o=e;for(;o&&o!==document;){if(o.nodeType===Node.ELEMENT_NODE){let n=o,i=1,s=n.previousElementSibling;for(;s;)s.tagName===n.tagName&&i++,s=s.previousElementSibling;t.unshift(`${n.tagName.toLowerCase()}[${i}]`)}o=o.parentNode}return"/"+t.join("/")}var d=null;function G(e){d||(d=document.createElement("div"),d.style.cssText=`
|
|
282
282
|
position: fixed;
|
|
283
283
|
pointer-events: none;
|
|
284
284
|
z-index: 2147483646;
|
|
285
285
|
border: 2px solid #6c5ce7;
|
|
286
286
|
background: rgba(108, 92, 231, 0.1);
|
|
287
287
|
transition: all 0.1s ease;
|
|
288
|
-
`,d.dataset.openmagic="highlight",document.body.appendChild(d)),d.style.left=`${e.x}px`,d.style.top=`${e.y}px`,d.style.width=`${e.width}px`,d.style.height=`${e.height}px`,d.style.display="block"}function
|
|
288
|
+
`,d.dataset.openmagic="highlight",document.body.appendChild(d)),d.style.left=`${e.x}px`,d.style.top=`${e.y}px`,d.style.width=`${e.width}px`,d.style.height=`${e.height}px`,d.style.display="block"}function I(){d&&(d.style.display="none")}async function j(e){try{return e?await we(e):await ve()}catch(t){return console.warn("[OpenMagic] Screenshot capture failed:",t),null}}async function ve(){let e=document.createElement("canvas"),t=window.devicePixelRatio||1;e.width=window.innerWidth*t,e.height=window.innerHeight*t;let o=e.getContext("2d");o.scale(t,t);try{let n=await K(document.body),i=await F(n,window.innerWidth,window.innerHeight);return o.drawImage(i,0,0),e.toDataURL("image/png")}catch{return null}}async function we(e){let t=e.getBoundingClientRect(),o=document.createElement("canvas"),n=window.devicePixelRatio||1;o.width=t.width*n,o.height=t.height*n;let i=o.getContext("2d");i.scale(n,n);try{let s=await K(e),r=await F(s,t.width,t.height);return i.drawImage(r,0,0),o.toDataURL("image/png")}catch{return null}}function K(e){return new Promise(t=>{let o=e.cloneNode(!0);V(e,o);let n=e.getBoundingClientRect(),i=n.width,s=n.height,r=`
|
|
289
289
|
<svg xmlns="http://www.w3.org/2000/svg" width="${i}" height="${s}">
|
|
290
290
|
<foreignObject width="100%" height="100%">
|
|
291
291
|
<div xmlns="http://www.w3.org/1999/xhtml" style="width:${i}px;height:${s}px;overflow:hidden;">
|
|
292
292
|
${o.outerHTML}
|
|
293
293
|
</div>
|
|
294
294
|
</foreignObject>
|
|
295
|
-
</svg>`;t(r)})}function
|
|
295
|
+
</svg>`;t(r)})}function V(e,t){let o=window.getComputedStyle(e),n="";for(let r=0;r<o.length;r++){let l=o[r];n+=`${l}:${o.getPropertyValue(l)};`}t.style.cssText=n;let i=e.children,s=t.children;for(let r=0;r<i.length&&r<s.length;r++)V(i[r],s[r])}function F(e,t,o){return new Promise((n,i)=>{let s=new Image,r=new Blob([e],{type:"image/svg+xml;charset=utf-8"}),l=URL.createObjectURL(r);s.onload=()=>{URL.revokeObjectURL(l),n(s)},s.onerror=()=>{URL.revokeObjectURL(l),i(new Error("Failed to load SVG image"))},s.width=t,s.height=o,s.src=l})}var T=[];var X=!1;function Y(){if(X)return;X=!0;let e=window.fetch;window.fetch=async function(...n){let i=new Request(...n),s={method:i.method,url:i.url,timestamp:Date.now()};try{let r=await e.apply(this,n);return s.status=r.status,s.duration=Date.now()-s.timestamp,D(s),r}catch(r){throw s.status=0,s.duration=Date.now()-s.timestamp,D(s),r}};let t=XMLHttpRequest.prototype.open,o=XMLHttpRequest.prototype.send;XMLHttpRequest.prototype.open=function(n,i,...s){return this.__om_method=n,this.__om_url=i,this.__om_start=Date.now(),t.apply(this,[n,i,...s])},XMLHttpRequest.prototype.send=function(...n){return this.addEventListener("loadend",()=>{D({method:this.__om_method||"GET",url:this.__om_url||"",status:this.status,duration:Date.now()-(this.__om_start||Date.now()),timestamp:this.__om_start||Date.now()})}),o.apply(this,n)}}function D(e){e.url.includes("__openmagic__")||(T.push(e),T.length>50&&T.shift())}function ke(){return[...T]}var C=[],Se=100,W=!1;function Q(){if(W)return;W=!0;let e=["log","warn","error","info","debug"];for(let t of e){let o=console[t];console[t]=function(...n){C.push({level:t,args:n.map(i=>{try{return typeof i=="object"?JSON.stringify(i).slice(0,500):String(i)}catch{return String(i)}}),timestamp:Date.now()}),C.length>Se&&C.shift(),o.apply(console,n)}}}function Le(){return[...C]}function J(e,t){return{selectedElement:e?{tagName:e.tagName,id:e.id,className:e.className,textContent:e.textContent,outerHTML:e.outerHTML,cssSelector:e.cssSelector,computedStyles:e.computedStyles}:void 0,screenshot:t||void 0,networkLogs:ke().map(o=>({method:o.method,url:o.url,status:o.status,duration:o.duration,timestamp:o.timestamp})),consoleLogs:Le().map(o=>({level:o.level,args:o.args,timestamp:o.timestamp}))}}var c={sparkle:'<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.582a.5.5 0 0 1 0 .962L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/></svg>',crosshair:'<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="22" y1="12" x2="18" y2="12"/><line x1="6" y1="12" x2="2" y2="12"/><line x1="12" y1="6" x2="12" y2="2"/><line x1="12" y1="22" x2="12" y2="18"/></svg>',camera:'<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/><circle cx="12" cy="13" r="3"/></svg>',chat:'<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>',settings:'<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>',send:'<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>',x:'<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>',externalLink:'<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>',check:'<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>',grip:'<svg width="7" height="14" viewBox="0 0 8 14" fill="currentColor"><circle cx="2" cy="2" r="1.2"/><circle cx="6" cy="2" r="1.2"/><circle cx="2" cy="7" r="1.2"/><circle cx="6" cy="7" r="1.2"/><circle cx="2" cy="12" r="1.2"/><circle cx="6" cy="12" r="1.2"/></svg>'},Z={openai:{name:"OpenAI",keyUrl:"https://platform.openai.com/api-keys",keyPlaceholder:"sk-...",models:[{id:"gpt-5.4",name:"GPT-5.4"},{id:"gpt-5.4-mini",name:"GPT-5.4 Mini"},{id:"gpt-5.2",name:"GPT-5.2 Thinking"},{id:"o3",name:"o3"},{id:"o4-mini",name:"o4-mini"},{id:"gpt-4.1",name:"GPT-4.1"},{id:"gpt-4.1-mini",name:"GPT-4.1 Mini"}]},anthropic:{name:"Anthropic",keyUrl:"https://console.anthropic.com/settings/keys",keyPlaceholder:"sk-ant-...",models:[{id:"claude-opus-4-6",name:"Claude Opus 4.6"},{id:"claude-sonnet-4-6",name:"Claude Sonnet 4.6"},{id:"claude-haiku-4-5-20251001",name:"Claude Haiku 4.5"}]},google:{name:"Google Gemini",keyUrl:"https://aistudio.google.com/apikey",keyPlaceholder:"AIza...",models:[{id:"gemini-3.1-pro-preview",name:"Gemini 3.1 Pro"},{id:"gemini-3-flash-preview",name:"Gemini 3 Flash"},{id:"gemini-2.5-pro",name:"Gemini 2.5 Pro"},{id:"gemini-2.5-flash",name:"Gemini 2.5 Flash"}]},xai:{name:"xAI (Grok)",keyUrl:"https://console.x.ai/team/default/api-keys",keyPlaceholder:"xai-...",models:[{id:"grok-4.20-0309-reasoning",name:"Grok 4.20 Reasoning"},{id:"grok-4-1-fast-non-reasoning",name:"Grok 4.1 Fast"}]},deepseek:{name:"DeepSeek",keyUrl:"https://platform.deepseek.com/api_keys",keyPlaceholder:"sk-...",models:[{id:"deepseek-chat",name:"DeepSeek V3.2"},{id:"deepseek-reasoner",name:"DeepSeek R1"}]},mistral:{name:"Mistral",keyUrl:"https://console.mistral.ai/api-keys",keyPlaceholder:"...",models:[{id:"mistral-large-3-25-12",name:"Mistral Large 3"},{id:"codestral-2508",name:"Codestral"},{id:"devstral-2-25-12",name:"Devstral 2"}]},groq:{name:"Groq",keyUrl:"https://console.groq.com/keys",keyPlaceholder:"gsk_...",models:[{id:"meta-llama/llama-4-scout-17b-16e-instruct",name:"Llama 4 Scout"},{id:"llama-3.3-70b-versatile",name:"Llama 3.3 70B"}]},minimax:{name:"MiniMax",keyUrl:"https://platform.minimax.chat/user-center/basic-information/interface-key",keyPlaceholder:"MiniMax key...",models:[{id:"MiniMax-M2.7",name:"MiniMax M2.7"},{id:"MiniMax-M2.5",name:"MiniMax M2.5"}]},moonshot:{name:"Kimi (Moonshot)",keyUrl:"https://platform.moonshot.cn/console/api-keys",keyPlaceholder:"Moonshot key...",models:[{id:"kimi-k2.5",name:"Kimi K2.5"},{id:"kimi-k2-thinking",name:"Kimi K2 Thinking"}]},qwen:{name:"Qwen (Alibaba)",keyUrl:"https://dashscope.console.aliyun.com/apiKey",keyPlaceholder:"DashScope key...",models:[{id:"qwen3.5-plus",name:"Qwen 3.5 Plus"},{id:"qwen-max",name:"Qwen Max"}]},zhipu:{name:"Zhipu AI (GLM)",keyUrl:"https://open.bigmodel.cn/usercenter/apikeys",keyPlaceholder:"Zhipu key...",models:[{id:"glm-5",name:"GLM-5"},{id:"glm-4.7",name:"GLM-4.7"}]},doubao:{name:"Doubao (ByteDance)",keyUrl:"https://console.volcengine.com/ark/region:ark+cn-beijing/apiKey",keyPlaceholder:"Volcano key...",models:[{id:"doubao-seed-2-0-pro",name:"Doubao Seed 2.0 Pro"},{id:"doubao-seed-2-0-code",name:"Doubao Seed 2.0 Code"}]},ollama:{name:"Ollama (Local)",keyPlaceholder:"not required",local:!0,models:[]},openrouter:{name:"OpenRouter",keyUrl:"https://openrouter.ai/settings/keys",keyPlaceholder:"sk-or-...",models:[]}},ae="0.8.1",a={connected:!1,panelOpen:!1,activePanel:"",selecting:!1,selectedElement:null,screenshot:null,messages:[],streaming:!1,streamContent:"",provider:"",model:"",hasApiKey:!1,roots:[],updateAvailable:!1,latestVersion:"",saveStatus:""},f,u,k,y,se,g,h;function ee(){if(document.querySelector("openmagic-toolbar"))return;let e=document.createElement("openmagic-toolbar");e.dataset.openmagic="true",f=e.attachShadow({mode:"closed"});let t=document.createElement("style");t.textContent=q,f.appendChild(t);let o=document.createElement("div");f.appendChild(o),o.innerHTML=Me(),u=o.querySelector(".om-pill"),k=o.querySelector(".om-prompt-bar"),y=o.querySelector(".om-prompt-input"),se=o.querySelector(".om-prompt-context"),g=o.querySelector(".om-panel"),h=o.querySelector(".om-panel-body"),document.body.appendChild(e),Ee(o),Oe(),Y(),Q(),Re();let n=window.__OPENMAGIC_CONFIG__;n&&O(n.wsPort,n.token).then(()=>(a.connected=!0,te(),w("config.get"))).then(i=>{a.provider=i.payload?.provider||"",a.model=i.payload?.model||"",a.hasApiKey=i.payload?.hasApiKey||!1,a.roots=i.payload?.roots||[],(!a.provider||!a.hasApiKey)&&v("settings"),M()}).catch(()=>{a.connected=!1,te()})}function Me(){return`
|
|
296
296
|
<div class="om-panel om-hidden">
|
|
297
297
|
<div class="om-panel-header">
|
|
298
298
|
<span class="om-panel-title"></span>
|
|
299
|
-
<span class="om-panel-version">v${
|
|
299
|
+
<span class="om-panel-version">v${ae}</span>
|
|
300
300
|
<button class="om-panel-close" data-action="close-panel">${c.x}</button>
|
|
301
301
|
</div>
|
|
302
302
|
<div class="om-panel-body"></div>
|
|
@@ -318,7 +318,7 @@
|
|
|
318
318
|
<button class="om-pill-btn" data-action="chat" title="Chat">${c.chat}</button>
|
|
319
319
|
<button class="om-pill-btn" data-action="settings" title="Settings">${c.settings}</button>
|
|
320
320
|
<span class="om-status-dot disconnected"></span>
|
|
321
|
-
</div>`}function
|
|
321
|
+
</div>`}function Ee(e){e.addEventListener("click",t=>{let o=t.target.closest("[data-action]");if(!o)return;t.preventDefault(),t.stopPropagation();let n=o.dataset.action;Te(n,o)}),e.addEventListener("change",t=>{let o=t.target,n=o.dataset.field;n&&(n==="provider"?(a.provider=o.value,a.model="",a.saveStatus="",x()):n==="model"&&(a.model=o.value))}),y.addEventListener("keydown",t=>{t.key==="Enter"&&!t.shiftKey&&(t.preventDefault(),le())})}function Te(e,t){switch(e){case"select":Pe();break;case"screenshot":_e();break;case"chat":oe("chat");break;case"settings":oe("settings");break;case"close-panel":ie();break;case"prompt-send":le();break;case"save-settings":$e();break;case"get-key":{let o=t.dataset.url;o&&window.open(o,"_blank","noopener");break}case"clear-element":a.selectedElement=null,$();break;case"clear-screenshot":a.screenshot=null,$();break}}function te(){let e=f.querySelector(".om-status-dot");e&&(e.className=`om-status-dot ${a.connected?"connected":"disconnected"}`)}function M(){f.querySelectorAll(".om-pill-btn").forEach(e=>{let t=e.dataset.action;e.classList.toggle("active",t===a.activePanel||t==="select"&&a.selecting)})}function $(){let e=[];a.selectedElement&&e.push(`<span class="om-prompt-chip">${a.selectedElement.tagName}${a.selectedElement.id?"#"+a.selectedElement.id:""} <button class="om-prompt-chip-x" data-action="clear-element">${c.x}</button></span>`),a.screenshot&&e.push(`<span class="om-prompt-chip">Screenshot <button class="om-prompt-chip-x" data-action="clear-screenshot">${c.x}</button></span>`),se.innerHTML=e.join("")}function v(e){a.panelOpen=!0,a.activePanel=e,g.classList.remove("om-hidden");let t=f.querySelector(".om-panel-title");t.textContent=e==="settings"?"Settings":"Chat",x(),M()}function ie(){a.panelOpen=!1,a.activePanel="",g.classList.add("om-hidden"),M()}function oe(e){a.panelOpen&&a.activePanel===e?ie():v(e)}function x(){a.activePanel==="settings"?h.innerHTML=Ce():a.activePanel==="chat"&&(h.innerHTML=He(),re())}function Ce(){let e=Object.entries(Z).map(([b,ue])=>`<option value="${b}" ${a.provider===b?"selected":""}>${ue.name}</option>`).join(""),t=Z[a.provider],o=t?t.models.map(b=>`<option value="${b.id}" ${a.model===b.id?"selected":""}>${b.name}</option>`).join(""):'<option value="">Select provider first</option>',n=t?.local||!1,i=t?.keyUrl||"",s=t?.keyPlaceholder||"Enter API key...",r=a.updateAvailable?`<div class="om-update-banner">v${a.latestVersion} available <code class="om-update-cmd">npx openmagic@latest</code></div>`:"",l=a.hasApiKey?`<div class="om-status om-status-success">${c.check} Connected</div>`:"",de=a.saveStatus==="saving"?'<span class="om-spinner"></span> Saving...':a.saveStatus==="saved"?`${c.check} Saved`:"Save",pe=a.saveStatus==="saving"?"om-btn om-btn-saving":a.saveStatus==="saved"?"om-btn om-btn-saved":"om-btn",me=a.saveStatus==="saving"?"disabled":"";return`
|
|
322
322
|
${r}
|
|
323
323
|
<div class="om-settings">
|
|
324
324
|
<div class="om-field">
|
|
@@ -332,12 +332,12 @@
|
|
|
332
332
|
<div class="om-field ${n?"om-hidden":""}">
|
|
333
333
|
<label class="om-label">API Key</label>
|
|
334
334
|
<div class="om-key-row">
|
|
335
|
-
<input type="
|
|
335
|
+
<input type="text" class="om-input om-key-input" data-field="apiKey" placeholder="${s}" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" data-lpignore="true" data-1p-ignore="true" data-form-type="other" />
|
|
336
336
|
${i?`<button class="om-btn-get-key" data-action="get-key" data-url="${i}">${c.externalLink} Get key</button>`:""}
|
|
337
337
|
</div>
|
|
338
338
|
${i?`<div class="om-key-hint"><a data-action="get-key" data-url="${i}">Get your ${t?.name||""} API key here</a></div>`:""}
|
|
339
339
|
</div>
|
|
340
|
-
<button class="${
|
|
340
|
+
<button class="${pe}" data-action="save-settings" ${me}>${de}</button>
|
|
341
341
|
${l}
|
|
342
|
-
</div>`}function
|
|
342
|
+
</div>`}function He(){if(!a.hasApiKey||!a.provider)return'<div class="om-status om-status-error">Configure your provider in Settings first</div>';let e=a.messages.map(n=>`<div class="om-msg om-msg-${n.role}">${A(n.content)}</div>`).join(""),t=a.streaming?`<div class="om-msg om-msg-assistant"><span class="om-spinner"></span>${A(a.streamContent)}</div>`:"";return`<div class="om-chat-messages">${!a.messages.length&&!a.streaming?'<div class="om-chat-empty">Select an element or type below to start</div>':""}${e}${t}</div>`}function re(){let e=h.querySelector(".om-chat-messages");e&&(e.scrollTop=e.scrollHeight)}async function $e(){let t=h.querySelector('[data-field="apiKey"]')?.value||"";if(!a.provider){a.saveStatus="error",H(),setTimeout(()=>{a.saveStatus="",x()},2e3);return}if(!z()){a.saveStatus="error",H();let n=h.querySelector('[data-action="save-settings"]');n&&(n.innerHTML="Not connected - check terminal"),setTimeout(()=>{a.saveStatus="",x()},3e3);return}let o={provider:a.provider,model:a.model};t&&(o.apiKey=t),a.saveStatus="saving",H();try{let n=await Promise.race([w("config.set",o),new Promise((i,s)=>setTimeout(()=>s(new Error("Save timed out")),8e3))]);a.hasApiKey=!!(t||a.hasApiKey),a.saveStatus="saved",H(),setTimeout(()=>{a.saveStatus="",a.activePanel==="settings"&&v("chat")},1200)}catch(n){a.saveStatus="error";let i=h.querySelector('[data-action="save-settings"]'),s=(n?.message||"").includes("timeout")?"Connection timeout - is the CLI running?":(n?.message||"").includes("connected")?"Not connected to OpenMagic server":`Save failed: ${n?.message||"Unknown error"}`;i&&(i.innerHTML=s,i.className="om-btn",i.disabled=!1),setTimeout(()=>{a.saveStatus="",x()},4e3)}}function H(){let e=h.querySelector('[data-action="save-settings"]');e&&(a.saveStatus==="saving"?(e.innerHTML='<span class="om-spinner"></span> Saving...',e.className="om-btn om-btn-saving",e.disabled=!0):a.saveStatus==="saved"?(e.innerHTML=`${c.check} Saved`,e.className="om-btn om-btn-saved",e.disabled=!1):a.saveStatus==="error"?(e.innerHTML="Save failed - try again",e.className="om-btn",e.disabled=!1):(e.innerHTML="Save",e.className="om-btn",e.disabled=!1))}async function le(){let e=y.value.trim();if(!e||a.streaming)return;if(!a.hasApiKey||!a.provider){v("settings");return}a.messages.push({role:"user",content:e}),a.streaming=!0,a.streamContent="",y.value="",v("chat");let t=J(a.selectedElement,a.screenshot);t.pageUrl=window.location.href,t.pageTitle=document.title;try{let o=await B("llm.chat",{provider:a.provider,model:a.model,messages:a.messages.map(n=>({role:n.role,content:n.content})),context:t},n=>{a.streamContent+=n;let i=h.querySelector(".om-msg-assistant:last-child");i&&(i.innerHTML=`<span class="om-spinner"></span>${A(a.streamContent)}`,re())});if(a.messages.push({role:"assistant",content:a.streamContent||o?.content||""}),o?.modifications?.length){for(let n of o.modifications)if(n.type==="edit"&&n.file&&n.search&&n.replace)try{let s=(await w("fs.read",{path:ne(n.file)})).payload?.content;s?.includes(n.search)&&(await w("fs.write",{path:ne(n.file),content:s.replace(n.search,n.replace)}),a.messages.push({role:"system",content:`Applied change to ${n.file}`}))}catch(i){a.messages.push({role:"system",content:`Failed: ${n.file} - ${i.message}`})}}}catch(o){a.messages.push({role:"system",content:`Error: ${o.message}`})}a.streaming=!1,a.streamContent="",x()}function ne(e){return a.roots.length>0?a.roots[0]+"/"+e:e}var S=null,L=null;function Pe(){a.selecting?ce():Ne()}function Ne(){a.selecting=!0,document.body.style.cursor="crosshair",M(),L=e=>{let t=e.target;if(t.closest("openmagic-toolbar")||t.dataset?.openmagic)return;let o=t.getBoundingClientRect();G({x:o.x,y:o.y,width:o.width,height:o.height})},S=e=>{e.preventDefault(),e.stopPropagation();let t=e.target;t.closest("openmagic-toolbar")||t.dataset?.openmagic||(a.selectedElement=U(t),ce(),$(),y.focus())},document.addEventListener("mousemove",L,!0),document.addEventListener("click",S,!0)}function ce(){a.selecting=!1,document.body.style.cursor="",I(),L&&(document.removeEventListener("mousemove",L,!0),L=null),S&&(document.removeEventListener("click",S,!0),S=null),M()}async function _e(){let e=await j();e&&(a.screenshot=e,$(),y.focus())}function Oe(){let e=!1,t=0,o=0,n=0,i=0;u.addEventListener("mousedown",s=>{let r=s.target;if(r.closest("[data-action]")||!r.closest(".om-grab")&&!r.closest(".om-pill-brand"))return;e=!0,t=s.clientX,o=s.clientY;let l=u.getBoundingClientRect();n=l.left,i=l.top,s.preventDefault()}),document.addEventListener("mousemove",s=>{if(!e)return;u.style.left=n+s.clientX-t+"px",u.style.top=i+s.clientY-o+"px",u.style.right="auto",u.style.bottom="auto";let r=u.getBoundingClientRect();k.style.right="auto",k.style.bottom="auto",k.style.left=r.left+"px",k.style.top=r.top-42+"px",g.style.right="auto",g.style.bottom="auto",g.style.left=r.left+"px",g.style.top=r.top-42-(g.classList.contains("om-hidden")?0:g.offsetHeight+6)+"px"}),document.addEventListener("mouseup",()=>{e=!1})}function A(e){let t=document.createElement("div");return t.textContent=e,t.innerHTML}function Re(){fetch("https://registry.npmjs.org/openmagic/latest",{headers:{Accept:"application/json"},signal:AbortSignal.timeout(5e3)}).then(e=>e.ok?e.json():null).then(e=>{if(!e?.version)return;let t=e.version.split(".").map(Number),o=ae.split(".").map(Number);for(let n=0;n<3;n++){if((t[n]||0)>(o[n]||0)){a.updateAvailable=!0,a.latestVersion=e.version,De();return}if((t[n]||0)<(o[n]||0))return}}).catch(()=>{})}function De(){if(f.querySelector(".om-update-dot"))return;let t=document.createElement("span");t.className="om-update-dot",t.title=`v${a.latestVersion} available`,t.addEventListener("click",()=>v("settings")),u.appendChild(t)}typeof window<"u"&&(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",ee):ee());})();
|
|
343
343
|
//# sourceMappingURL=index.global.js.map
|