hanbiro-react16-sdk 1.0.22 → 1.0.23

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

@@ -0,0 +1,6 @@
+import * as React from "react";
+interface EmptyStateProps {
+    onSelectPrompt: (text: string) => void;
+}
+declare const EmptyState: React.FunctionComponent<EmptyStateProps>;
+export default EmptyState;

package/dist/components/ChatAIDraft/EmptyState.js

@@ -0,0 +1,220 @@
+import * as React from "react";
+import CustomAiIcon from "./CustomAIIcon.js";
+import MessageSquare from "../../node_modules/react-feather/dist/icons/message-square.js";
+import MessageCircle from "../../node_modules/react-feather/dist/icons/message-circle.js";
+import Check from "../../node_modules/react-feather/dist/icons/check.js";
+const FEATURES = [
+  {
+    icon: /* @__PURE__ */ React.createElement(MessageCircle, { size: 16 }),
+    title: "Request via message",
+    desc: 'e.g., "Draft an email to Director Hong proposing a Q3 collaboration meeting (May 20, 3 PM)"'
+  },
+  {
+    icon: /* @__PURE__ */ React.createElement(CustomAiIcon, { size: 16, stroke: 2 }),
+    title: "AI generates a draft",
+    desc: "Refine the draft freely with follow-ups like 'more polite' or 'add a deadline'."
+  },
+  {
+    icon: /* @__PURE__ */ React.createElement(Check, { size: 16 }),
+    title: "Apply to body",
+    desc: "Insert the response you like into the email body and send."
+  }
+];
+const SUGGESTIONS = [
+  "Propose a Q3 meeting to Director Hong (May 20, 3 PM)",
+  "Notify client of payment schedule (Due May 30)",
+  "Welcome message to new employee (Joining May 22)"
+];
+const EmptyState = ({
+  onSelectPrompt
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        flex: 1,
+        minHeight: 0,
+        overflowY: "auto",
+        display: "flex",
+        flexDirection: "column",
+        paddingRight: 8,
+        marginRight: -8
+      }
+    },
+    /* @__PURE__ */ React.createElement("div", { style: { textAlign: "center", marginTop: 8 } }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          fontSize: 14,
+          fontWeight: 600,
+          color: "var(--text-primary)",
+          lineHeight: 1.5
+        }
+      },
+      "Let's draft a new email together from scratch."
+    ), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          fontSize: 13,
+          color: "var(--text-secondary)",
+          marginTop: 4
+        }
+      },
+      "Tell me what kind of email you'd like to write."
+    )),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          alignSelf: "center",
+          width: 120,
+          height: 120,
+          borderRadius: "50%",
+          background: "var(--primary-lighter)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          margin: "20px 0",
+          color: "var(--primary-main)"
+        }
+      },
+      /* @__PURE__ */ React.createElement(CustomAiIcon, { size: 56, stroke: 1.5 })
+    ),
+    /* @__PURE__ */ React.createElement("div", { style: { textAlign: "center" } }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          fontSize: 13,
+          color: "var(--text-secondary)",
+          lineHeight: 1.6
+        }
+      },
+      "Give me the recipient, purpose, and key points",
+      /* @__PURE__ */ React.createElement("br", null),
+      "and AI will generate a polished draft."
+    )),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          borderTop: "1px solid var(--border-light)",
+          marginTop: 20,
+          paddingTop: 16,
+          display: "flex",
+          flexDirection: "column",
+          gap: 14
+        }
+      },
+      FEATURES.map((f, i) => /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          key: i,
+          style: {
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "flex-start",
+            gap: 10
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              width: 28,
+              height: 28,
+              borderRadius: "50%",
+              background: "var(--background-softGrey)",
+              color: "var(--primary-main)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: 0
+            }
+          },
+          f.icon
+        ),
+        /* @__PURE__ */ React.createElement("div", { style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              fontSize: 13,
+              fontWeight: 600,
+              color: "var(--text-primary)"
+            }
+          },
+          f.title
+        ), /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              fontSize: 12,
+              color: "var(--text-secondary)",
+              marginTop: 2,
+              lineHeight: 1.5
+            }
+          },
+          f.desc
+        ))
+      ))
+    ),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          borderTop: "1px solid var(--border-light)",
+          marginTop: 20,
+          paddingTop: 16
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            fontSize: 12,
+            color: "var(--text-secondary)",
+            marginBottom: 8
+          }
+        },
+        "💡 Try these prompts to get a draft right away"
+      ),
+      /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 8 } }, SUGGESTIONS.map((s, i) => /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          key: i,
+          type: "button",
+          onClick: () => onSelectPrompt(s),
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            width: "100%",
+            padding: "10px 12px",
+            borderRadius: 8,
+            border: "none",
+            background: "var(--primary-lighter)",
+            color: "var(--text-primary)",
+            fontSize: 13,
+            textAlign: "left",
+            cursor: "pointer",
+            fontFamily: "inherit"
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          MessageSquare,
+          {
+            size: 14,
+            style: {
+              color: "var(--primary-main)",
+              flexShrink: 0
+            }
+          }
+        ),
+        /* @__PURE__ */ React.createElement("span", null, s)
+      )))
+    )
+  );
+};
+export {
+  EmptyState as default
+};

