@gendive/chatllm 0.17.8 → 0.17.9

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.
@@ -4799,7 +4799,7 @@ var ChatInput = ({
4799
4799
  };
4800
4800
  return icon ? iconMap[icon] || "sparkling-line" : "sparkling-line";
4801
4801
  };
4802
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
4802
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
4803
4803
  "footer",
4804
4804
  {
4805
4805
  className: "chatllm-input-footer",
@@ -4811,297 +4811,392 @@ var ChatInput = ({
4811
4811
  display: "flex",
4812
4812
  flexDirection: "column",
4813
4813
  alignItems: "center",
4814
- paddingBottom: "40px",
4814
+ paddingBottom: "16px",
4815
4815
  paddingTop: "64px",
4816
4816
  background: "linear-gradient(to top, var(--chatllm-bg) 60%, transparent)",
4817
4817
  pointerEvents: "none"
4818
4818
  },
4819
- children: [
4820
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
4821
- "div",
4822
- {
4823
- style: {
4824
- width: "100%",
4825
- maxWidth: "820px",
4826
- padding: "0 24px",
4827
- pointerEvents: "auto"
4828
- },
4829
- children: [
4830
- activeSkillExecution && activeSkillExecution.status === "executing" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
4819
+ children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
4820
+ "div",
4821
+ {
4822
+ style: {
4823
+ width: "100%",
4824
+ maxWidth: "820px",
4825
+ padding: "0 24px",
4826
+ pointerEvents: "auto"
4827
+ },
4828
+ children: [
4829
+ activeSkillExecution && activeSkillExecution.status === "executing" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
4830
+ "div",
4831
+ {
4832
+ style: {
4833
+ display: "flex",
4834
+ alignItems: "center",
4835
+ gap: "8px",
4836
+ padding: "8px 14px",
4837
+ marginBottom: "12px",
4838
+ backgroundColor: "var(--chatllm-primary-light)",
4839
+ borderRadius: "9999px",
4840
+ fontSize: "13px",
4841
+ fontWeight: 500,
4842
+ color: "var(--chatllm-primary)"
4843
+ },
4844
+ children: [
4845
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
4846
+ "span",
4847
+ {
4848
+ className: "chatllm-skeleton-pulse",
4849
+ style: {
4850
+ width: "8px",
4851
+ height: "8px",
4852
+ borderRadius: "50%",
4853
+ backgroundColor: "var(--chatllm-primary)"
4854
+ }
4855
+ }
4856
+ ),
4857
+ activeSkillExecution.skillName,
4858
+ " \uC2E4\uD589 \uC911..."
4859
+ ]
4860
+ }
4861
+ ),
4862
+ (quotedText || selectedAction) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", gap: "8px", marginBottom: "12px", flexWrap: "wrap" }, children: [
4863
+ quotedText && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
4831
4864
  "div",
4832
4865
  {
4833
4866
  style: {
4834
4867
  display: "flex",
4835
4868
  alignItems: "center",
4836
4869
  gap: "8px",
4837
- padding: "8px 14px",
4838
- marginBottom: "12px",
4839
- backgroundColor: "var(--chatllm-primary-light)",
4840
- borderRadius: "9999px",
4841
- fontSize: "13px",
4842
- fontWeight: 500,
4843
- color: "var(--chatllm-primary)"
4870
+ padding: "8px 12px",
4871
+ backgroundColor: "var(--chatllm-content-bg)",
4872
+ borderRadius: "12px",
4873
+ border: "1px solid var(--chatllm-border)",
4874
+ maxWidth: "100%"
4844
4875
  },
4845
4876
  children: [
4877
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconSvg, { name: "double-quotes-l", size: 14, color: "var(--chatllm-primary)" }),
4846
4878
  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
4847
4879
  "span",
4848
4880
  {
4849
- className: "chatllm-skeleton-pulse",
4850
4881
  style: {
4851
- width: "8px",
4852
- height: "8px",
4853
- borderRadius: "50%",
4854
- backgroundColor: "var(--chatllm-primary)"
4855
- }
4882
+ fontSize: "13px",
4883
+ color: "var(--chatllm-text)",
4884
+ overflow: "hidden",
4885
+ textOverflow: "ellipsis",
4886
+ whiteSpace: "nowrap",
4887
+ maxWidth: "300px"
4888
+ },
4889
+ children: quotedText
4856
4890
  }
4857
4891
  ),
4858
- activeSkillExecution.skillName,
4859
- " \uC2E4\uD589 \uC911..."
4892
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
4893
+ "button",
4894
+ {
4895
+ onClick: onClearQuote,
4896
+ style: {
4897
+ padding: "2px",
4898
+ backgroundColor: "transparent",
4899
+ border: "none",
4900
+ borderRadius: "4px",
4901
+ cursor: "pointer",
4902
+ display: "flex",
4903
+ alignItems: "center",
4904
+ justifyContent: "center"
4905
+ },
4906
+ children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconSvg, { name: "close-line", size: 14, color: "var(--chatllm-text-muted)" })
4907
+ }
4908
+ )
4860
4909
  ]
4861
4910
  }
