microboard-ui-temp 0.0.3

package/src/entities/AIInput/AIInput.tsx

@@ -0,0 +1,427 @@
+import {
+	AiChatMsg,
+	GenerateAudioRequest,
+	GenerateImageRequest,
+	UserRequest,
+} from "App/Connection";
+import { SessionStorage } from "App/SessionStorage";
+import { useAccount } from "App/useAccount";
+import { useAppSubscription } from "App/useBoardSubscription";
+import clsx from "clsx";
+import {
+	getContextItems,
+	getIdeaFromSelection,
+	PossibleParentNode,
+	useAIContext,
+} from "entities/AIInput";
+import { useAppContext } from "features/AppContext";
+import { USER_PLAN_MODAL_ID } from "features/UserPlan";
+import React, { useEffect, useRef, useState, type SyntheticEvent } from "react";
+import { useTranslation } from "react-i18next";
+import { getCorrectEnding } from "shared/lib/getCorrectEnding";
+import { useForceUpdate } from "shared/lib/useForceUpdate";
+import { Icon } from "shared/ui-lib/Icon";
+import { Tooltip } from "shared/ui-lib/Tooltip";
+import { UiButton } from "shared/ui-lib/UiButton";
+import { useUiModalContext } from "shared/ui-lib/UiModal";
+import { UiPanel } from "shared/ui-lib/UiPanel";
+import { AIDropdown } from "./AIDropdown";
+import styles from "./AIInput.module.css";
+
+const sessionStorage = new SessionStorage();
+
+export const AIInput = () => {
+	const { t } = useTranslation();
+	const { app, board } = useAppContext();
+	const [inputValue, setInputValue] = useState("");
+	const disabledRef = useRef<boolean>(!!board.aiGeneratingOnItem);
+	const inputRef = useRef<HTMLTextAreaElement | null>(null);
+	const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+	const forceUpdate = useForceUpdate();
+	const selectedItemsCount = board.selection.items.list().length;
+	const account = useAccount();
+	const { openModal } = useUiModalContext();
+	const [isShaking, setIsShaking] = useState(false);
+	const {
+		stopStream,
+		responseNodeId,
+		model,
+		createNodesWithConnectors,
+		quotedText,
+		setQuotedText,
+		tryToSendGenerationRequest,
+	} = useAIContext();
+
+	const ideaFromSelection = getIdeaFromSelection(
+		board.selection.items.list(),
+	);
+	const isEditable = board.getInterfaceType() !== "view";
+	const isSendBtnDisabled =
+		!inputValue.trim() && !ideaFromSelection && !board.aiGeneratingOnItem;
+
+	const isPhoneScreenCheck = (): boolean =>
+		matchMedia("screen and (max-width: 640px)").matches;
+	const [isPhoneScreen, setIsPhoneScreen] = useState(isPhoneScreenCheck);
+	useEffect(() => {
+		const setScreen = (): void => {
+			setIsPhoneScreen(isPhoneScreenCheck());
+		};
+
+		window.addEventListener("resize", setScreen);
+
+		const lastRequest = sessionStorage.getLastAIRequest();
+		if (lastRequest) {
+			setInputValue(lastRequest);
+		}
+		return () => {
+			window.removeEventListener("resize", setScreen);
+		};
+	}, []);
+
+	useEffect(() => {
+		if (disabledRef.current && !board.aiGeneratingOnItem) {
+			inputRef.current?.focus();
+		}
+		disabledRef.current = !!board.aiGeneratingOnItem;
+	}, [board.aiGeneratingOnItem]);
+
+	useAppSubscription({
+		subjects: ["selectionItems", "selectionItem", "selection"],
+		observer: forceUpdate,
+	});
+
+	const handleInputChange = (
+		event: React.ChangeEvent<HTMLTextAreaElement>,
+	): void => {
+		setInputValue(event.target.value);
+		sessionStorage.setLastAIRequest(event.target.value);
+		event.target.style.height = "auto";
+		event.target.style.height = `${Math.min(event.target.scrollHeight, 120)}px`;
+	};
+
+	const handleSendClick = async (ev: SyntheticEvent): Promise<void> => {
+		ev.stopPropagation();
+		if (!inputValue.trim() && !ideaFromSelection) {
+			return;
+		}
+
+		const fallback = () => {
+			setIsShaking(true);
+			setTimeout(() => {
+				setIsShaking(false);
+				openModal(USER_PLAN_MODAL_ID);
+			}, 1000);
+		};
+
+		await tryToSendGenerationRequest(fallback, sendInputData);
+	};
+
+	const handleInputClick = (
+		event: React.MouseEvent<HTMLTextAreaElement>,
+	): void => {
+		event.stopPropagation();
+		if (board.selection.getContext() === "EditTextUnderPointer") {
+			board.selection.setContext("EditUnderPointer");
+		}
+		if (isDropdownOpen) {
+			setIsDropdownOpen(false);
+		}
+	};
+
+	const handleKeyDown = async (
+		event: React.KeyboardEvent<HTMLTextAreaElement>,
+	): Promise<void> => {
+		event.stopPropagation();
+		if (event.key === "Enter" && !event.shiftKey) {
+			event.preventDefault();
+			await handleSendClick(event);
+		}
+	};
+
+	const sendInputData = async (): Promise<void> => {
+		const connection = app.getConnection();
+		if (!connection) {
+			console.error("Ws no open");
+			return;
+		}
+
+		if (!inputValue.trim().length && !ideaFromSelection) {
+			return;
+		}
+
+		const nodeWithParents =
+			board.selection.getMostNestedAINodeWithParents();
+
+		const parentNodes = nodeWithParents
+			? [nodeWithParents.node, ...nodeWithParents.parents]
+			: [];
+
+		const selectedItems = board.selection.items.list();
+
+		const { boardContext, contextItems } = getContextItems(
+			[
+				...selectedItems,
+				...parentNodes.filter(node => node.getIsUserRequest()),
+			],
+			parentNodes.filter(node => !node.getIsUserRequest()),
+			inputValue.trim().length
+				? undefined
+				: ideaFromSelection?.item.getId(),
+		);
+
+		if (quotedText) {
+			boardContext.unshift(quotedText);
+		}
+
+		let idea = inputValue;
+		let itemToContinueThread: PossibleParentNode | undefined =
+			nodeWithParents?.node;
+		let isIdeaFromSelection = false;
+		if (idea.trim().length === 0) {
+			if (!ideaFromSelection) {
+				return;
+			}
+			idea = ideaFromSelection.idea;
+			isIdeaFromSelection = true;
+			if (!itemToContinueThread) {
+				itemToContinueThread = ideaFromSelection.item;
+			}
+		}
+
+		const { responseAdded, requestAdded } = createNodesWithConnectors(
+			idea,
+			itemToContinueThread,
+			contextItems.map(item => item.getId()),
+			!isIdeaFromSelection,
+		);
+
+		board.aiGeneratingOnItem = responseAdded.getId();
+		board.camera.subscribeToItem(responseAdded);
+
+		if (model === "flux-schnell" || model === "flux-pro") {
+			const options = {
+				model: model === "flux-pro" ? "flux-pro" : "flux-schnell",
+				aspect_ratio: "1:1",
+			};
+
+			const message: AiChatMsg<GenerateImageRequest> = {
+				type: "AiChat",
+				boardId: board.getBoardId(),
+				event: {
+					method: "GenerateImage",
+					prompt: idea,
+					itemId: responseAdded.getId(),
+					options,
+				},
+			};
+
+			connection.send(message);
+		} else if (model === "tts-1-hd") {
+			const message: AiChatMsg<GenerateAudioRequest> = {
+				type: "AiChat",
+				boardId: board.getBoardId(),
+				event: {
+					method: "GenerateAudio",
+					text: idea,
+					model: "tts-1-hd",
+				},
+			};
+			connection.send(message);
+		} else {
+			const contextRequest = nodeWithParents?.lastAssistantMessageId
+				? {
+						range: 5,
+						messageId: nodeWithParents.lastAssistantMessageId,
+					}
+				: undefined;
+
+			const message: AiChatMsg<UserRequest> = {
+				type: "AiChat",
+				boardId: board.getBoardId(),
+				event: {
+					method: "UserRequest",
+					context: [],
+					boardContext,
+					idea: quotedText ? idea + " " + quotedText : idea,
+					model,
+					itemId: responseAdded.getId(),
+					requestItemId: requestAdded.getId(),
+					contextRequest,
+				},
+			};
+
+			connection.send(message);
+		}
+
+		setInputValue("");
+
+		if (inputRef.current) {
+			inputRef.current.style.height = "auto";
+		}
+
+		const itemsInView = board.items.getInView();
+		const viewport = board.camera.getMbr();
+		const isAiNodesInView = itemsInView.some(item => {
+			const itemMbr = item.getMbr();
+			return (
+				item.getId() === responseAdded.getId() &&
+				itemMbr.right < viewport.right &&
+				itemMbr.left > viewport.left
+			);
+		});
+
+		if (!isAiNodesInView) {
+			const mbrToFit = responseAdded
+				.getMbr()
+				.combine(requestAdded.getMbr());
+			board.camera.zoomToFit(mbrToFit, (600 / mbrToFit.getWidth()) * 30);
+		}
+	};
+
+	const handleStopClick = async (): Promise<void> => {
+		const boardId = app.getBoard().getBoardId();
+
+		if (responseNodeId) {
+			await stopStream(boardId, responseNodeId, account);
+			board.aiGeneratingOnItem = undefined;
+		}
+	};
+
+	const getInputPlaceholder = (): string => {
+		if (!!board.aiGeneratingOnItem) {
+			return t("AIInput.disableWhenGenerating");
+		}
+
+		if (isPhoneScreen) {
+			return t("AIInput.selectMobileContext");
+		}
+
+		return t("AIInput.selectContext");
+	};
+
+	const boardId = board.getBoardId();
+	if (!boardId || boardId === "blank") {
+		return null;
+	}
+
+	return (
+		<div className={clsx(styles.inputContainer, isShaking && styles.shake)}>
+			{!isEditable && (
+				<Tooltip
+					tooltip={t("AIInput.disable")}
+					tooltipPosition="top"
+					tooltipAlign="left"
+					className={styles.tooltip}
+				/>
+			)}
+			<div
+				className={clsx(styles.contentWrapper, {
+					[styles.disabled]: !!board.aiGeneratingOnItem,
+				})}
+			>
+				<AIDropdown
+					board={board}
+					isPhoneScreen={isPhoneScreen}
+					account={account}
+					isDropdownOpen={isDropdownOpen}
+					setIsDropdownOpen={setIsDropdownOpen}
+				/>
+				<UiPanel className={clsx(styles.inputWrapper, styles.panel)}>
+					{quotedText && (
+						<div className={styles.quoteContainer}>
+							<Icon
+								width={16}
+								height={14}
+								iconName={"quotedText"}
+							/>
+							<p className={styles.quoteText}>{quotedText}</p>
+							<button
+								style={{
+									color: "rgba(15, 19, 36, 0.6)",
+									cursor: "pointer",
+								}}
+								onClick={() => setQuotedText(undefined)}
+							>
+								<Icon
+									width={20}
+									height={20}
+									iconName={"Close"}
+								/>
+							</button>
+						</div>
+					)}
+					<div className={styles.inputWithSelection}>
+						<textarea
+							value={inputValue}
+							onClick={event => handleInputClick(event)}
+							onPaste={event => event.stopPropagation()}
+							onKeyDown={event => handleKeyDown(event)}
+							onFocus={event => event.currentTarget.select()}
+							onChange={event => handleInputChange(event)}
+							placeholder={getInputPlaceholder()}
+							className={styles.aiInput}
+							ref={inputRef}
+							rows={1}
+							disabled={!!board.aiGeneratingOnItem}
+						/>
+						<div
+							className={clsx(
+								styles.selectionInfo,
+								selectedItemsCount && styles.activeSelection,
+							)}
+						>
+							<Tooltip
+								id="selection-info-tooltip"
+								tooltip={t(
+									`AIInput.selectedItems.${getCorrectEnding(selectedItemsCount)}`,
+									{ count: selectedItemsCount },
+								)}
+								className={styles.itemsCountTooltip}
+								tooltipPosition="top"
+							/>
+							{selectedItemsCount}
+						</div>
+					</div>
+				</UiPanel>
+				<UiButton
+					id={"send-ai-input-data"}
+					disabled={isSendBtnDisabled}
+					tooltip={
+						isSendBtnDisabled
+							? t("AIInput.sendBtnTooltip")
+							: board.aiGeneratingOnItem
+								? t("contextPanel.ai.stop")
+								: undefined
+					}
+					tooltipPosition={"top"}
+					className={clsx(styles.sendButton, styles.panel)}
+					onClick={
+						!!board.aiGeneratingOnItem
+							? handleStopClick
+							: handleSendClick
+					}
+					variant="secondary"
+					rounded="full"
+				>
+					<Icon
+						width={20}
+						height={20}
+						iconName={
+							isSendBtnDisabled
+								? "AIChatArrowDisabled"
+								: !!board.aiGeneratingOnItem
+									? "StopAiGeneration"
+									: "AIChatSendArrow"
+						}
+						className={clsx(styles.icon, {
+							[styles.activeIcon]:
+								inputValue.trim() ||
+								ideaFromSelection ||
+								!!board.aiGeneratingOnItem,
+						})}
+					/>
+				</UiButton>
+			</div>
+		</div>
+	);
+};

