hanbiro-react16-sdk 1.0.11 → 1.0.12

package/README.md

@@ -166,8 +166,67 @@ angular.module('myApp').directive('chatAiDraft', function() {
 
 ---
 
+## ChatAIDraft — Imperative API (Ref)
+
+`ChatAIDraft` exposes `setAIContext` via ref, allowing you to programmatically set the HTML content of the **AI Context** editor inside the Settings panel.
+
+```ts
+interface ChatAIDraftRef {
+  setAIContext: (html: string) => void;
+}
+```
+
+### React 18 / React 16.8+ (useRef)
+
+```tsx
+import React, { useRef } from 'react';
+import { ChatAIDraft } from 'hanbiro-react16-sdk/components';
+
+function MailComposer() {
+  const chatRef = useRef<ChatAIDraft>(null);
+
+  const handleOpenAI = () => {
+    chatRef.current?.setAIContext('<p>Original email content...</p>');
+  };
+
+  return (
+    <>
+      <button onClick={handleOpenAI}>Open AI</button>
+      <ChatAIDraft
+        ref={chatRef}
+        onApply={(params) => console.log(params.html)}
+      />
+    </>
+  );
+}
+```
+
+### AngularJS / UMD (callback ref)
+
+```js
+let chatAIInstance = null;
+
+ReactDOM.render(
+  React.createElement(HanbiroReact16SDK.ChatAIDraft, {
+    ref: function(instance) { chatAIInstance = instance; },
+    onApply: function(result) { /* ... */ },
+  }),
+  document.getElementById('chat-ai-container')
+);
+
+// Call anytime — e.g. when opening the AI panel
+function setEmailContext(html) {
+  if (chatAIInstance) {
+    chatAIInstance.setAIContext(html);
+  }
+}
+```
+
+---
+
 ## Development Commands
 
+
 - Run playground locally: `npm run dev`
 - Build library for production: `npm run build`
 - Build playground for production: `npm run build:playground`

package/dist/components/ChatAIDraft/index.d.ts

@@ -6,6 +6,10 @@ export interface AIPaneProps {
         html: string;
     }) => void;
 }