4862
4911
  ),
4863
- (quotedText || selectedAction) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", gap: "8px", marginBottom: "12px", flexWrap: "wrap" }, children: [
4864
- quotedText && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
4865
- "div",
4866
- {
4867
- style: {
4868
- display: "flex",
4869
- alignItems: "center",
4870
- gap: "8px",
4871
- padding: "8px 12px",
4872
- backgroundColor: "var(--chatllm-content-bg)",
4873
- borderRadius: "12px",
4874
- border: "1px solid var(--chatllm-border)",
4875
- maxWidth: "100%"
4876
- },
4877
- children: [
4878
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconSvg, { name: "double-quotes-l", size: 14, color: "var(--chatllm-primary)" }),
4879
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
4880
- "span",
4881
- {
4882
- style: {
4883
- fontSize: "13px",
4884
- color: "var(--chatllm-text)",
4885
- overflow: "hidden",
4886
- textOverflow: "ellipsis",
4887
- whiteSpace: "nowrap",
4888
- maxWidth: "300px"
4889
- },
4890
- children: quotedText
4891
- }
4892
- ),
4893
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
4894
- "button",
4895
- {
4896
- onClick: onClearQuote,
4897
- style: {
4898
- padding: "2px",
4899
- backgroundColor: "transparent",
4900
- border: "none",
4901
- borderRadius: "4px",
4902
- cursor: "pointer",
4903
- display: "flex",
4904
- alignItems: "center",
4905
- justifyContent: "center"
4906
- },
4907
- children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconSvg, { name: "close-line", size: 14, color: "var(--chatllm-text-muted)" })
4908
- }
4909
- )
4910
- ]
4911
- }
4912
- ),
4913
- selectedAction && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
4914
- "div",
4915
- {
4916
- style: {
4917
- display: "flex",
4918
- alignItems: "center",
4919
- gap: "6px",
4920
- padding: "8px 14px",
4921
- backgroundColor: "var(--chatllm-primary-light)",
4922
- borderRadius: "9999px",
4923
- fontSize: "13px",
4924
- fontWeight: 500,
4925
- color: "var(--chatllm-primary)"
4926
- },
4927
- children: [
4928
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconSvg, { name: "sparkling-line", size: 14, color: "var(--chatllm-primary)" }),
4929
- selectedAction.label,
4930
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
4931
- "button",
4932
- {
4933
- onClick: onClearAction,
4934
- style: {
4935
- padding: "2px",
4936
- backgroundColor: "transparent",
4937
- border: "none",
4938
- borderRadius: "4px",
4939
- cursor: "pointer",
4940
- display: "flex",
4941
- alignItems: "center",
4942
- justifyContent: "center"
4943
- },
4944
- children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconSvg, { name: "close-line", size: 14, color: "var(--chatllm-primary)" })
4945
- }
4946
- )
4947
- ]
4948
- }
4949
- )
4950
- ] }),
4951
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
4952
- "input",
4953
- {
4954
- ref: fileInputRef,
4955
- type: "file",
4956
- multiple: true,
4957
- accept: acceptedFileTypes?.join(",") || void 0,
4958
- onChange: handleFileSelect,
4959
- style: { display: "none" }
4960
- }
4961
- ),
4962
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
4912
+ selectedAction && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
4963
4913
  "div",
4964
4914
  {
4965
- className: "chatllm-input-container",
4966
- onDrop: handleDrop,
4967
- onDragOver: handleDragOver,
4968
- onDragLeave: handleDragLeave,
4969
- style: isDragOver ? { outline: "2px dashed var(--chatllm-primary)", outlineOffset: "-2px" } : void 0,
4915
+ style: {
4916
+ display: "flex",
4917
+ alignItems: "center",
4918
+ gap: "6px",
4919
+ padding: "8px 14px",
4920
+ backgroundColor: "var(--chatllm-primary-light)",
4921
+ borderRadius: "9999px",
4922
+ fontSize: "13px",
4923
+ fontWeight: 500,
4924
+ color: "var(--chatllm-primary)"
4925
+ },
4970
4926
  children: [
4971
- attachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
4972
- "div",
4973
- {
4974
- style: {
4975
- display: "flex",
4976
- gap: "8px",
4977
- padding: "12px 24px 0 24px",
4978
- flexWrap: "wrap"
4979
- },
4980
- children: attachments.map((att) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
4981
- "div",
4982
- {
4983
- style: {
4984
- position: "relative",
4985
- display: "flex",
4986
- alignItems: "center",
4987
- gap: "8px",
4988
- padding: att.type === "image" ? "0" : "8px 12px",
4989
- backgroundColor: "var(--chatllm-content-bg)",
4990
- borderRadius: "12px",
4991
- border: "1px solid var(--chatllm-border)",
4992
- overflow: "hidden"
4993
- },
4994
- children: [
4995
- att.type === "image" && att.previewUrl ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
4996
- "img",
4997
- {
4998
- src: att.previewUrl,
4999
- alt: att.name,
5000
- style: {
5001
- width: "64px",
5002
- height: "64px",
5003
- objectFit: "cover",
5004
- borderRadius: "12px"
5005
- }
5006
- }
5007
- ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
5008
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconSvg, { name: "file-text-line", size: 16, color: "var(--chatllm-text-muted)" }),
5009
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { fontSize: "13px", color: "var(--chatllm-text)", maxWidth: "120px", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: att.name })
5010
- ] }),
5011
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
5012
- "button",
5013
- {
5014
- onClick: () => onRemoveAttachment?.(att.id),
5015
- style: {
5016
- position: "absolute",
5017
- top: "2px",
5018
- right: "2px",
5019
- width: "20px",
5020
- height: "20px",
5021
- display: "flex",
5022
- alignItems: "center",
5023
- justifyContent: "center",
5024
- backgroundColor: "rgba(0,0,0,0.5)",
5025
- border: "none",
5026
- borderRadius: "50%",
5027
- cursor: "pointer",
5028
- padding: 0
5029
- },
5030
- children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconSvg, { name: "close-line", size: 12, color: "#fff" })
5031
- }
5032
- )
5033
- ]
5034
- },
5035
- att.id
5036
- ))
5037
- }
5038
- ),
4927
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconSvg, { name: "sparkling-line", size: 14, color: "var(--chatllm-primary)" }),
4928
+ selectedAction.label,
5039
4929
  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
