@copilotz/chat-ui 0.9.6 → 0.9.7
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/index.cjs +96 -79
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +96 -79
- package/dist/index.js.map +1 -1
- package/dist/styles.css +71 -8
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -4586,6 +4586,18 @@ var ChatInput = (0, import_react8.memo)(function ChatInput2({
|
|
|
4586
4586
|
}).slice(0, 6);
|
|
4587
4587
|
}, [activeMention, mentionAgents]);
|
|
4588
4588
|
const isMentionMenuOpen = filteredMentionAgents.length > 0;
|
|
4589
|
+
const resizeTextarea = (0, import_react8.useCallback)(() => {
|
|
4590
|
+
const textarea = textareaRef.current;
|
|
4591
|
+
if (!textarea) return;
|
|
4592
|
+
const viewportWidth = typeof window === "undefined" ? 1024 : window.innerWidth;
|
|
4593
|
+
const maxHeight = viewportWidth > 768 ? 240 : 190;
|
|
4594
|
+
textarea.style.height = "auto";
|
|
4595
|
+
textarea.style.height = `${Math.min(textarea.scrollHeight, maxHeight)}px`;
|
|
4596
|
+
textarea.style.overflowY = textarea.scrollHeight > maxHeight ? "auto" : "hidden";
|
|
4597
|
+
}, []);
|
|
4598
|
+
(0, import_react8.useEffect)(() => {
|
|
4599
|
+
resizeTextarea();
|
|
4600
|
+
}, [resizeTextarea, value]);
|
|
4589
4601
|
const syncMentionState = (0, import_react8.useCallback)((nextValue, nextCaret) => {
|
|
4590
4602
|
const caret = typeof nextCaret === "number" ? nextCaret : textareaRef.current?.selectionStart ?? nextValue.length;
|
|
4591
4603
|
const nextMatch = getActiveMentionMatch(nextValue, caret);
|
|
@@ -5056,7 +5068,7 @@ var ChatInput = (0, import_react8.memo)(function ChatInput2({
|
|
|
5056
5068
|
};
|
|
5057
5069
|
const canAddMoreAttachments = attachments.length < maxAttachments;
|
|
5058
5070
|
const showVoiceComposer = enableAudioRecording && isVoiceComposerOpen;
|
|
5059
|
-
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: `border-t
|
|
5071
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: `border-t bg-background/95 py-2 ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "mx-auto w-full max-w-3xl space-y-3 px-3 md:px-2", children: [
|
|
5060
5072
|
uploadProgress.size > 0 && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "space-y-2", children: Array.from(uploadProgress.entries()).map(([id, progress]) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
5061
5073
|
FileUploadItem,
|
|
5062
5074
|
{
|
|
@@ -5120,46 +5132,14 @@ var ChatInput = (0, import_react8.memo)(function ChatInput2({
|
|
|
5120
5132
|
void closeVoiceComposer();
|
|
5121
5133
|
}
|
|
5122
5134
|
}
|
|
5123
|
-
) }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("form", { onSubmit: handleSubmit, className: "mb-1
|
|
5135
|
+
) }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("form", { onSubmit: handleSubmit, className: "mb-1", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
|
|
5124
5136
|
"div",
|
|
5125
5137
|
{
|
|
5126
|
-
className: "flex
|
|
5138
|
+
className: "group/composer flex w-full flex-col gap-2 rounded-3xl border border-border/80 bg-card/95 p-2.5 shadow-sm transition-[border-color,box-shadow,background-color] focus-within:border-ring/60 focus-within:bg-card focus-within:shadow-md focus-within:ring-2 focus-within:ring-ring/15",
|
|
5127
5139
|
onDrop: handleDrop,
|
|
5128
5140
|
onDragOver: handleDragOver,
|
|
5129
5141
|
children: [
|
|
5130
|
-
|
|
5131
|
-
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
5132
|
-
"input",
|
|
5133
|
-
{
|
|
5134
|
-
ref: fileInputRef,
|
|
5135
|
-
type: "file",
|
|
5136
|
-
multiple: true,
|
|
5137
|
-
accept: acceptedFileTypes.length > 0 ? acceptedFileTypes.join(",") : void 0,
|
|
5138
|
-
onChange: handleFileSelect,
|
|
5139
|
-
className: "hidden"
|
|
5140
|
-
}
|
|
5141
|
-
),
|
|
5142
|
-
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Tooltip, { children: [
|
|
5143
|
-
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
5144
|
-
Button,
|
|
5145
|
-
{
|
|
5146
|
-
type: "button",
|
|
5147
|
-
variant: "outline",
|
|
5148
|
-
size: "icon",
|
|
5149
|
-
className: "h-10 w-10",
|
|
5150
|
-
onClick: (e) => {
|
|
5151
|
-
e.preventDefault();
|
|
5152
|
-
e.stopPropagation();
|
|
5153
|
-
fileInputRef.current?.click();
|
|
5154
|
-
},
|
|
5155
|
-
disabled,
|
|
5156
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.Paperclip, { className: "h-4 w-4" })
|
|
5157
|
-
}
|
|
5158
|
-
) }),
|
|
5159
|
-
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipContent, { children: config?.labels?.attachFileTooltip })
|
|
5160
|
-
] })
|
|
5161
|
-
] }),
|
|
5162
|
-
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "relative flex-1", children: [
|
|
5142
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "relative min-w-0", children: [
|
|
5163
5143
|
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
5164
5144
|
Textarea,
|
|
5165
5145
|
{
|
|
@@ -5168,6 +5148,7 @@ var ChatInput = (0, import_react8.memo)(function ChatInput2({
|
|
|
5168
5148
|
onChange: (e) => {
|
|
5169
5149
|
onChange(e.target.value);
|
|
5170
5150
|
syncMentionState(e.target.value, e.target.selectionStart ?? e.target.value.length);
|
|
5151
|
+
requestAnimationFrame(resizeTextarea);
|
|
5171
5152
|
},
|
|
5172
5153
|
onSelect: (e) => {
|
|
5173
5154
|
const target = e.target;
|
|
@@ -5180,7 +5161,7 @@ var ChatInput = (0, import_react8.memo)(function ChatInput2({
|
|
|
5180
5161
|
onKeyDown: handleKeyDown,
|
|
5181
5162
|
placeholder,
|
|
5182
5163
|
disabled,
|
|
5183
|
-
className: "
|
|
5164
|
+
className: "min-h-11 resize-none overflow-hidden rounded-2xl border-0 bg-transparent px-3 py-2.5 text-base leading-6 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 md:text-sm",
|
|
5184
5165
|
rows: 1
|
|
5185
5166
|
}
|
|
5186
5167
|
),
|
|
@@ -5201,48 +5182,84 @@ var ChatInput = (0, import_react8.memo)(function ChatInput2({
|
|
|
5201
5182
|
agent.id
|
|
5202
5183
|
)) }) })
|
|
5203
5184
|
] }),
|
|
5204
|
-
|
|
5205
|
-
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
5206
|
-
|
|
5207
|
-
|
|
5208
|
-
|
|
5209
|
-
|
|
5210
|
-
|
|
5211
|
-
|
|
5212
|
-
|
|
5213
|
-
|
|
5214
|
-
|
|
5215
|
-
|
|
5216
|
-
|
|
5217
|
-
|
|
5218
|
-
|
|
5219
|
-
|
|
5220
|
-
|
|
5221
|
-
|
|
5222
|
-
|
|
5223
|
-
|
|
5224
|
-
|
|
5225
|
-
|
|
5226
|
-
|
|
5227
|
-
|
|
5228
|
-
|
|
5229
|
-
|
|
5230
|
-
|
|
5231
|
-
|
|
5232
|
-
|
|
5233
|
-
|
|
5234
|
-
|
|
5235
|
-
|
|
5236
|
-
|
|
5237
|
-
|
|
5238
|
-
|
|
5239
|
-
|
|
5240
|
-
|
|
5241
|
-
|
|
5242
|
-
|
|
5243
|
-
|
|
5244
|
-
|
|
5245
|
-
|
|
5185
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex min-h-10 items-center justify-between gap-2", children: [
|
|
5186
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex min-w-0 items-center gap-1", children: enableFileUpload && canAddMoreAttachments && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
|
|
5187
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
5188
|
+
"input",
|
|
5189
|
+
{
|
|
5190
|
+
ref: fileInputRef,
|
|
5191
|
+
type: "file",
|
|
5192
|
+
multiple: true,
|
|
5193
|
+
accept: acceptedFileTypes.length > 0 ? acceptedFileTypes.join(",") : void 0,
|
|
5194
|
+
onChange: handleFileSelect,
|
|
5195
|
+
className: "hidden"
|
|
5196
|
+
}
|
|
5197
|
+
),
|
|
5198
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Tooltip, { children: [
|
|
5199
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
5200
|
+
Button,
|
|
5201
|
+
{
|
|
5202
|
+
type: "button",
|
|
5203
|
+
variant: "ghost",
|
|
5204
|
+
size: "icon",
|
|
5205
|
+
className: "h-9 w-9 rounded-full text-muted-foreground hover:text-foreground",
|
|
5206
|
+
onClick: (e) => {
|
|
5207
|
+
e.preventDefault();
|
|
5208
|
+
e.stopPropagation();
|
|
5209
|
+
fileInputRef.current?.click();
|
|
5210
|
+
},
|
|
5211
|
+
disabled,
|
|
5212
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.Paperclip, { className: "h-4 w-4" })
|
|
5213
|
+
}
|
|
5214
|
+
) }),
|
|
5215
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipContent, { children: config?.labels?.attachFileTooltip })
|
|
5216
|
+
] })
|
|
5217
|
+
] }) }),
|
|
5218
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex shrink-0 items-center gap-1", children: [
|
|
5219
|
+
enableAudioRecording && canAddMoreAttachments && !value.trim() && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Tooltip, { children: [
|
|
5220
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
5221
|
+
Button,
|
|
5222
|
+
{
|
|
5223
|
+
type: "button",
|
|
5224
|
+
variant: "ghost",
|
|
5225
|
+
size: "icon",
|
|
5226
|
+
className: "h-9 w-9 rounded-full text-muted-foreground hover:text-foreground",
|
|
5227
|
+
onClick: () => {
|
|
5228
|
+
void startVoiceCapture();
|
|
5229
|
+
},
|
|
5230
|
+
disabled: disabled || isGenerating,
|
|
5231
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.Mic, { className: "h-4 w-4" })
|
|
5232
|
+
}
|
|
5233
|
+
) }),
|
|
5234
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipContent, { children: config?.labels?.voiceEnter })
|
|
5235
|
+
] }),
|
|
5236
|
+
isGenerating ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Tooltip, { children: [
|
|
5237
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
5238
|
+
Button,
|
|
5239
|
+
{
|
|
5240
|
+
type: "button",
|
|
5241
|
+
variant: "secondary",
|
|
5242
|
+
size: "icon",
|
|
5243
|
+
className: "h-9 w-9 rounded-full",
|
|
5244
|
+
onClick: onStopGeneration,
|
|
5245
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.Square, { className: "h-4 w-4" })
|
|
5246
|
+
}
|
|
5247
|
+
) }),
|
|
5248
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipContent, { children: config?.labels?.stopGenerationTooltip })
|
|
5249
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Tooltip, { children: [
|
|
5250
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
5251
|
+
Button,
|
|
5252
|
+
{
|
|
5253
|
+
type: "submit",
|
|
5254
|
+
size: "icon",
|
|
5255
|
+
className: "h-9 w-9 rounded-full",
|
|
5256
|
+
disabled: disabled || !value.trim() && attachments.length === 0,
|
|
5257
|
+
children: disabled ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.Loader2, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.Send, { className: "h-4 w-4" })
|
|
5258
|
+
}
|
|
5259
|
+
) }),
|
|
5260
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipContent, { children: config?.labels?.sendMessageTooltip })
|
|
5261
|
+
] })
|
|
5262
|
+
] })
|
|
5246
5263
|
] })
|
|
5247
5264
|
]
|
|
5248
5265
|
}
|