package/src/entities/AIInput/StarIcon.tsx

@@ -0,0 +1,201 @@
+import React from "react";
+
+export const StarIcon: React.FC<{
+	width?: number;
+	height?: number;
+	className?: string;
+}> = ({ width = 24, height = 24, className }) => (
+	<svg
+		className={className}
+		width={width}
+		height={height}
+		viewBox="0 0 24 24"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<rect width="24" height="24" fill="none" />
+		<g id="main screen">
+			<path
+				d="M-116411 -4926C-116411 -4927.1 -116410 -4928 -116409 -4928H16473C16474.1 -4928 16475 -4927.1 16475 -4926V27968C16475 27969.1 16474.1 27970 16473 27970H-116409C-116410 27970 -116411 27969.1 -116411 27968V-4926Z"
+				fill="none"
+			/>
+			<path
+				d="M-116409 -4927H16473V-4929H-116409V-4927ZM16474 -4926V27968H16476V-4926H16474ZM16473 27969H-116409V27971H16473V27969ZM-116410 27968V-4926H-116412V27968H-116410ZM-116409 27969C-116410 27969 -116410 27968.6 -116410 27968H-116412C-116412 27969.7 -116411 27971 -116409 27971V27969ZM16474 27968C16474 27968.6 16473.5 27969 16473 27969V27971C16474.7 27971 16476 27969.7 16476 27968H16474ZM16473 -4927C16473.5 -4927 16474 -4926.55 16474 -4926H16476C16476 -4927.65 16474.7 -4929 16473 -4929V-4927ZM-116409 -4929C-116411 -4929 -116412 -4927.66 -116412 -4926H-116410C-116410 -4926.55 -116410 -4927 -116409 -4927V-4929Z"
+				fill="none"
+			/>
+			<g id="Chatgpt">
+				<path
+					d="M-1231 -2587C-1231 -2588.1 -1230.1 -2589 -1229 -2589H4254C4255.1 -2589 4256 -2588.1 4256 -2587V7118C4256 7119.1 4255.1 7120 4254 7120H-1229C-1230.1 7120 -1231 7119.1 -1231 7118V-2587Z"
+					fill="none"
+				/>
+				<path
+					d="M-1229 -2588H4254V-2590H-1229V-2588ZM4255 -2587V7118H4257V-2587H4255ZM4254 7119H-1229V7121H4254V7119ZM-1230 7118V-2587H-1232V7118H-1230ZM-1229 7119C-1229.55 7119 -1230 7118.55 -1230 7118H-1232C-1232 7119.66 -1230.66 7121 -1229 7121V7119ZM4255 7118C4255 7118.55 4254.55 7119 4254 7119V7121C4255.66 7121 4257 7119.66 4257 7118H4255ZM4254 -2588C4254.55 -2588 4255 -2587.55 4255 -2587H4257C4257 -2588.66 4255.66 -2590 4254 -2590V-2588ZM-1229 -2590C-1230.66 -2590 -1232 -2588.66 -1232 -2587H-1230C-1230 -2587.55 -1229.55 -2588 -1229 -2588V-2590Z"
+					fill="none"
+				/>
+				<g id="main screen_2" clipPath="url(#clip0_2_12152)">
+					<rect
+						width="1280"
+						height="1080"
+						transform="translate(-1083 -24)"
+						fill="none"
+					/>
+					<g id="Frame 22070" filter="url(#filter0_dd_2_12152)">
+						<rect
+							x="-156"
+							y="-12"
+							width="341"
+							height="48"
+							rx="12"
+							fill="none"
+						/>
+						<rect
+							x="-156.5"
+							y="-12.5"
+							width="342"
+							height="49"
+							rx="12.5"
+							stroke="none"
+						/>
+						<g id="Item">
+							<path
+								d="M-12 -12H36V16.8C36 23.5206 36 26.8809 34.6921 29.4479C33.5416 31.7058 31.7058 33.5416 29.4479 34.6921C26.8809 36 23.5206 36 16.8 36H7.2C0.47937 36 -2.88095 36 -5.44789 34.6921C-7.70583 33.5416 -9.5416 31.7058 -10.6921 29.4479C-12 26.8809 -12 23.5206 -12 16.8V-12Z"
+								fill="none"
+							/>
+							<g id="icon" clipPath="url(#clip1_2_12152)">
+								<g id="Vector">
+									<path
+										fillRule="evenodd"
+										clipRule="evenodd"
+										d="M15.6776 6.30758C15.7733 5.93544 16.098 5.65002 16.4984 5.65002C16.8989 5.65002 17.2235 5.93543 17.3193 6.30759C17.8516 8.38444 18.286 9.53701 19.0174 10.3247C19.745 11.1083 20.8063 11.5729 22.7316 12.1456C23.1103 12.2586 23.3484 12.6179 23.3484 13C23.3484 13.3822 23.1106 13.7414 22.7319 13.8544C20.8065 14.4271 19.7452 14.8916 19.0177 15.675C18.2864 16.4626 17.8521 17.6148 17.3194 19.6922C17.2236 20.0643 16.8989 20.35 16.4984 20.35C16.098 20.35 15.7733 20.0646 15.6776 19.6925C15.1448 17.615 14.7104 16.4623 13.9791 15.6746C13.2516 14.891 12.1906 14.4266 10.2653 13.8545C9.88663 13.7415 9.64844 13.3822 9.64844 13C9.64844 12.6179 9.88624 12.2587 10.2649 12.1457C12.1903 11.573 13.2519 11.1082 13.9796 10.3246C14.7109 9.53695 15.1453 8.38439 15.6776 6.30758ZM16.4985 9.40395C16.1443 10.2838 15.7355 10.9841 15.198 11.563C14.6438 12.1597 13.9685 12.6104 13.1143 13.0012C13.9688 13.3922 14.6442 13.8432 15.1983 14.4399C15.7357 15.0187 16.1444 15.7188 16.4984 16.5982C16.8525 15.7183 17.2613 15.018 17.7988 14.4392C18.353 13.8425 19.0284 13.3917 19.8826 13.001C19.028 12.6099 18.3526 12.1589 17.7985 11.5622C17.2611 10.9835 16.8525 10.2834 16.4985 9.40395Z"
+										fill="url(#paint0_linear_2_12152)"
+									/>
+									<path
+										fillRule="evenodd"
+										clipRule="evenodd"
+										d="M6.64858 1.34661C6.74531 0.958714 7.07714 0.650024 7.49844 0.650024C7.9186 0.650024 8.25254 0.957556 8.34845 1.34727C8.69242 2.73197 8.95756 3.45802 9.39627 3.94549C9.82963 4.42701 10.4706 4.71718 11.713 5.09848C12.1083 5.22019 12.3484 5.60277 12.3484 6.00002C12.3484 6.39727 12.1087 6.77977 11.7133 6.90148C10.4709 7.28274 9.82957 7.573 9.39621 8.05453C8.95745 8.54206 8.6923 9.26821 8.34837 10.6531C8.25255 11.0435 7.91745 11.35 7.49844 11.35C7.07852 11.35 6.74541 11.0418 6.64858 10.6534C6.30458 9.26851 6.03935 8.54207 5.6006 8.05455C5.16725 7.57304 4.52628 7.28287 3.28389 6.90157C2.88853 6.77986 2.64844 6.39728 2.64844 6.00002C2.64844 5.60278 2.88822 5.22028 3.2836 5.09857C4.52557 4.71729 5.16658 4.42731 5.59995 3.9459C6.03872 3.45849 6.30416 2.73207 6.64858 1.34661ZM5.94791 5.99895C6.29954 6.21506 6.6026 6.46132 6.8677 6.75587C7.11155 7.02681 7.31763 7.33236 7.49927 7.68175C7.68072 7.33238 7.8867 7.02683 8.13056 6.75588C8.39572 6.46125 8.69897 6.21496 9.05089 5.99882C8.69935 5.78274 8.39635 5.53653 8.13131 5.24204C7.88735 4.97097 7.6812 4.66528 7.4995 4.3157C7.31781 4.66527 7.11167 4.97096 6.86771 5.24202C6.60261 5.53658 6.29954 5.78284 5.94791 5.99895Z"
+										fill="url(#paint1_linear_2_12152)"
+									/>
+									<path
+										fillRule="evenodd"
+										clipRule="evenodd"
+										d="M5.12573 13.314C5.23434 12.9219 5.59092 12.65 5.99844 12.65C6.40595 12.65 6.76254 12.9219 6.87115 13.314C7.25322 14.6982 7.55839 15.4373 8.05969 15.9386C8.561 16.4399 9.29988 16.745 10.6843 17.1271C11.0743 17.2357 11.3484 17.5919 11.3484 18C11.3484 18.4075 11.0767 18.7642 10.6846 18.8728C9.30012 19.2549 8.56086 19.5599 8.05957 20.0611C7.5583 20.5622 7.25324 21.301 6.87125 22.6857C6.76264 23.0778 6.40596 23.35 5.99844 23.35C5.59092 23.35 5.23434 23.0782 5.12573 22.6861C4.74366 21.3019 4.4385 20.563 3.93721 20.0619C3.43587 19.5606 2.69695 19.2555 1.31248 18.8729C0.920397 18.7642 0.648438 18.4075 0.648438 18C0.648438 17.5926 0.920141 17.2359 1.31225 17.1272C2.69668 16.7452 3.43597 16.4399 3.93728 15.9386C4.43859 15.4373 4.74374 14.6981 5.12573 13.314ZM5.99855 16.1593C5.7779 16.5672 5.52536 16.917 5.22032 17.222C4.91521 17.5271 4.56537 17.7796 4.15754 18.0002C4.56538 18.2211 4.91522 18.4737 5.22032 18.7788C5.52535 19.0838 5.77789 19.4335 5.99855 19.8412C6.21939 19.4331 6.47196 19.0832 6.77701 18.778C7.0819 18.4731 7.43143 18.2207 7.83896 18.0001C7.43099 17.7794 7.0812 17.5267 6.7762 17.2216C6.47136 16.9166 6.21905 16.5669 5.99855 16.1593Z"
+										fill="url(#paint2_linear_2_12152)"
+									/>
+								</g>
+							</g>
+						</g>
+					</g>
+				</g>
+			</g>
+		</g>
+		<defs>
+			<filter
+				id="filter0_dd_2_12152"
+				x="-170"
+				y="-16"
+				width="369"
+				height="76"
+				filterUnits="userSpaceOnUse"
+				colorInterpolationFilters="sRGB"
+			>
+				<feFlood floodOpacity="0" result="BackgroundImageFix" />
+				<feColorMatrix
+					in="SourceAlpha"
+					type="matrix"
+					values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+					result="hardAlpha"
+				/>
+				<feMorphology
+					radius="2"
+					operator="erode"
+					in="SourceAlpha"
+					result="effect1_dropShadow_2_12152"
+				/>
+				<feOffset dy="3" />
+				<feGaussianBlur stdDeviation="3" />
+				<feColorMatrix
+					type="matrix"
+					values="0 0 0 0 0.0784314 0 0 0 0 0.0823529 0 0 0 0 0.101961 0 0 0 0.05 0"
+				/>
+				<feBlend
+					mode="normal"
+					in2="BackgroundImageFix"
+					result="effect1_dropShadow_2_12152"
+				/>
+				<feColorMatrix
+					in="SourceAlpha"
+					type="matrix"
+					values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+					result="hardAlpha"
+				/>
+				<feMorphology
+					radius="3"
+					operator="erode"
+					in="SourceAlpha"
+					result="effect2_dropShadow_2_12152"
+				/>
+				<feOffset dy="10" />
+				<feGaussianBlur stdDeviation="8" />
+				<feColorMatrix
+					type="matrix"
+					values="0 0 0 0 0.0784314 0 0 0 0 0.0823529 0 0 0 0 0.101961 0 0 0 0.08 0"
+				/>
+				<feBlend
+					mode="normal"
+					in2="effect1_dropShadow_2_12152"
+					result="effect2_dropShadow_2_12152"
+				/>
+				<feBlend
+					mode="normal"
+					in="SourceGraphic"
+					in2="effect2_dropShadow_2_12152"
+					result="shape"
+				/>
+			</filter>
+			<linearGradient
+				id="paint0_linear_2_12152"
+				x1="11.9984"
+				y1="0.650024"
+				x2="11.9984"
+				y2="23.35"
+				gradientUnits="userSpaceOnUse"
+			>
+				<stop stopColor="#CD4FF2" />
+				<stop offset="1" stopColor="#5F4AFF" />
+			</linearGradient>
+			<linearGradient
+				id="paint1_linear_2_12152"
+				x1="11.9984"
+				y1="0.650024"
+				x2="11.9984"
+				y2="23.35"
+				gradientUnits="userSpaceOnUse"
+			>
+				<stop stopColor="#CD4FF2" />
+				<stop offset="1" stopColor="#5F4AFF" />
+			</linearGradient>
+			<linearGradient
+				id="paint2_linear_2_12152"
+				x1="11.9984"
+				y1="0.650024"
+				x2="11.9984"
+				y2="23.35"
+				gradientUnits="userSpaceOnUse"
+			>
+				<stop stopColor="#CD4FF2" />
+				<stop offset="1" stopColor="#5F4AFF" />
+			</linearGradient>
+			<clipPath id="clip0_2_12152">
+				<rect
+					width="1280"
+					height="1080"
+					fill="white"
+					transform="translate(-1083 -24)"
+				/>
+			</clipPath>
+			<clipPath id="clip1_2_12152">
+				<rect width="24" height="24" fill="white" />
+			</clipPath>
+		</defs>
+	</svg>
+);

package/src/entities/AIInput/index.ts

@@ -0,0 +1,12 @@
+export { AIInput } from "./AIInput.tsx";
+export {
+	getIdeaFromSelection,
+	getContextItems,
+	getTextFromItem,
+} from "./utils.ts";
+export type {
+	PossibleParentNode,
+} from "./utils.ts";
+export { useAIContext, AIContextProvider } from "./AIContext.tsx";
+export { StarIcon } from "./StarIcon.tsx";
+export { Dropdown } from "./AIDropdown.tsx";