5040
- "textarea",
4930
+ "button",
5041
4931
  {
5042
- ref: textareaRef,
5043
- value,
5044
- onChange: (e) => onChange(e.target.value),
5045
- onKeyDown: handleKeyDown,
5046
- onPaste: handlePaste,
5047
- placeholder,
5048
- rows: 1,
4932
+ onClick: onClearAction,
5049
4933
  style: {
5050
- width: "100%",
5051
- minHeight: "60px",
5052
- maxHeight: "200px",
5053
- padding: "24px 32px 8px 32px",
4934
+ padding: "2px",
5054
4935
  backgroundColor: "transparent",
5055
4936
  border: "none",
5056
- outline: "none",
5057
- fontSize: "16px",
5058
- lineHeight: "1.5",
5059
- resize: "none",
5060
- color: "var(--chatllm-text)"
5061
- }
5062
- }
5063
- ),
5064
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
5065
- "div",
5066
- {
5067
- style: {
4937
+ borderRadius: "4px",
4938
+ cursor: "pointer",
5068
4939
  display: "flex",
5069
4940
  alignItems: "center",
5070
- justifyContent: "space-between",
5071
- padding: "0 24px 20px 24px"
4941
+ justifyContent: "center"
5072
4942
  },
5073
- children: [
5074
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
5075
- actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { ref: actionMenuRef, style: { position: "relative" }, children: [
5076
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
5077
- "button",
5078
- {
5079
- onClick: () => setActionMenuOpen(!actionMenuOpen),
5080
- style: iconButtonStyle,
5081
- title: "\uAE30\uB2A5 \uCD94\uAC00",
5082
- children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconSvg, { name: "add-line", size: 22, color: "var(--chatllm-text-muted)" })
4943
+ children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconSvg, { name: "close-line", size: 14, color: "var(--chatllm-primary)" })
4944
+ }
4945
+ )
4946
+ ]
4947
+ }
4948
+ )
4949
+ ] }),
4950
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
4951
+ "input",
4952
+ {
4953
+ ref: fileInputRef,
4954
+ type: "file",
4955
+ multiple: true,
4956
+ accept: acceptedFileTypes?.join(",") || void 0,
4957
+ onChange: handleFileSelect,
4958
+ style: { display: "none" }
4959
+ }
4960
+ ),
4961
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
4962
+ "div",
4963
+ {
4964
+ className: "chatllm-input-container",
4965
+ onDrop: handleDrop,
4966
+ onDragOver: handleDragOver,
4967
+ onDragLeave: handleDragLeave,
4968
+ style: isDragOver ? { outline: "2px dashed var(--chatllm-primary)", outlineOffset: "-2px" } : void 0,
4969
+ children: [
4970
+ attachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
4971
+ "div",
4972
+ {
4973
+ style: {
4974
+ display: "flex",
4975
+ gap: "8px",
4976
+ padding: "12px 24px 0 24px",
4977
+ flexWrap: "wrap"
4978
+ },
4979
+ children: attachments.map((att) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
4980
+ "div",
4981
+ {
4982
+ style: {
4983
+ position: "relative",
4984
+ display: "flex",
4985
+ alignItems: "center",
4986
+ gap: "8px",
4987
+ padding: att.type === "image" ? "0" : "8px 12px",
4988
+ backgroundColor: "var(--chatllm-content-bg)",
4989
+ borderRadius: "12px",
4990
+ border: "1px solid var(--chatllm-border)",
4991
+ overflow: "hidden"
4992
+ },
4993
+ children: [
4994
+ att.type === "image" && att.previewUrl ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
4995
+ "img",
4996
+ {
4997
+ src: att.previewUrl,
4998
+ alt: att.name,
4999
+ style: {
5000
+ width: "64px",
5001
+ height: "64px",
5002
+ objectFit: "cover",
5003
+ borderRadius: "12px"
5083
5004
  }
5084
- ),
5085
- actionMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
5086
- "div",
5087
- {
5088
- style: {
5089
- position: "absolute",
5090
- bottom: "100%",
5091
- left: 0,
5092
- marginBottom: "8px",
5093
- backgroundColor: "var(--chatllm-content-bg)",
5094
- borderRadius: "16px",
5095
- boxShadow: "var(--chatllm-shadow-sheet)",
5096
- border: "1px solid var(--chatllm-border)",
5097
- padding: "8px",
5098
- minWidth: "220px",
5099
- zIndex: 100
5005
+ }
5006
+ ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
5007
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconSvg, { name: "file-text-line", size: 16, color: "var(--chatllm-text-muted)" }),
5008
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { fontSize: "13px", color: "var(--chatllm-text)", maxWidth: "120px", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: att.name })
5009
+ ] }),
5010
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
5011
+ "button",
5012
+ {
5013
+ onClick: () => onRemoveAttachment?.(att.id),
5014
+ style: {
5015
+ position: "absolute",
5016
+ top: "2px",
5017
+ right: "2px",
5018
+ width: "20px",
5019
+ height: "20px",
5020
+ display: "flex",
5021
+ alignItems: "center",
5022
+ justifyContent: "center",
5023
+ backgroundColor: "rgba(0,0,0,0.5)",
5024
+ border: "none",
5025
+ borderRadius: "50%",
5026
+ cursor: "pointer",
5027
+ padding: 0
5028
+ },
5029
+ children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconSvg, { name: "close-line", size: 12, color: "#fff" })
5030
+ }
5031
+ )
5032
+ ]
5033
+ },
5034
+ att.id
5035
+ ))
5036
+ }
5037
+ ),
5038
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
5039
+ "textarea",
5040
+ {
5041
+ ref: textareaRef,
5042
+ value,
5043
+ onChange: (e) => onChange(e.target.value),
5044
+ onKeyDown: handleKeyDown,
5045
+ onPaste: handlePaste,
5046
+ placeholder,
5047
+ rows: 1,
5048
+ style: {
5049
+ width: "100%",
5050
+ minHeight: "60px",
5051
+ maxHeight: "200px",
5052
+ padding: "24px 32px 8px 32px",
5053
+ backgroundColor: "transparent",
5054
+ border: "none",
5055
+ outline: "none",
5056
+ fontSize: "16px",
5057
+ lineHeight: "1.5",
5058
+ resize: "none",
5059
+ color: "var(--chatllm-text)"
5060
+ }
5061
+ }
5062
+ ),
5063
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
5064
+ "div",
5065
+ {
5066
+ style: {
5067
+ display: "flex",
5068
+ alignItems: "center",
5069
+ justifyContent: "space-between",
5070
+ padding: "0 24px 20px 24px"
5071
+ },
5072
+ children: [
5073
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
5074
+ actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { ref: actionMenuRef, style: { position: "relative" }, children: [
5075
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
5076
+ "button",
5077
+ {
5078
+ onClick: () => setActionMenuOpen(!actionMenuOpen),
5079
+ style: iconButtonStyle,
5080
+ title: "\uAE30\uB2A5 \uCD94\uAC00",
5081
+ children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconSvg, { name: "add-line", size: 22, color: "var(--chatllm-text-muted)" })
5082
+ }
5083
+ ),
5084
+ actionMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
5085
+ "div",
5086
+ {
5087
+ style: {
5088
+ position: "absolute",
5089
+ bottom: "100%",
5090
+ left: 0,
5091
+ marginBottom: "8px",
5092
+ backgroundColor: "var(--chatllm-content-bg)",
5093
+ borderRadius: "16px",
5094
+ boxShadow: "var(--chatllm-shadow-sheet)",
5095
+ border: "1px solid var(--chatllm-border)",
5096
+ padding: "8px",
5097
+ minWidth: "220px",
5098
+ zIndex: 100
5099
+ },
5100
+ children: actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
5101
+ "button",
5102
+ {
5103
+ onClick: () => handleActionSelect(action),
5104
+ style: {
5105
+ width: "100%",
5106
+ display: "flex",
5107
+ alignItems: "center",
5108
+ gap: "12px",
5109
+ padding: "12px",
5110
+ backgroundColor: "transparent",
5111
+ border: "none",
5112
+ borderRadius: "12px",
5113
+ cursor: "pointer",
5114
+ textAlign: "left",
5115
+ transition: "background-color 0.2s"
5116
+ },
5117
+ onMouseOver: (e) => {
5118
+ e.currentTarget.style.backgroundColor = "var(--chatllm-bg-hover)";
5119
+ },
5120
+ onMouseOut: (e) => {
5121
+ e.currentTarget.style.backgroundColor = "transparent";
5122
+ },
5123
+ children: [
5124
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
5125
+ "div",
5126
+ {
5127
+ style: {
5128
+ width: "36px",
5129
+ height: "36px",
5130
+ display: "flex",
5131
+ alignItems: "center",
5132
+ justifyContent: "center",
5133
+ backgroundColor: "var(--chatllm-primary-light)",
5134
+ borderRadius: "10px"
5135
+ },
5136
+ children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
5137
+ IconSvg,
5138
+ {
5139
+ name: action.icon === "search" ? "search-line" : action.icon === "image" ? "image-line" : action.icon === "code" ? "code-s-slash-line" : "file-text-line",
5140
+ size: 20,
5141
+ color: "var(--chatllm-primary)"
5142
+ }
5143
+ )
5144
+ }
5145
+ ),
5146
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
5147
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { fontSize: "14px", fontWeight: 600, color: "var(--chatllm-text)" }, children: action.label }),
5148
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { fontSize: "12px", color: "var(--chatllm-text-muted)" }, children: action.description })
5149
+ ] })
5150
+ ]
5100
5151
  },