package/dist/components/ChatAIDraft/List.js

@@ -21,9 +21,48 @@ var __async = (__this, __arguments, generator) => {
 import * as React from "react";
 import { marked } from "../../node_modules/marked/lib/marked.esm.js";
 import TypingText from "./TypingText.js";
-import LoadingCircular from "../LoadingCircular/index.js";
 import Tooltip from "../Tooltip/index.js";
 import Copy from "../../node_modules/react-feather/dist/icons/copy.js";
+const AIAvatar = () => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    style: {
+      width: 28,
+      height: 28,
+      borderRadius: "50%",
+      background: "var(--primary-main)",
+      color: "var(--primary-contrasttext)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontSize: 11,
+      fontWeight: 700,
+      letterSpacing: 0.5,
+      flexShrink: 0
+    }
+  },
+  "AI"
+);
+const LoadingDots = ({
+  label = "Thinking"
+}) => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    style: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: 6,
+      background: "var(--background-softGrey)",
+      borderRadius: 8,
+      borderTopLeftRadius: 0,
+      padding: "8px 12px",
+      fontSize: 13,
+      color: "var(--text-secondary)"
+    }
+  },
+  /* @__PURE__ */ React.createElement("span", null, label),
+  /* @__PURE__ */ React.createElement("span", { className: "chat-ai-dots", "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("span", null), /* @__PURE__ */ React.createElement("span", null), /* @__PURE__ */ React.createElement("span", null))
+);
 const List = ({
   items,
   onApply,
@@ -88,7 +127,8 @@ const List = ({
               borderRadius: 8,
               borderTopRightRadius: 0,
               padding: "8px 12px",
-              background: "var(--background-softGrey)"
+              background: "var(--primary-main)",
+              color: "var(--primary-contrasttext)"
             }
           }
         )
@@ -100,22 +140,24 @@ const List = ({
             width: "100%",
             display: "flex",
             alignItems: "flex-start",
-            flexDirection: "column",
+            flexDirection: "row",
             position: "relative",
-            marginTop: 8
+            marginTop: 8,
+            gap: 8
           }
         },
-        (_item == null ? void 0 : _item.isLoading) ? /* @__PURE__ */ React.createElement(LoadingCircular, { size: 32 }) : /* @__PURE__ */ React.createElement(
+        /* @__PURE__ */ React.createElement(AIAvatar, null),
+        /* @__PURE__ */ React.createElement(
           "div",
           {
             style: {
+              flex: 1,
+              minWidth: 0,
               display: "flex",
-              flexDirection: "row",
-              alignItems: "flex-end",
-              width: "100%"
+              flexDirection: "column"
             }
           },
-          /* @__PURE__ */ React.createElement(
+          (_item == null ? void 0 : _item.isLoading) ? /* @__PURE__ */ React.createElement(LoadingDots, null) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
             TypingText,
             {
               data: { subject: _item.subject, body: _item.body },
@@ -123,24 +165,19 @@ const List = ({
                 background: "var(--background-softGrey)",
                 borderRadius: 8,
                 borderTopLeftRadius: 0,
-                padding: "8px 12px",
-                flexShrink: 0
+                padding: "8px 12px"
               }
             }
-          ),
-          /* @__PURE__ */ React.createElement(Tooltip, { title: "Apply content" }, /* @__PURE__ */ React.createElement(
+          ), /* @__PURE__ */ React.createElement("div", { style: { marginTop: 4 } }, /* @__PURE__ */ React.createElement(Tooltip, { title: "Apply content" }, /* @__PURE__ */ React.createElement(
             "button",
             {
               type: "button",
               onClick: () => handleApply(_item.body),
               color: "primary",
-              className: "icon-button small",
-              style: {
-                marginLeft: 4
-              }
+              className: "icon-button small"
             },
             /* @__PURE__ */ React.createElement(Copy, { size: 16 })
-          ))
+          ))))
         )
       )
     ))

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

@@ -3,9 +3,10 @@ import * as React from "react";
 interface SettingPopperProps {
     lang: LabelValue | null;
     setLang: (lang: LabelValue | null) => void;
-    originalEmail: string;
-    setOriginalEmail: (email: string) => void;
-    getEditorContent?: () => string;
+    tone: LabelValue | null;
+    setTone: (tone: LabelValue | null) => void;
+    length: LabelValue | null;
+    setLength: (length: LabelValue | null) => void;
     parentRef?: React.RefObject<HTMLDivElement>;
 }
 interface SettingPopperState {
@@ -21,7 +22,7 @@ declare class SettingPopper extends React.Component<SettingPopperProps, SettingP
     getLanguageOptions: () => Promise<void>;
     handleClickOutside: (event: MouseEvent) => void;
     togglePopper: () => void;
-    handleLangChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+    renderChipGroup: (options: LabelValue[], selected: LabelValue | null, onSelect: (opt: LabelValue) => void, iconMap: Record<string, React.ReactNode>, columns?: number) => React.JSX.Element;
     render(): React.JSX.Element;
 }
 export default SettingPopper;