@antdv-next/x 0.0.3 → 0.1.0

package/dist/sender/components/TextArea.d.ts

@@ -1,7 +1,5 @@
+import { SenderFocusOptions } from '../interface';
 export type InsertPosition = "start" | "end" | "cursor";
-export interface SenderFocusOptions extends FocusOptions {
-    cursor?: "start" | "end" | "all";
-}
 export interface TextAreaRef {
     nativeElement: HTMLTextAreaElement | null;
     focus: (options?: SenderFocusOptions) => void;

package/dist/sender/context.d.ts

@@ -2,6 +2,7 @@ import { ComputedRef, InjectionKey } from 'vue';
 import { SenderProps } from './interface';
 export interface SenderContextValue extends SenderProps {
     triggerSend?: () => void;
+    setSubmitDisabled?: (disabled: boolean) => void;
 }
 export declare const SenderContextKey: InjectionKey<ComputedRef<SenderContextValue>>;
 export declare function useSenderContext(): ComputedRef<SenderContextValue>;

package/dist/sender/index.d.ts

@@ -1,8 +1,8 @@
-import { SenderProps, SenderRef } from './interface';
+import { SenderProps, SenderRef, SlotConfigType } from './interface';
 import { default as ForwardSender } from './Sender';
 import { default as SenderHeader } from './SenderHeader';
 import { default as SenderSwitch } from './SenderSwitch';
-export type { SenderProps, SenderRef };
+export type { SenderProps, SenderRef, SlotConfigType };
 type CompoundedSender = typeof ForwardSender & {
     Header: typeof SenderHeader;
     Switch: typeof SenderSwitch;

package/dist/sender/interface.d.ts

@@ -120,7 +120,8 @@ export interface SenderProps {
     placeholder?: string;
 }
 export interface SenderFocusOptions extends FocusOptions {
-    cursor?: "start" | "end" | "all";
+    cursor?: "start" | "end" | "all" | "slot";
+    key?: string;
 }
 export interface SenderRef {
     nativeElement: HTMLDivElement;

package/dist/sender/style/index.d.ts

@@ -1,5 +1,12 @@
 import { FullToken, GetDefaultToken } from '../../theme/interface';
 export interface ComponentToken {
+    colorBgSlot: string;
+    colorTextSlot: string;
+    colorTextSlotPlaceholder: string;
+    colorBorderSlot: string;
+    colorBorderSlotHover: string;
+    colorBgSkill: string;
+    colorBgSkillHover: string;
     colorBorderInput: string;
     switchCheckedBg: string;
     switchCheckedHoverBg: string;

package/dist/sender/style/index.js

@@ -1,5 +1,6 @@
 import { genStyleHooks } from "../../theme/genStyleUtils.js";
 import genSenderHeaderStyle from "./header.js";
+import genSlotTextAreaStyle from "./slot-textarea.js";
 import genSenderSwitchStyle from "./switch.js";
 import { mergeToken } from "@antdv-next/cssinjs/cssinjs-utils";
 import { FastColor } from "@ant-design/fast-color";
@@ -85,12 +86,26 @@ var genSenderStyle = (token) => {
 };
 var prepareComponentToken = (token) => {
 	const { colorPrimary, colorFillTertiary } = token;
+	const colorBgSlot = new FastColor(colorPrimary).setA(.06).toRgbString();
+	const colorBgSkill = new FastColor(colorPrimary).setA(.08).toRgbString();
+	const colorBgSkillHover = new FastColor(colorPrimary).setA(.15).toRgbString();
+	const colorTextSlot = colorPrimary;
+	const colorTextSlotPlaceholder = new FastColor(colorPrimary).setA(.25).toRgbString();
+	const colorBorderSlotHover = new FastColor(colorPrimary).setA(.1).toRgbString();
+	const colorBorderSlot = colorBgSlot;
 	const colorBorderInput = new FastColor(colorFillTertiary).setA(.1).toRgbString();
 	const switchCheckedBg = new FastColor(colorPrimary).setA(.08).toRgbString();
 	const switchCheckedHoverBg = new FastColor(colorPrimary).setA(.1).toRgbString();
 	const switchUncheckedHoverBg = new FastColor(colorFillTertiary).setA(.04).toRgbString();
 	const colorBgActionsDisabled = new FastColor(colorPrimary).setA(.45).toRgbString();
 	return {
+		colorBgSlot,
+		colorBgSkill,
+		colorBgSkillHover,
+		colorTextSlot,
+		colorTextSlotPlaceholder,
+		colorBorderSlotHover,
+		colorBorderSlot,
 		colorBorderInput,
 		switchCheckedBg,
 		switchCheckedHoverBg,
@@ -105,7 +120,8 @@ var style_default = genStyleHooks("Sender", (token) => {
 	return [
 		genSenderStyle(senderToken),
 		genSenderHeaderStyle(senderToken),
-		genSenderSwitchStyle(senderToken)
+		genSenderSwitchStyle(senderToken),
+		genSlotTextAreaStyle(senderToken)
 	];
 }, prepareComponentToken);
 //#endregion

package/dist/sender/style/slot-textarea.d.ts

@@ -0,0 +1,4 @@
+import { SenderToken } from '.';
+import { GenerateStyle } from '../../theme/interface';
+declare const genSlotTextAreaStyle: GenerateStyle<SenderToken>;
+export default genSlotTextAreaStyle;

package/dist/sender/style/slot-textarea.js

@@ -0,0 +1,187 @@
+import { unit } from "@antdv-next/cssinjs";
+//#region components/sender/style/slot-textarea.ts
+var genSlotTextAreaStyle = (token) => {
+	const { componentCls, antCls, calc } = token;
+	const slotCls = `${componentCls}-slot`;
+	const antInputCls = `${antCls}-input`;
+	const antDropdownCls = `${antCls}-dropdown-trigger`;
+	const slotInputCls = `${componentCls}-slot-input`;
+	const slotSelectCls = `${componentCls}-slot-select`;
+	const slotTagCls = `${componentCls}-slot-tag`;
+	const slotContentCls = `${componentCls}-slot-content`;
+	const skillCls = `${componentCls}-skill`;
+	return { [componentCls]: {
+		[`${componentCls}-input-slot`]: {
+			outline: "none",
+			cursor: "text",
+			whiteSpace: "pre-wrap",
+			width: "100%",
+			caretColor: token.colorPrimary,
+			fontSize: token.fontSize,
+			lineHeight: token.lineHeight,
+			[`&:empty::before`]: {
+				content: "attr(data-placeholder)",
+				color: token.colorTextPlaceholder
+			}
+		},
+		[`${slotCls}:not(${slotContentCls})`]: {
+			display: "inline-block",
+			verticalAlign: "middle",
+			alignItems: "center",
+			marginBlock: 1,
+			height: calc(token.fontSize).mul(token.lineHeight).add(2).equal(),
+			wordBreak: "break-all",
+			marginInline: token.marginXXS
+		},
+		[`${antInputCls}${slotInputCls}`]: {
+			height: "100%",
+			background: token.colorBgSlot,
+			outline: "none",
+			color: token.colorTextSlot,
+			borderRadius: token.borderRadius,
+			paddingInline: token.paddingXXS,
+			fontSize: "inherit",
+			lineHeight: "inherit",
+			position: "relative",
+			[`&::placeholder`]: {
+				color: token.colorTextSlotPlaceholder,
+				fontSize: "inherit",
+				lineHeight: "inherit"
+			}
+		},
+		[slotSelectCls]: {
+			fontSize: token.fontSize,
+			lineHeight: token.lineHeight,
+			paddingInline: token.paddingXXS,
+			transition: `border-color ${token.motionDurationMid}`,
+			position: "relative",
+			display: "inline-flex",
+			alignItems: "center",
+			cursor: "pointer",
+			background: token.colorBgSlot,
+			height: "100%",
+			boxSizing: "border-box",
+			borderRadius: token.borderRadius,
+			color: token.colorTextSlot,
+			border: `1px solid ${token.colorBorderSlot}`,
+			[`&.placeholder`]: { color: token.colorTextSlotPlaceholder },
+			[`&${antDropdownCls}-open`]: { borderColor: token.colorBorderSlotHover }
+		},
+		[`${slotSelectCls}-value`]: {
+			flex: 1,
+			fontSize: token.fontSize,
+			lineHeight: token.lineHeight,
+			[`&:empty::before`]: { content: "attr(data-placeholder)" }
+		},
+		[`${slotSelectCls}-arrow`]: {
+			marginInlineStart: token.marginXXS,
+			fontSize: token.fontSize,
+			lineHeight: token.lineHeight,
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center"
+		},
+		[slotTagCls]: {
+			background: token.colorBgSlot,
+			border: `1px solid ${token.colorBorderSlot}`,
+			outline: "none",
+			color: token.colorTextSlot,
+			borderRadius: token.borderRadius,
+			padding: `0 ${unit(token.paddingXXS)}`,
+			fontSize: token.fontSize,
+			lineHeight: token.lineHeight,
+			height: "100%",
+			boxSizing: "border-box",
+			position: "relative",
+			cursor: "default"
+		},
+		[slotContentCls]: {
+			height: calc(token.fontSize).mul(token.lineHeight).add(2).equal(),
+			caretColor: token.colorPrimary,
+			background: token.colorBgSlot,
+			outline: "none",
+			color: token.colorTextSlot,
+			borderRadius: token.borderRadius,
+			paddingInline: token.paddingXXS,
+			boxSizing: "border-box",
+			verticalAlign: "middle",
+			fontSize: token.fontSize,
+			marginBlock: 1,
+			lineHeight: token.lineHeight,
+			display: "inline-block",
+			position: "relative",
+			cursor: "text",
+			[`&:empty`]: {
+				width: "fit-content",
+				[`&::after`]: {
+					display: "inline-block",
+					height: "inherit",
+					content: "attr(data-placeholder)",
+					color: token.colorTextSlotPlaceholder
+				}
+			}
+		},
+		[`${slotCls}-no-width`]: {
+			userSelect: "none",
+			width: "3px",
+			display: "inline-block",
+			lineHeight: "inherit"
+		},
+		[skillCls]: {
+			display: "inline-block",
+			verticalAlign: "baseline",
+			alignItems: "center",
+			marginBlock: 1,
+			height: calc(token.fontSize).mul(token.lineHeight).add(2).equal(),
+			wordBreak: "break-all",
+			paddingInlineEnd: 0,
+			paddingInlineStart: 0,
+			marginInlineEnd: 0,
+			marginInlineStart: -1,
+			[`&${skillCls}-empty`]: { [`&::after`]: {
+				display: "inline-block",
+				pointerEvents: "none",
+				height: "inherit",
+				content: "attr(data-placeholder)",
+				color: token.colorTextPlaceholder
+			} }
+		},
+		[`${skillCls}-wrapper`]: {
+			height: "100%",
+			display: "inline-flex"
+		},
+		[`${skillCls}-tag`]: {
+			paddingInline: token.paddingXS,
+			height: "100%",
+			backgroundColor: token.colorBgSkill,
+			borderRadius: token.borderRadius,
+			color: token.colorPrimary,
+			alignItems: "center",
+			fontWeight: 500,
+			display: "inline-flex",
+			cursor: "pointer",
+			gap: token.marginXXS,
+			transition: `background-color ${token.motionDurationMid}`,
+			[`&:hover`]: {
+				backgroundColor: token.colorBgSkillHover,
+				[`${skillCls}-close:not(${skillCls}-close-disabled)`]: { color: token.colorPrimaryHover }
+			}
+		},
+		[`${skillCls}-close`]: {
+			fontSize: token.fontSizeSM,
+			display: "inline-flex",
+			transition: `color ${token.motionDurationMid}`,
+			color: token.colorPrimary
+		},
+		[`${skillCls}-close-disabled`]: {
+			cursor: "not-allowed",
+			color: token.colorTextDisabled
+		},
+		[`${skillCls}-holder`]: {
+			width: token.marginXS,
+			height: "100%"
+		}
+	} };
+};
+//#endregion
+export { genSlotTextAreaStyle as default };

package/dist/sources/Sources.js

@@ -12,7 +12,7 @@ var hasRenderableNode = (node) => {
 	return node !== null && node !== void 0 && node !== false;
 };
 var XSources = /* @__PURE__ */ defineComponent({
-	name: "XSources",
+	name: "AxSources",
 	inheritAttrs: false,
 	props: {
 		prefixCls: {

package/dist/suggestion/Suggestion.js

@@ -10,7 +10,7 @@ var hasRenderableNode = (node) => {
 	return node !== null && node !== void 0 && node !== false;
 };
 var XSuggestion = /* @__PURE__ */ defineComponent({
-	name: "XSuggestion",
+	name: "AxSuggestion",
 	inheritAttrs: false,
 	props: {
 		prefixCls: {

package/dist/suggestion/useActive.js

@@ -37,20 +37,24 @@ function useActive(items, open, rtl, onCancel) {
 			case "ArrowDown":
 				offsetRow(1);
 				event.preventDefault();
+				event.stopPropagation();
 				break;
 			case "ArrowUp":
 				offsetRow(-1);
 				event.preventDefault();
+				event.stopPropagation();
 				break;
 			case "ArrowRight":
 				if (rtl.value) offsetPrev();
 				else offsetNext();
 				event.preventDefault();
+				event.stopPropagation();
 				break;
 			case "ArrowLeft":
 				if (rtl.value) offsetNext();
 				else offsetPrev();
 				event.preventDefault();
+				event.stopPropagation();
 				break;
 			case "Enter":
 				event.preventDefault();

package/dist/think/Think.js

@@ -6,7 +6,7 @@ import { useConfig } from "antdv-next/dist/config-provider/context";
 import { LoadingOutlined, RightOutlined } from "@antdv-next/icons";
 //#region components/think/Think.tsx
 var XThink = /* @__PURE__ */ defineComponent({
-	name: "XThink",
+	name: "AxThink",
 	inheritAttrs: false,
 	props: {
 		prefixCls: {

package/dist/thought-chain/Item.js

@@ -8,7 +8,7 @@ function hasRenderableNode(node) {
 	return node !== null && node !== void 0 && node !== false;
 }
 var XThoughtChainItem = /* @__PURE__ */ defineComponent({
-	name: "XThoughtChainItem",
+	name: "AxThoughtChainItem",
 	props: {
 		prefixCls: {
 			type: String,

package/dist/thought-chain/ThoughtChain.js

@@ -5,7 +5,7 @@ import { computed, createVNode, defineComponent, mergeProps, ref, useAttrs, watc
 import { useConfig } from "antdv-next/dist/config-provider/context";
 //#region components/thought-chain/ThoughtChain.tsx
 var XThoughtChain = /* @__PURE__ */ defineComponent({
-	name: "XThoughtChain",
+	name: "AxThoughtChain",
 	inheritAttrs: false,
 	props: {
 		prefixCls: {

package/dist/welcome/index.js

@@ -14,7 +14,7 @@ function hasContent(value) {
 	return Array.isArray(value) ? value.length > 0 : value !== null && value !== void 0;
 }
 var XWelcome = /* @__PURE__ */ defineComponent({
-	name: "XWelcome",
+	name: "AxWelcome",
 	inheritAttrs: false,
 	props: {
 		prefixCls: {

package/dist/x-provider/index.js

@@ -4,7 +4,7 @@ import { computed, createVNode, defineComponent, mergeProps, provide, useAttrs }
 import { ConfigProvider } from "antdv-next";
 //#region components/x-provider/index.tsx
 var XProvider = /* @__PURE__ */ defineComponent({
-	name: "XProvider",
+	name: "AxProvider",
 	inheritAttrs: false,
 	props: {
 		attachments: {

package/global.d.ts

@@ -1,24 +1,67 @@
+type ActionsComponent = (typeof import("./dist/actions"))["default"];
+type ActionsAudioComponent = (typeof import("./dist/actions"))["ActionsAudio"];
+type ActionsCopyComponent = (typeof import("./dist/actions"))["ActionsCopy"];
+type ActionsFeedbackComponent =
+  (typeof import("./dist/actions"))["ActionsFeedback"];
+type ActionsItemComponent = (typeof import("./dist/actions"))["ActionsItem"];
+type AttachmentsComponent = (typeof import("./dist/attachments"))["default"];
+type BubbleComponent = (typeof import("./dist/bubble"))["default"];
+type BubbleListComponent = (typeof import("./dist/bubble"))["BubbleList"];
+type BubbleSystemComponent = (typeof import("./dist/bubble"))["BubbleSystem"];
+type BubbleDividerComponent = (typeof import("./dist/bubble"))["BubbleDivider"];
+type CodeHighlighterComponent =
+  (typeof import("./dist/code-highlighter"))["default"];
+type ConversationsComponent =
+  (typeof import("./dist/conversations"))["default"];
+type ConversationsCreationComponent =
+  (typeof import("./dist/conversations"))["ConversationsCreation"];
+type FileCardComponent = (typeof import("./dist/file-card"))["default"];
+type FileCardListComponent =
+  (typeof import("./dist/file-card"))["FileCardList"];
+type MermaidComponent = (typeof import("./dist/mermaid"))["default"];
+type PromptsComponent = (typeof import("./dist/prompts"))["default"];
+type SenderComponent = (typeof import("./dist/sender"))["default"];
+type SenderHeaderComponent = (typeof import("./dist/sender"))["SenderHeader"];
+type SenderSwitchComponent = (typeof import("./dist/sender"))["SenderSwitch"];
+type SourcesComponent = (typeof import("./dist/sources"))["default"];
+type SuggestionComponent = (typeof import("./dist/suggestion"))["default"];
+type ThinkComponent = (typeof import("./dist/think"))["default"];
+type ThoughtChainComponent = (typeof import("./dist/thought-chain"))["default"];
+type ThoughtChainItemComponent =
+  (typeof import("./dist/thought-chain"))["ThoughtChainItem"];
+type WelcomeComponent = (typeof import("./dist/welcome"))["default"];
+type XProviderComponent = (typeof import("./dist/x-provider"))["default"];
+
 export {};
 
 declare module "vue" {
   export interface GlobalComponents {
-    AActions: (typeof import("./dist/actions"))["default"];
-    AActionsAudio: (typeof import("./dist/actions"))["ActionsAudio"];
-    AActionsCopy: (typeof import("./dist/actions"))["ActionsCopy"];
-    AActionsFeedback: (typeof import("./dist/actions"))["ActionsFeedback"];
-    AActionsItem: (typeof import("./dist/actions"))["ActionsItem"];
-    ABubble: (typeof import("./dist/bubble"))["default"];
-    ABubbleList: (typeof import("./dist/bubble"))["BubbleList"];
-    ABubbleSystem: (typeof import("./dist/bubble"))["BubbleSystem"];
-    ABubbleDivider: (typeof import("./dist/bubble"))["BubbleDivider"];
-    XActions: (typeof import("./dist/actions"))["default"];
-    XActionsAudio: (typeof import("./dist/actions"))["ActionsAudio"];
-    XActionsCopy: (typeof import("./dist/actions"))["ActionsCopy"];
-    XActionsFeedback: (typeof import("./dist/actions"))["ActionsFeedback"];
-    XActionsItem: (typeof import("./dist/actions"))["ActionsItem"];
-    XBubble: (typeof import("./dist/bubble"))["default"];
-    XBubbleList: (typeof import("./dist/bubble"))["BubbleList"];
-    XBubbleSystem: (typeof import("./dist/bubble"))["BubbleSystem"];
-    XBubbleDivider: (typeof import("./dist/bubble"))["BubbleDivider"];
+    AxActions: ActionsComponent;
+    AxActionsAudio: ActionsAudioComponent;
+    AxActionsCopy: ActionsCopyComponent;
+    AxActionsFeedback: ActionsFeedbackComponent;
+    AxActionsItem: ActionsItemComponent;
+    AxAttachments: AttachmentsComponent;
+    AxBubble: BubbleComponent;
+    AxBubbleDivider: BubbleDividerComponent;
+    AxBubbleList: BubbleListComponent;
+    AxBubbleSystem: BubbleSystemComponent;
+    AxCodeHighlighter: CodeHighlighterComponent;
+    AxConversations: ConversationsComponent;
+    AxConversationsCreation: ConversationsCreationComponent;
+    AxFileCard: FileCardComponent;
+    AxFileCardList: FileCardListComponent;
+    AxMermaid: MermaidComponent;
+    AxPrompts: PromptsComponent;
+    AxProvider: XProviderComponent;
+    AxSender: SenderComponent;
+    AxSenderHeader: SenderHeaderComponent;
+    AxSenderSwitch: SenderSwitchComponent;
+    AxSources: SourcesComponent;
+    AxSuggestion: SuggestionComponent;
+    AxThink: ThinkComponent;
+    AxThoughtChain: ThoughtChainComponent;
+    AxThoughtChainItem: ThoughtChainItemComponent;
+    AxWelcome: WelcomeComponent;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antdv-next/x",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "files": [
     "dist",
     "global.d.ts"
@@ -40,7 +40,7 @@
     "@antdv-next/icons": "^1.0.4",
     "@v-c/util": "^1.0.19",
     "@vueuse/core": "^14.2.1",
-    "antdv-next": "^1.1.2",
+    "antdv-next": "^1.1.9-beta.1",
     "dayjs": "^1.11.19",
     "mermaid": "^11.12.1",
     "shiki": "^3.13.0",