5101
- children: actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
5152
+ action.id
5153
+ ))
5154
+ }
5155
+ )
5156
+ ] }),
5157
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
5158
+ "button",
5159
+ {
5160
+ onClick: () => fileInputRef.current?.click(),
5161
+ style: iconButtonStyle,
5162
+ title: "\uD30C\uC77C \uCCA8\uBD80",
5163
+ "aria-label": "\uD30C\uC77C \uCCA8\uBD80",
5164
+ children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconSvg, { name: "attachment-line", size: 22, color: "var(--chatllm-text-muted)" })
5165
+ }
5166
+ ),
5167
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { ref: mainMenuRef, style: { position: "relative" }, children: [
5168
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
5169
+ "button",
5170
+ {
5171
+ onClick: () => setMainMenuOpen(!mainMenuOpen),
5172
+ style: {
5173
+ ...iconButtonStyle,
5174
+ backgroundColor: mainMenuOpen ? "var(--chatllm-bg-hover)" : "transparent"
5175
+ },
5176
+ title: "\uBA54\uB274",
5177
+ children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconSvg, { name: "add-line", size: 22, color: "var(--chatllm-text-muted)" })
5178
+ }
5179
+ ),
5180
+ mainMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
5181
+ "div",
5182
+ {
5183
+ style: {
5184
+ position: "absolute",
5185
+ bottom: "100%",
5186
+ left: 0,
5187
+ marginBottom: "8px",
5188
+ backgroundColor: "var(--chatllm-content-bg)",
5189
+ borderRadius: "16px",
5190
+ boxShadow: "var(--chatllm-shadow-sheet)",
5191
+ border: "1px solid var(--chatllm-border)",
5192
+ padding: "8px",
5193
+ minWidth: "240px",
5194
+ zIndex: 100
5195
+ },
5196
+ children: [
5197
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
5102
5198
  "button",
5103
5199
  {
5104
- onClick: () => handleActionSelect(action),
5105
5200
  style: {
5106
5201
  width: "100%",
5107
5202
  display: "flex",
@@ -5121,6 +5216,96 @@ var ChatInput = ({
5121
5216
  onMouseOut: (e) => {
5122
5217
  e.currentTarget.style.backgroundColor = "transparent";
5123
5218
  },
5219
+ onClick: () => {
5220
+ fileInputRef.current?.click();
5221
+ setMainMenuOpen(false);
5222
+ },
5223
+ children: [
5224
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconSvg, { name: "attachment-line", size: 20, color: "var(--chatllm-text-secondary)" }),
5225
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { fontSize: "14px", color: "var(--chatllm-text)" }, children: "\uD30C\uC77C \uB610\uB294 \uC0AC\uC9C4 \uCD94\uAC00" })
5226
+ ]
5227
+ }
5228
+ ),
5229
+ deepResearchEnabled && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
5230
+ "button",
5231
+ {
5232
+ onClick: () => {
5233
+ onDeepResearch?.();
5234
+ setMainMenuOpen(false);
5235
+ },
5236
+ style: {
5237
+ width: "100%",
5238
+ display: "flex",
5239
+ alignItems: "center",
5240
+ gap: "12px",
5241
+ padding: "12px",
5242
+ backgroundColor: "transparent",
5243
+ border: "none",
5244
+ borderRadius: "12px",
5245
+ cursor: "pointer",
5246
+ textAlign: "left",
5247
+ transition: "background-color 0.2s"
5248
+ },
5249
+ onMouseOver: (e) => {
5250
+ e.currentTarget.style.backgroundColor = "var(--chatllm-bg-hover)";
5251
+ },
5252
+ onMouseOut: (e) => {
5253
+ e.currentTarget.style.backgroundColor = "transparent";
5254
+ },
5255
+ children: [
5256
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
5257
+ IconSvg,
5258
+ {
5259
+ name: "search-eye-line",
5260
+ size: 20,
5261
+ color: isDeepResearchMode ? "var(--chatllm-primary)" : "var(--chatllm-text-secondary)"
5262
+ }
5263
+ ),
5264
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
5265
+ "span",
5266
+ {
5267
+ style: {
5268
+ flex: 1,
5269
+ fontSize: "14px",
5270
+ color: isDeepResearchMode ? "var(--chatllm-primary)" : "var(--chatllm-text)"
5271
+ },
5272
+ children: "\uC5F0\uAD6C"
5273
+ }
5274
+ ),
5275
+ isDeepResearchMode && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconSvg, { name: "check-line", size: 16, color: "var(--chatllm-primary)" })
5276
+ ]
5277
+ }
5278
+ ),
5279
+ manualSkills.map((skill) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
5280
+ "button",
5281
+ {
5282
+ onClick: () => {
5283
+ onSkillSelect?.(skill.name);
5284
+ setMainMenuOpen(false);
5285
+ },
5286
+ disabled: skill.disabled,
5287
+ style: {
5288
+ width: "100%",
5289
+ display: "flex",
5290
+ alignItems: "center",
5291
+ gap: "12px",
5292
+ padding: "12px",
5293
+ backgroundColor: "transparent",
5294
+ border: "none",
5295
+ borderRadius: "12px",
5296
+ cursor: skill.disabled ? "not-allowed" : "pointer",
5297
+ textAlign: "left",
5298
+ transition: "background-color 0.2s",
5299
+ opacity: skill.disabled ? 0.5 : 1
5300
+ },
5301
+ onMouseOver: (e) => {
5302
+ if (!skill.disabled) {
5303
+ e.currentTarget.style.backgroundColor = "var(--chatllm-bg-hover)";
5304
+ }
5305
+ },
5306
+ onMouseOut: (e) => {
5307
+ e.currentTarget.style.backgroundColor = "transparent";
5308
+ },
5124
5309
  children: [
5125
5310
  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
5126
5311
  "div",
@@ -5137,7 +5322,7 @@ var ChatInput = ({
5137
5322
  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
5138
5323
  IconSvg,
5139
5324
  {
5140
- name: action.icon === "search" ? "search-line" : action.icon === "image" ? "image-line" : action.icon === "code" ? "code-s-slash-line" : "file-text-line",
5325
+ name: mapSkillIcon(skill.icon),
5141
5326
  size: 20,
5142
5327
  color: "var(--chatllm-primary)"
5143
5328
  }
@@ -5145,289 +5330,92 @@ var ChatInput = ({
5145
5330
  }
5146
5331
  ),
5147
5332
  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
5148
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { fontSize: "14px", fontWeight: 600, color: "var(--chatllm-text)" }, children: action.label }),
5149
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { fontSize: "12px", color: "var(--chatllm-text-muted)" }, children: action.description })
5333
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { fontSize: "14px", fontWeight: 600, color: "var(--chatllm-text)" }, children: skill.label }),
5334
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { fontSize: "12px", color: "var(--chatllm-text-muted)", maxWidth: "180px", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: skill.description })
5150
5335
  ] })
