@kite-copilot/chat-panel 0.2.17 → 0.2.18

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.
Files changed (8) hide show
  1. package/dist/auto.cjs +45 -50
  2. package/dist/auto.js +1 -1
  3. package/dist/{chunk-YUCUEKGB.js → chunk-UW3AFJMK.js} +46 -65
  4. package/dist/embed.global.js +12 -12
  5. package/dist/index.cjs +45 -50
  6. package/dist/index.js +1 -1
  7. package/dist/styles.css +1 -1
  8. package/package.json +1 -1
package/dist/auto.cjs CHANGED
@@ -887,7 +887,7 @@ function DataRenderer({ type, data }) {
887
887
  // src/ChatPanel.tsx
888
888
  var import_jsx_runtime9 = require("react/jsx-runtime");
889
889
  var DEFAULT_AGENT_URL = "http://localhost:5002";
890
- var PANEL_WIDTH = 400;
890
+ var PANEL_WIDTH = 340;
891
891
  function renderMarkdown(text) {
892
892
  if (!text) return null;
893
893
  const lines = text.split("\n");
@@ -1715,7 +1715,11 @@ function ChatPanel({
1715
1715
  const isRespondingToNotification = lastAssistantMessage?.isNotificationMessage === true;
1716
1716
  const now = Date.now();
1717
1717
  const userMessage = { id: now, role: "user", content: userText };
1718
- setMessages((prev) => [...prev, userMessage]);
1718
+ setMessages(
1719
+ (prev) => prev.map(
1720
+ (m) => m.followups && m.followups.length > 0 ? { ...m, followupSelected: true } : m
1721
+ ).concat(userMessage)
1722
+ );
1719
1723
  if (isRespondingToNotification) {
1720
1724
  const thankYouMessageId = Date.now() + 1;
1721
1725
  const thankYouMessage = {
@@ -2640,43 +2644,37 @@ ${userText}`
2640
2644
  {
2641
2645
  className: isEmpty ? "grid flex-1 place-items-center transition-all duration-300" : "flex flex-1 flex-col transition-all duration-300 min-h-0 overflow-hidden",
2642
2646
  children: isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "w-full overflow-y-auto px-4", children: [
2643
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "py-3 transition-all duration-300", children: [
2644
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h2", { className: "text-center text-2xl font-semibold text-gray-900", children: panelView === "folder" ? folders.find((f) => f.id === currentFolderId)?.title || "" : "What can I help with?" }),
2645
- panelView === "landing" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "mt-1 text-center text-xs text-gray-500", children: "Ask me anything about your account" })
2646
- ] }),
2647
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "py-3 transition-all duration-300", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h2", { className: "text-center text-2xl font-semibold text-gray-900", children: panelView === "folder" ? folders.find((f) => f.id === currentFolderId)?.title || "" : "How can I help?" }) }),
2647
2648
  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "pb-4 px-4", children: [
2648
- panelView === "landing" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
2649
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mb-2 text-[10px] font-semibold uppercase tracking-wider text-gray-400", children: "Suggested Questions" }),
2650
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex flex-col gap-1", children: loadingQuestions ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Loader2, { className: "h-4 w-4 animate-spin text-gray-400" }) }) : startingQuestions.map((question, index) => {
2651
- const iconColors = [
2652
- "bg-blue-400",
2653
- "bg-green-400",
2654
- "bg-purple-400",
2655
- "bg-orange-400",
2656
- "bg-pink-400"
2657
- ];
2658
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
2659
- Button,
2660
- {
2661
- type: "button",
2662
- size: "sm",
2663
- variant: "ghost",
2664
- className: "w-full justify-start rounded-lg px-3 py-1.5 text-xs text-gray-700 hover:bg-gray-100 h-auto",
2665
- onClick: () => sendTopic(question.prompt),
2666
- children: [
2667
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2668
- "span",
2669
- {
2670
- className: `mr-2 inline-block h-1.5 w-1.5 rounded-full ${iconColors[index % iconColors.length]}`
2671
- }
2672
- ),
2673
- question.label
2674
- ]
2675
- },
2676
- question.id
2677
- );
2678
- }) })
2679
- ] }),
2649
+ panelView === "landing" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex flex-col gap-1", children: loadingQuestions ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Loader2, { className: "h-4 w-4 animate-spin text-gray-400" }) }) : startingQuestions.map((question, index) => {
2650
+ const iconColors = [
2651
+ "bg-blue-400",
2652
+ "bg-green-400",
2653
+ "bg-purple-400",
2654
+ "bg-orange-400",
2655
+ "bg-pink-400"
2656
+ ];
2657
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
2658
+ Button,
2659
+ {
2660
+ type: "button",
2661
+ size: "sm",
2662
+ variant: "ghost",
2663
+ className: "w-full justify-start rounded-lg px-3 py-1.5 text-xs text-gray-700 hover:bg-gray-100 h-auto",
2664
+ onClick: () => sendTopic(question.prompt),
2665
+ children: [
2666
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2667
+ "span",
2668
+ {
2669
+ className: `mr-2 inline-block h-1.5 w-1.5 rounded-full ${iconColors[index % iconColors.length]}`
2670
+ }
2671
+ ),
2672
+ question.label
2673
+ ]
2674
+ },
2675
+ question.id
2676
+ );
2677
+ }) }) }),
2680
2678
  panelView === "folder" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
2681
2679
  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mb-3 flex items-center gap-2", children: [
2682
2680
  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
@@ -2727,14 +2725,7 @@ ${userText}`
2727
2725
  return null;
2728
2726
  }
2729
2727
  if (isUser) {
2730
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2731
- "div",
2732
- {
2733
- className: `flex justify-end ${isRoleChange ? "mt-3" : ""}`,
2734
- children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "max-w-[280px] rounded-2xl rounded-br-md bg-gray-900 px-3.5 py-2.5 text-sm text-white shadow-sm", children: message.content })
2735
- },
2736
- message.id
2737
- );
2728
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `flex justify-end ${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "max-w-[260px] rounded-2xl rounded-br-md bg-gray-900 px-3.5 py-2.5 text-sm text-white shadow-sm", children: message.content }) }, message.id);
2738
2729
  }
2739
2730
  if (message.kind === "searchSummary") {
2740
2731
  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
@@ -3841,10 +3832,14 @@ ${userText}`
3841
3832
  {
3842
3833
  placeholder: pendingFile ? "Describe what to do with this CSV..." : "Ask anything...",
3843
3834
  value: input,
3844
- onChange: (e) => {
3845
- setInput(e.target.value);
3846
- e.target.style.height = "24px";
3847
- e.target.style.height = `${Math.min(120, e.target.scrollHeight)}px`;
3835
+ onChange: (e) => setInput(e.target.value),
3836
+ rows: 1,
3837
+ className: "flex-1 border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 text-sm placeholder:text-gray-400 resize-none overflow-hidden outline-none",
3838
+ style: { minHeight: "20px", maxHeight: "120px" },
3839
+ onInput: (e) => {
3840
+ const target = e.target;
3841
+ target.style.height = "auto";
3842
+ target.style.height = Math.min(target.scrollHeight, 120) + "px";
3848
3843
  },
3849
3844
  onKeyDown: (e) => {
3850
3845
  if (e.key === "Enter" && !e.shiftKey && !e.metaKey && !e.ctrlKey) {
package/dist/auto.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  createKiteChat
3
- } from "./chunk-YUCUEKGB.js";
3
+ } from "./chunk-UW3AFJMK.js";
4
4
 
5
5
  // src/auto.ts
6
6
  function mountKiteChat(config) {
package/dist/{chunk-YUCUEKGB.js → chunk-UW3AFJMK.js} RENAMED
@@ -883,24 +883,10 @@ function DataRenderer({ type, data }) {
883
883
 
884
884
  // src/ChatPanel.tsx
885
885
  import * as React4 from "react";
886
- import {
887
- ArrowLeft,
888
- ArrowUp,
889
- Command,
890
- CornerDownLeft,
891
- CheckCircle2 as CheckCircle23,
892
- SquarePen,
893
- Paperclip,
894
- X,
895
- FileSpreadsheet,
896
- Loader2 as Loader22,
897
- ChevronLeft,
898
- ChevronRight,
899
- Sparkles
900
- } from "lucide-react";
886
+ import { ArrowLeft, ArrowUp, Command, CornerDownLeft, CheckCircle2 as CheckCircle23, SquarePen, Paperclip, X, FileSpreadsheet, Loader2 as Loader22, ChevronLeft, ChevronRight, Sparkles } from "lucide-react";
901
887
  import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
902
888
  var DEFAULT_AGENT_URL = "http://localhost:5002";
903
- var PANEL_WIDTH = 400;
889
+ var PANEL_WIDTH = 340;
904
890
  function renderMarkdown(text) {
905
891
  if (!text) return null;
906
892
  const lines = text.split("\n");
@@ -1728,7 +1714,11 @@ function ChatPanel({
1728
1714
  const isRespondingToNotification = lastAssistantMessage?.isNotificationMessage === true;
1729
1715
  const now = Date.now();
1730
1716
  const userMessage = { id: now, role: "user", content: userText };
1731
- setMessages((prev) => [...prev, userMessage]);
1717
+ setMessages(
1718
+ (prev) => prev.map(
1719
+ (m) => m.followups && m.followups.length > 0 ? { ...m, followupSelected: true } : m
1720
+ ).concat(userMessage)
1721
+ );
1732
1722
  if (isRespondingToNotification) {
1733
1723
  const thankYouMessageId = Date.now() + 1;
1734
1724
  const thankYouMessage = {
@@ -2653,43 +2643,37 @@ ${userText}`
2653
2643
  {
2654
2644
  className: isEmpty ? "grid flex-1 place-items-center transition-all duration-300" : "flex flex-1 flex-col transition-all duration-300 min-h-0 overflow-hidden",
2655
2645
  children: isEmpty ? /* @__PURE__ */ jsxs5("div", { className: "w-full overflow-y-auto px-4", children: [
2656
- /* @__PURE__ */ jsxs5("div", { className: "py-3 transition-all duration-300", children: [
2657
- /* @__PURE__ */ jsx9("h2", { className: "text-center text-2xl font-semibold text-gray-900", children: panelView === "folder" ? folders.find((f) => f.id === currentFolderId)?.title || "" : "What can I help with?" }),
2658
- panelView === "landing" && /* @__PURE__ */ jsx9("p", { className: "mt-1 text-center text-xs text-gray-500", children: "Ask me anything about your account" })
2659
- ] }),
2646
+ /* @__PURE__ */ jsx9("div", { className: "py-3 transition-all duration-300", children: /* @__PURE__ */ jsx9("h2", { className: "text-center text-2xl font-semibold text-gray-900", children: panelView === "folder" ? folders.find((f) => f.id === currentFolderId)?.title || "" : "How can I help?" }) }),
2660
2647
  /* @__PURE__ */ jsxs5("div", { className: "pb-4 px-4", children: [
2661
- panelView === "landing" && /* @__PURE__ */ jsxs5(Fragment2, { children: [
2662
- /* @__PURE__ */ jsx9("div", { className: "mb-2 text-[10px] font-semibold uppercase tracking-wider text-gray-400", children: "Suggested Questions" }),
2663
- /* @__PURE__ */ jsx9("div", { className: "flex flex-col gap-1", children: loadingQuestions ? /* @__PURE__ */ jsx9("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ jsx9(Loader22, { className: "h-4 w-4 animate-spin text-gray-400" }) }) : startingQuestions.map((question, index) => {
2664
- const iconColors = [
2665
- "bg-blue-400",
2666
- "bg-green-400",
2667
- "bg-purple-400",
2668
- "bg-orange-400",
2669
- "bg-pink-400"
2670
- ];
2671
- return /* @__PURE__ */ jsxs5(
2672
- Button,
2673
- {
2674
- type: "button",
2675
- size: "sm",
2676
- variant: "ghost",
2677
- className: "w-full justify-start rounded-lg px-3 py-1.5 text-xs text-gray-700 hover:bg-gray-100 h-auto",
2678
- onClick: () => sendTopic(question.prompt),
2679
- children: [
2680
- /* @__PURE__ */ jsx9(
2681
- "span",
2682
- {
2683
- className: `mr-2 inline-block h-1.5 w-1.5 rounded-full ${iconColors[index % iconColors.length]}`
2684
- }
2685
- ),
2686
- question.label
2687
- ]
2688
- },
2689
- question.id
2690
- );
2691
- }) })
2692
- ] }),
2648
+ panelView === "landing" && /* @__PURE__ */ jsx9(Fragment2, { children: /* @__PURE__ */ jsx9("div", { className: "flex flex-col gap-1", children: loadingQuestions ? /* @__PURE__ */ jsx9("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ jsx9(Loader22, { className: "h-4 w-4 animate-spin text-gray-400" }) }) : startingQuestions.map((question, index) => {
2649
+ const iconColors = [
2650
+ "bg-blue-400",
2651
+ "bg-green-400",
2652
+ "bg-purple-400",
2653
+ "bg-orange-400",
2654
+ "bg-pink-400"
2655
+ ];
2656
+ return /* @__PURE__ */ jsxs5(
2657
+ Button,
2658
+ {
2659
+ type: "button",
2660
+ size: "sm",
2661
+ variant: "ghost",
2662
+ className: "w-full justify-start rounded-lg px-3 py-1.5 text-xs text-gray-700 hover:bg-gray-100 h-auto",
2663
+ onClick: () => sendTopic(question.prompt),
2664
+ children: [
2665
+ /* @__PURE__ */ jsx9(
2666
+ "span",
2667
+ {
2668
+ className: `mr-2 inline-block h-1.5 w-1.5 rounded-full ${iconColors[index % iconColors.length]}`
2669
+ }
2670
+ ),
2671
+ question.label
2672
+ ]
2673
+ },
2674
+ question.id
2675
+ );
2676
+ }) }) }),
2693
2677
  panelView === "folder" && /* @__PURE__ */ jsxs5(Fragment2, { children: [
2694
2678
  /* @__PURE__ */ jsxs5("div", { className: "mb-3 flex items-center gap-2", children: [
2695
2679
  /* @__PURE__ */ jsx9(
@@ -2740,14 +2724,7 @@ ${userText}`
2740
2724
  return null;
2741
2725
  }
2742
2726
  if (isUser) {
2743
- return /* @__PURE__ */ jsx9(
2744
- "div",
2745
- {
2746
- className: `flex justify-end ${isRoleChange ? "mt-3" : ""}`,
2747
- children: /* @__PURE__ */ jsx9("div", { className: "max-w-[280px] rounded-2xl rounded-br-md bg-gray-900 px-3.5 py-2.5 text-sm text-white shadow-sm", children: message.content })
2748
- },
2749
- message.id
2750
- );
2727
+ return /* @__PURE__ */ jsx9("div", { className: `flex justify-end ${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ jsx9("div", { className: "max-w-[260px] rounded-2xl rounded-br-md bg-gray-900 px-3.5 py-2.5 text-sm text-white shadow-sm", children: message.content }) }, message.id);
2751
2728
  }
2752
2729
  if (message.kind === "searchSummary") {
2753
2730
  return /* @__PURE__ */ jsx9(
@@ -3854,10 +3831,14 @@ ${userText}`
3854
3831
  {
3855
3832
  placeholder: pendingFile ? "Describe what to do with this CSV..." : "Ask anything...",
3856
3833
  value: input,
3857
- onChange: (e) => {
3858
- setInput(e.target.value);
3859
- e.target.style.height = "24px";
3860
- e.target.style.height = `${Math.min(120, e.target.scrollHeight)}px`;
3834
+ onChange: (e) => setInput(e.target.value),
3835
+ rows: 1,
3836
+ className: "flex-1 border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 text-sm placeholder:text-gray-400 resize-none overflow-hidden outline-none",
3837
+ style: { minHeight: "20px", maxHeight: "120px" },
3838
+ onInput: (e) => {
3839
+ const target = e.target;
3840
+ target.style.height = "auto";
3841
+ target.style.height = Math.min(target.scrollHeight, 120) + "px";
3861
3842
  },
3862
3843
  onKeyDown: (e) => {
3863
3844
  if (e.key === "Enter" && !e.shiftKey && !e.metaKey && !e.ctrlKey) {