+/** Public imperative API exposed via ref */
+export interface ChatAIDraftRef {
+    setAIContext: (html: string) => void;
+}
 export interface AIMessage {
     id: string;
     question: string;
@@ -22,10 +26,10 @@ interface AIPaneState {
     conversationId: string;
     originalEmail: string;
 }
-declare class ChatAIDraft extends React.Component<AIPaneProps, AIPaneState> {
+declare class ChatAIDraft extends React.Component<AIPaneProps, AIPaneState> implements ChatAIDraftRef {
     private rootRef;
     constructor(props: AIPaneProps);
-    setAiContext: (nVal: string) => void;
+    setAIContext: (html: string) => void;
     handleMessageChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
     handleSubmit: () => Promise<void>;
     handleKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;

package/dist/hanbiro-react16-sdk.es.js

@@ -3128,8 +3128,7 @@ class On extends d.Component {
   constructor(n) {
     super(n);
     b(this, "rootRef");
-    // Equivalent to useImperativeHandle
-    b(this, "setAiContext", (n) => {
+    b(this, "setAIContext", (n) => {
       this.setState({ originalEmail: n });
     });
     b(this, "handleMessageChange", (n) => {

package/dist/hanbiro-react16-sdk.umd.js

@@ -109,4 +109,4 @@ Please report this to https://github.com/markedjs/marked.`,t){const r="<p>An err
               line-height: unset;
               background: var(--background-softGrey);
               color: var(--text-primary);
-            }`,setup:z,relative_urls:!1,remove_script_host:!1,document_base_url:"/"}}))}}class In extends d.Component{constructor(n){super(n);b(this,"containerRef");b(this,"popperRef");b(this,"handleClickOutside",n=>{const r=n.target;this.containerRef.current&&!this.containerRef.current.contains(r)&&(!this.popperRef.current||!this.popperRef.current.contains(r))&&this.setState({open:!1})});b(this,"togglePopper",()=>{this.setState(n=>({open:!n.open}))});b(this,"handleLangChange",n=>{const r=ce.find(i=>i.value===n.target.value);this.props.setLang(r||null)});this.state={open:!1},this.containerRef=d.createRef(),this.popperRef=d.createRef()}componentDidMount(){document.addEventListener("mousedown",this.handleClickOutside)}componentWillUnmount(){document.removeEventListener("mousedown",this.handleClickOutside)}render(){const{lang:n,originalEmail:r,setOriginalEmail:i,getEditorContent:o,parentRef:s}=this.props,{open:a}=this.state;let c=0,l=0,u=320;if(a&&this.containerRef.current){const f=this.containerRef.current.getBoundingClientRect();if(c=f.top+(window.scrollY||document.documentElement.scrollTop)-8,l=f.left+(window.scrollX||document.documentElement.scrollLeft),s&&s.current){const h=s.current.getBoundingClientRect();u=h.width-16,l=h.left+8}}return d.createElement("div",{ref:this.containerRef,style:{position:"relative",display:"inline-block"}},d.createElement("button",{type:"button",onClick:this.togglePopper,className:"icon-button small"},d.createElement(le,{size:16})),a&&this.containerRef.current&&Ie.createPortal(d.createElement("div",{ref:this.popperRef,style:{position:"absolute",top:c,left:l,transform:"translateY(-100%)",zIndex:1051,background:"#fff",border:"1px solid #ddd",boxShadow:"0px 4px 12px rgba(0, 0, 0, 0.1)",borderRadius:8,padding:16,width:u,boxSizing:"border-box"}},d.createElement("div",{style:{display:"flex",flexDirection:"column",gap:12}},d.createElement("div",{style:{display:"flex",flexDirection:"column",gap:4}},d.createElement("span",{style:{fontSize:12,fontWeight:500}},"Language"),d.createElement("select",{value:n?n.value:"",onChange:this.handleLangChange,style:{padding:"7px 8px",borderRadius:4,border:"1px solid #ccc",fontSize:14}},d.createElement("option",{value:"",disabled:!0},"Select Language"),ce.map(f=>d.createElement("option",{key:f.value,value:f.value},f.label)))),d.createElement("div",{style:{display:"flex",flexDirection:"column",gap:4}},d.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between"}},d.createElement("span",{style:{fontSize:12,fontWeight:500}},"AI Context"),o&&d.createElement(ne,{title:"Copy from origin email"},d.createElement("button",{type:"button",onClick:()=>{const f=o();i(f)},className:"icon-button small"},d.createElement(V,null)))),d.createElement(_n,{value:r,onChange:f=>i(f),height:350,isSimple:!0})))),document.body))}}class Pn extends d.Component{constructor(n){super(n);b(this,"rootRef");b(this,"setAiContext",n=>{this.setState({originalEmail:n})});b(this,"handleMessageChange",n=>{this.setState({message:n.target.value})});b(this,"handleSubmit",async()=>{const{message:n,messages:r,lang:i,originalEmail:o,conversationId:s}=this.state;if(!n.trim())return;const a=pt();let c={id:a,question:n,subject:"",body:"",created_at:new Date().getTime(),isLoading:!0};const l=[...r,c];this.setState({messages:l,message:"",isSending:!0});const u={query:n,default_language:i?i.value:"KR",original_email:o,debug_grpc:!0};s&&(u.conversation_id=s),await Rt(u,{setContent:g=>{this.setState(m=>({messages:m.messages.map(w=>w.id===a?{...w,subject:"Some thing not used",body:g,isLoading:!1,created_at:new Date().getTime()}:w)}))},setIsLoading:g=>{this.setState(m=>({messages:m.messages.map(w=>w.id===a?{...w,isLoading:g}:w)}))},setConversationId:g=>{this.setState({conversationId:g})}}),this.setState({isSending:!1})});b(this,"handleKeyDown",n=>{!n.shiftKey&&n.key==="Enter"&&!this.state.isSending&&(n.preventDefault(),this.handleSubmit())});b(this,"setLang",n=>{this.setState({lang:n})});b(this,"setOriginalEmail",n=>{this.setState({originalEmail:n})});this.rootRef=d.createRef(),this.state={message:"",messages:[],isSending:!1,lang:ce[0],conversationId:"",originalEmail:""}}render(){const{onApply:n,getEditorContent:r}=this.props,{message:i,messages:o,isSending:s,lang:a,originalEmail:c}=this.state;return d.createElement("div",{ref:this.rootRef,style:{display:"flex",height:"100%",padding:16,flexDirection:"column",background:"#fff",fontFamily:"inherit",boxSizing:"border-box"}},o.length>0?d.createElement(hn,{items:o,onApply:n,getEditorContent:r}):d.createElement("div",{style:{flex:1,minHeight:0,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",color:"var(--grey-light)"}},d.createElement(St,{size:46}),d.createElement("h2",{style:{marginTop:16,fontWeight:600,color:"inherit",fontSize:18}},"Build with Agent")),d.createElement("div",{style:{width:"100%",border:"1px solid var(--border-main)",borderRadius:4,overflow:"hidden",background:"#fff",display:"flex",flexDirection:"column"}},d.createElement("textarea",{value:i,onChange:this.handleMessageChange,placeholder:"Describe your email",name:"ai-content",onKeyDown:this.handleKeyDown,disabled:s,style:{flex:1,minWidth:0,borderRadius:4,padding:12,fontSize:13,border:"none",resize:"none",outline:"none",minHeight:60,fontFamily:"inherit"}}),d.createElement("div",{style:{display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"space-between",width:"100%",padding:"8px",boxSizing:"border-box"}},d.createElement(In,{lang:a,setLang:this.setLang,originalEmail:c,setOriginalEmail:this.setOriginalEmail,getEditorContent:r,parentRef:this.rootRef}),d.createElement("button",{disabled:!i.trim()||s,onClick:this.handleSubmit,className:"icon-button",color:"primary"},d.createElement(se,null)))))}}E.ChatAIDraft=Pn,E.LoadingCircular=ye,E.LoadingContainer=Ye,E.Tooltip=ne,E.getBaseUrl=Z,E.getGroupwareUrl=Ct,E.initHanbiroReactSDK=Et,Object.defineProperty(E,Symbol.toStringTag,{value:"Module"})});
+            }`,setup:z,relative_urls:!1,remove_script_host:!1,document_base_url:"/"}}))}}class In extends d.Component{constructor(n){super(n);b(this,"containerRef");b(this,"popperRef");b(this,"handleClickOutside",n=>{const r=n.target;this.containerRef.current&&!this.containerRef.current.contains(r)&&(!this.popperRef.current||!this.popperRef.current.contains(r))&&this.setState({open:!1})});b(this,"togglePopper",()=>{this.setState(n=>({open:!n.open}))});b(this,"handleLangChange",n=>{const r=ce.find(i=>i.value===n.target.value);this.props.setLang(r||null)});this.state={open:!1},this.containerRef=d.createRef(),this.popperRef=d.createRef()}componentDidMount(){document.addEventListener("mousedown",this.handleClickOutside)}componentWillUnmount(){document.removeEventListener("mousedown",this.handleClickOutside)}render(){const{lang:n,originalEmail:r,setOriginalEmail:i,getEditorContent:o,parentRef:s}=this.props,{open:a}=this.state;let c=0,l=0,u=320;if(a&&this.containerRef.current){const f=this.containerRef.current.getBoundingClientRect();if(c=f.top+(window.scrollY||document.documentElement.scrollTop)-8,l=f.left+(window.scrollX||document.documentElement.scrollLeft),s&&s.current){const h=s.current.getBoundingClientRect();u=h.width-16,l=h.left+8}}return d.createElement("div",{ref:this.containerRef,style:{position:"relative",display:"inline-block"}},d.createElement("button",{type:"button",onClick:this.togglePopper,className:"icon-button small"},d.createElement(le,{size:16})),a&&this.containerRef.current&&Ie.createPortal(d.createElement("div",{ref:this.popperRef,style:{position:"absolute",top:c,left:l,transform:"translateY(-100%)",zIndex:1051,background:"#fff",border:"1px solid #ddd",boxShadow:"0px 4px 12px rgba(0, 0, 0, 0.1)",borderRadius:8,padding:16,width:u,boxSizing:"border-box"}},d.createElement("div",{style:{display:"flex",flexDirection:"column",gap:12}},d.createElement("div",{style:{display:"flex",flexDirection:"column",gap:4}},d.createElement("span",{style:{fontSize:12,fontWeight:500}},"Language"),d.createElement("select",{value:n?n.value:"",onChange:this.handleLangChange,style:{padding:"7px 8px",borderRadius:4,border:"1px solid #ccc",fontSize:14}},d.createElement("option",{value:"",disabled:!0},"Select Language"),ce.map(f=>d.createElement("option",{key:f.value,value:f.value},f.label)))),d.createElement("div",{style:{display:"flex",flexDirection:"column",gap:4}},d.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between"}},d.createElement("span",{style:{fontSize:12,fontWeight:500}},"AI Context"),o&&d.createElement(ne,{title:"Copy from origin email"},d.createElement("button",{type:"button",onClick:()=>{const f=o();i(f)},className:"icon-button small"},d.createElement(V,null)))),d.createElement(_n,{value:r,onChange:f=>i(f),height:350,isSimple:!0})))),document.body))}}class Pn extends d.Component{constructor(n){super(n);b(this,"rootRef");b(this,"setAIContext",n=>{this.setState({originalEmail:n})});b(this,"handleMessageChange",n=>{this.setState({message:n.target.value})});b(this,"handleSubmit",async()=>{const{message:n,messages:r,lang:i,originalEmail:o,conversationId:s}=this.state;if(!n.trim())return;const a=pt();let c={id:a,question:n,subject:"",body:"",created_at:new Date().getTime(),isLoading:!0};const l=[...r,c];this.setState({messages:l,message:"",isSending:!0});const u={query:n,default_language:i?i.value:"KR",original_email:o,debug_grpc:!0};s&&(u.conversation_id=s),await Rt(u,{setContent:g=>{this.setState(m=>({messages:m.messages.map(w=>w.id===a?{...w,subject:"Some thing not used",body:g,isLoading:!1,created_at:new Date().getTime()}:w)}))},setIsLoading:g=>{this.setState(m=>({messages:m.messages.map(w=>w.id===a?{...w,isLoading:g}:w)}))},setConversationId:g=>{this.setState({conversationId:g})}}),this.setState({isSending:!1})});b(this,"handleKeyDown",n=>{!n.shiftKey&&n.key==="Enter"&&!this.state.isSending&&(n.preventDefault(),this.handleSubmit())});b(this,"setLang",n=>{this.setState({lang:n})});b(this,"setOriginalEmail",n=>{this.setState({originalEmail:n})});this.rootRef=d.createRef(),this.state={message:"",messages:[],isSending:!1,lang:ce[0],conversationId:"",originalEmail:""}}render(){const{onApply:n,getEditorContent:r}=this.props,{message:i,messages:o,isSending:s,lang:a,originalEmail:c}=this.state;return d.createElement("div",{ref:this.rootRef,style:{display:"flex",height:"100%",padding:16,flexDirection:"column",background:"#fff",fontFamily:"inherit",boxSizing:"border-box"}},o.length>0?d.createElement(hn,{items:o,onApply:n,getEditorContent:r}):d.createElement("div",{style:{flex:1,minHeight:0,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",color:"var(--grey-light)"}},d.createElement(St,{size:46}),d.createElement("h2",{style:{marginTop:16,fontWeight:600,color:"inherit",fontSize:18}},"Build with Agent")),d.createElement("div",{style:{width:"100%",border:"1px solid var(--border-main)",borderRadius:4,overflow:"hidden",background:"#fff",display:"flex",flexDirection:"column"}},d.createElement("textarea",{value:i,onChange:this.handleMessageChange,placeholder:"Describe your email",name:"ai-content",onKeyDown:this.handleKeyDown,disabled:s,style:{flex:1,minWidth:0,borderRadius:4,padding:12,fontSize:13,border:"none",resize:"none",outline:"none",minHeight:60,fontFamily:"inherit"}}),d.createElement("div",{style:{display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"space-between",width:"100%",padding:"8px",boxSizing:"border-box"}},d.createElement(In,{lang:a,setLang:this.setLang,originalEmail:c,setOriginalEmail:this.setOriginalEmail,getEditorContent:r,parentRef:this.rootRef}),d.createElement("button",{disabled:!i.trim()||s,onClick:this.handleSubmit,className:"icon-button",color:"primary"},d.createElement(se,null)))))}}E.ChatAIDraft=Pn,E.LoadingCircular=ye,E.LoadingContainer=Ye,E.Tooltip=ne,E.getBaseUrl=Z,E.getGroupwareUrl=Ct,E.initHanbiroReactSDK=Et,Object.defineProperty(E,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hanbiro-react16-sdk",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "description": "React 16.2.0 compatible UI components for Hanbiro",
   "types": "./dist/index.d.ts",
   "main": "./dist/hanbiro-react16-sdk.umd.js",