5151
5336
  ]
5152
5337
  },
5153
- action.id
5338
+ skill.name
5154
5339
  ))
5155
- }
5156
- )
5157
- ] }),
5158
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
5159
- "button",
5160
- {
5161
- onClick: () => fileInputRef.current?.click(),
5162
- style: iconButtonStyle,
5163
- title: "\uD30C\uC77C \uCCA8\uBD80",
5164
- "aria-label": "\uD30C\uC77C \uCCA8\uBD80",
5165
- children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconSvg, { name: "attachment-line", size: 22, color: "var(--chatllm-text-muted)" })
5340
+ ]
5166
5341
  }
5167
- ),
5168
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { ref: mainMenuRef, style: { position: "relative" }, children: [
5342
+ )
5343
+ ] })
5344
+ ] }),
5345
+ isLoading ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
5346
+ "button",
5347
+ {
5348
+ onClick: onStop,
5349
+ style: {
5350
+ display: "flex",
5351
+ alignItems: "center",
5352
+ justifyContent: "center",
5353
+ height: "48px",
5354
+ padding: "0 32px",
5355
+ backgroundColor: "var(--chatllm-bg-tertiary)",
5356
+ border: "1px solid var(--chatllm-border)",
5357
+ borderRadius: "12px",
5358
+ cursor: "pointer",
5359
+ transition: "all 0.2s",
5360
+ gap: "8px"
5361
+ },
5362
+ children: [
5169
5363
  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
5170
- "button",
5364
+ "span",
5171
5365
  {
5172
- onClick: () => setMainMenuOpen(!mainMenuOpen),
5173
5366
  style: {
5174
- ...iconButtonStyle,
5175
- backgroundColor: mainMenuOpen ? "var(--chatllm-bg-hover)" : "transparent"
5367
+ fontSize: "14px",
5368
+ fontWeight: 700,
5369
+ color: "var(--chatllm-text-secondary)",
5370
+ textTransform: "uppercase",
5371
+ letterSpacing: "0.02em"
5176
5372
  },
5177
- title: "\uBA54\uB274",
5178
- children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconSvg, { name: "add-line", size: 22, color: "var(--chatllm-text-muted)" })
5373
+ children: "\uC911\uC9C0"
5179
5374
  }
5180
5375
  ),
5181
- mainMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
5182
- "div",
5376
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconSvg, { name: "stop-circle-line", size: 18, color: "var(--chatllm-text-secondary)" })
5377
+ ]
5378
+ }
5379
+ ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
5380
+ "button",
5381
+ {
5382
+ onClick: onSubmit,
5383
+ disabled: !value.trim() && attachments.length === 0,
5384
+ className: "chatllm-btn-primary",
5385
+ style: {
5386
+ display: "flex",
5387
+ alignItems: "center",
5388
+ justifyContent: "center",
5389
+ height: "48px",
5390
+ padding: "0 32px",
5391
+ borderRadius: "12px",
5392
+ cursor: value.trim() || attachments.length > 0 ? "pointer" : "not-allowed",
5393
+ opacity: value.trim() || attachments.length > 0 ? 1 : 0.5,
5394
+ gap: "8px"
5395
+ },
5396
+ children: [
5397
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
5398
+ "span",
5183
5399
  {
5184
5400
  style: {
5185
- position: "absolute",
5186
- bottom: "100%",
5187
- left: 0,
5188
- marginBottom: "8px",
5189
- backgroundColor: "var(--chatllm-content-bg)",
5190
- borderRadius: "16px",
5191
- boxShadow: "var(--chatllm-shadow-sheet)",
5192
- border: "1px solid var(--chatllm-border)",
5193
- padding: "8px",
5194
- minWidth: "240px",
5195
- zIndex: 100
5401
+ fontSize: "14px",
5402
+ fontWeight: 700,
5403
+ letterSpacing: "0.02em"
5196
5404
  },
5197
- children: [
5198
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
5199
- "button",
5200
- {
5201
- style: {
5202
- width: "100%",
5203
- display: "flex",
5204
- alignItems: "center",
5205
- gap: "12px",
5206
- padding: "12px",
5207
- backgroundColor: "transparent",
5208
- border: "none",
5209
- borderRadius: "12px",
5210
- cursor: "pointer",
5211
- textAlign: "left",
5212
- transition: "background-color 0.2s"
5213
- },
5214
- onMouseOver: (e) => {
5215
- e.currentTarget.style.backgroundColor = "var(--chatllm-bg-hover)";
5216
- },
5217
- onMouseOut: (e) => {
5218
- e.currentTarget.style.backgroundColor = "transparent";
5219
- },
5220
- onClick: () => {
5221
- fileInputRef.current?.click();
5222
- setMainMenuOpen(false);
5223
- },
5224
- children: [
5225
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconSvg, { name: "attachment-line", size: 20, color: "var(--chatllm-text-secondary)" }),
5226
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { fontSize: "14px", color: "var(--chatllm-text)" }, children: "\uD30C\uC77C \uB610\uB294 \uC0AC\uC9C4 \uCD94\uAC00" })
5227
- ]
5228
- }
5229
- ),
5230
- deepResearchEnabled && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
5231
- "button",
5232
- {
5233
- onClick: () => {
5234
- onDeepResearch?.();
5235
- setMainMenuOpen(false);
5236
- },
5237
- style: {
5238
- width: "100%",
5239
- display: "flex",
5240
- alignItems: "center",
5241
- gap: "12px",
5242
- padding: "12px",
5243
- backgroundColor: "transparent",
5244
- border: "none",
5245
- borderRadius: "12px",
5246
- cursor: "pointer",
5247
- textAlign: "left",
5248
- transition: "background-color 0.2s"
5249
- },
5250
- onMouseOver: (e) => {
5251
- e.currentTarget.style.backgroundColor = "var(--chatllm-bg-hover)";
5252
- },
5253
- onMouseOut: (e) => {
5254
- e.currentTarget.style.backgroundColor = "transparent";
5255
- },
5256
- children: [
5257
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
5258
- IconSvg,
5259
- {
5260
- name: "search-eye-line",
5261
- size: 20,
5262
- color: isDeepResearchMode ? "var(--chatllm-primary)" : "var(--chatllm-text-secondary)"
5263
- }
5264
- ),
5265
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
5266
- "span",
5267
- {
5268
- style: {
5269
- flex: 1,
5270
- fontSize: "14px",
5271
- color: isDeepResearchMode ? "var(--chatllm-primary)" : "var(--chatllm-text)"
5272
- },
5273
- children: "\uC5F0\uAD6C"
5274
- }
5275
- ),
5276
- isDeepResearchMode && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconSvg, { name: "check-line", size: 16, color: "var(--chatllm-primary)" })
5277
- ]
5278
- }
5279
- ),
5280
- manualSkills.map((skill) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
5281
- "button",
5282
- {
5283
- onClick: () => {
5284
- onSkillSelect?.(skill.name);
5285
- setMainMenuOpen(false);
5286
- },
5287
- disabled: skill.disabled,
5288
- style: {
5289
- width: "100%",
5290
- display: "flex",
5291
- alignItems: "center",
5292
- gap: "12px",
5293
- padding: "12px",
5294
- backgroundColor: "transparent",
5295
- border: "none",
5296
- borderRadius: "12px",
5297
- cursor: skill.disabled ? "not-allowed" : "pointer",
5298
- textAlign: "left",
5299
- transition: "background-color 0.2s",
5300
- opacity: skill.disabled ? 0.5 : 1
5301
- },
5302
- onMouseOver: (e) => {
5303
- if (!skill.disabled) {
5304
- e.currentTarget.style.backgroundColor = "var(--chatllm-bg-hover)";
5305
- }
5306
- },
5307
- onMouseOut: (e) => {
5308
- e.currentTarget.style.backgroundColor = "transparent";
5309
- },
5310
- children: [
5311
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
5312
- "div",
5313
- {
5314
- style: {
5315
- width: "36px",
5316
- height: "36px",
5317
- display: "flex",
5318
- alignItems: "center",
5319
- justifyContent: "center",
5320
- backgroundColor: "var(--chatllm-primary-light)",
5321
- borderRadius: "10px"
5322
- },
5323
- children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
5324
- IconSvg,
5325
- {
5326
- name: mapSkillIcon(skill.icon),
5327
- size: 20,
5328
- color: "var(--chatllm-primary)"
5329
- }
5330
- )
5331
- }
5332
- ),
5333
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
5334
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { fontSize: "14px", fontWeight: 600, color: "var(--chatllm-text)" }, children: skill.label }),
5335
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { fontSize: "12px", color: "var(--chatllm-text-muted)", maxWidth: "180px", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: skill.description })
5336
- ] })
5337
- ]
5338
- },
5339
- skill.name
5340
- ))
5341
- ]
5405
+ children: "\uBCF4\uB0B4\uAE30"
5342
5406
  }
5343
- )
5344
- ] })
5345
- ] }),
5346
- isLoading ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
5347
- "button",
5348
- {
5349
- onClick: onStop,
5350
- style: {
5351
- display: "flex",
5352
- alignItems: "center",
5353
- justifyContent: "center",
5354
- height: "48px",
5355
- padding: "0 32px",
5356
- backgroundColor: "var(--chatllm-bg-tertiary)",
5357
- border: "1px solid var(--chatllm-border)",
5358
- borderRadius: "12px",
5359
- cursor: "pointer",
5360
- transition: "all 0.2s",
5361
- gap: "8px"
5362
- },
5363
- children: [
5364
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
5365
- "span",
5366
- {
5367
- style: {
5368
- fontSize: "14px",
5369
- fontWeight: 700,
5370
- color: "var(--chatllm-text-secondary)",
5371
- textTransform: "uppercase",
5372
- letterSpacing: "0.02em"
5373
- },
5374
- children: "\uC911\uC9C0"
5375
- }
5376
- ),
5377
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconSvg, { name: "stop-circle-line", size: 18, color: "var(--chatllm-text-secondary)" })
5378
- ]
5379
- }
5380
- ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
5381
- "button",
5382
- {
5383
- onClick: onSubmit,
5384
- disabled: !value.trim() && attachments.length === 0,
5385
- className: "chatllm-btn-primary",
5386
- style: {
5387
- display: "flex",
5388
- alignItems: "center",
5389
- justifyContent: "center",
5390
- height: "48px",
5391
- padding: "0 32px",
5392
- borderRadius: "12px",
5393
- cursor: value.trim() || attachments.length > 0 ? "pointer" : "not-allowed",
5394
- opacity: value.trim() || attachments.length > 0 ? 1 : 0.5,
5395
- gap: "8px"
5396
- },
5397
- children: [
5398
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
5399
- "span",
5400
- {
5401
- style: {
5402
- fontSize: "14px",
5403
- fontWeight: 700,
5404
- letterSpacing: "0.02em"
5405
- },
5406
- children: "\uBCF4\uB0B4\uAE30"
5407
- }
5408
- ),
5409
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconSvg, { name: "arrow-up-s-line", size: 20, color: "#ffffff" })
5410
- ]
5411
- }
5412
- )
5413
- ]
5414
- }
5415
- )
5416
- ]
5417
- }
5418
- )
5419
- ]
5420
- }
5421
- ),
5422
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
5423
- "div",
5424
- {
5425
- style: {
5426
- textAlign: "center",
5427
- marginTop: "8px",
5428
- pointerEvents: "auto"
5429
- },
5430
- children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
5407
+ ),
5408
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconSvg, { name: "arrow-up-s-line", size: 20, color: "#ffffff" })
5409
+ ]
5410
+ }
5411
+ )
5412
+ ]
5413
+ }
5414
+ )
5415
+ ]
5416
+ }
5417
+ ),
5418
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { textAlign: "center", marginTop: "10px" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
5431
5419
  "button",
5432
5420
  {
5433
5421
  onClick: onDisclaimerClick,
@@ -5441,10 +5429,10 @@ var ChatInput = ({
5441
5429
  },
5442
5430
  children: "AI\uB294 \uC2E4\uC218\uB97C \uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4."
5443
5431
  }
5444
- )
5445
- }
5446
- )
5447
- ]
5432
+ ) })
5433
+ ]
5434
+ }
5435
+ )
5448
5436
  }
5449
5437
  );
5450
5438
  };