microboard-ui-temp 0.0.3

package/src/features/GameItems/Modal.module.css

@@ -0,0 +1,148 @@
+/* Контейнер для содержимого модалки */
+.modalContent {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 24px;
+	padding: 24px 16px 16px 16px;
+}
+
+.title {
+	font-size: 22px;
+	font-weight: 600;
+	margin-bottom: 8px;
+	text-align: center;
+}
+
+.cardsRow {
+	display: flex;
+	flex-direction: row;
+	gap: 32px;
+	justify-content: center;
+	margin-bottom: 8px;
+}
+
+.cardSilhouette {
+	width: 120px;
+	height: 180px;
+	border: 2px dashed #b78af0;
+	border-radius: 12px;
+	background: #faf8ff;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	position: relative;
+	transition: border-color 0.2s;
+}
+.cardSilhouette:hover {
+	border-color: #924fe8;
+}
+
+.cardLabel {
+	color: #b78af0;
+	font-size: 14px;
+	text-align: center;
+	pointer-events: none;
+}
+
+.cardPreview {
+	width: 100%;
+	height: 100%;
+	border-radius: 8px;
+	object-fit: cover;
+	box-shadow: 0 2px 8px rgba(146, 79, 232, 0.08);
+}
+
+.diceLabel {
+	color: #b78af0;
+	font-size: 40px;
+	text-align: center;
+	pointer-events: none;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 48px;
+	width: 48px;
+	margin: auto;
+}
+
+.dicePreview {
+	width: 48px;
+	height: 48px;
+	border-radius: 8px;
+	object-fit: contain;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin: auto;
+	box-shadow: 0 2px 8px rgba(146, 79, 232, 0.08);
+}
+
+.cardsPreviewList {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 4px;
+	justify-content: center;
+	margin-top: 4px;
+}
+
+.acceptBtn {
+	margin-top: 24px;
+	width: 100%;
+	max-width: 320px;
+}
+
+.diceFace {
+	cursor: pointer;
+	width: 80px;
+	height: 80px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: relative;
+	border-radius: 8px;
+	background: #faf8ff;
+	border: 2px dashed #b78af0;
+	transition: border-color 0.2s;
+}
+.diceFace:hover {
+	border-color: #924fe8;
+}
+
+.addFaceBtn {
+	cursor: pointer;
+	width: 80px;
+	height: 80px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border: 2px dashed #ccc;
+	color: #888;
+	font-size: 40px;
+	border-radius: 8px;
+	background: #faf8ff;
+	transition: border-color 0.2s;
+}
+.addFaceBtn:hover {
+	border-color: #888;
+}
+
+.removeFaceBtnWrapper {
+	margin-top: 16px;
+	text-align: center;
+}
+
+.removeFaceBtn {
+	border: 2px dashed #ff6b6b !important;
+	color: #ff6b6b !important;
+	background: transparent !important;
+	padding: 8px 16px !important;
+	font-size: 16px;
+	border-radius: 8px;
+	transition: border-color 0.2s;
+}
+.removeFaceBtn:hover {
+	border-color: #ff3b3b !important;
+	color: #ff3b3b !important;
+}

package/src/features/GameItems/index.ts

@@ -0,0 +1 @@
+export { CreateCardsModal } from "./CreateCardsModal.tsx";

package/src/features/GenerateChart/AIChat.module.css

@@ -0,0 +1,162 @@
+.chatContainer {
+	padding: 20px;
+	background-color: #f5f5f5;
+	border-radius: 10px;
+	width: 100%;
+	max-width: 500px;
+	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+	border: 1px solid var(--border-action-normal);
+	background-color: white;
+	position: fixed;
+	bottom: var(--absolute-position-panel-padding);
+	left: var(--absolute-position-panel-padding);
+	z-index: 150;
+}
+
+.header {
+	display: flex;
+	justify-content: space-between;
+	align-items: flex-start;
+}
+
+.closeButton {
+	background: none;
+	border: none;
+	padding: 4px;
+	cursor: pointer;
+	color: #666;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 4px;
+}
+
+.closeButton:hover {
+	background-color: #f5f5f5;
+}
+
+.flexTitle {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.title {
+	font-size: 16px;
+	font-weight: bold;
+	display: inline;
+}
+
+.betaTag {
+	padding: 2px 8px;
+	font-size: 10px;
+	color: #007bff;
+	background-color: #e0f0ff;
+	border-radius: 4px;
+	font-weight: 600;
+}
+
+.description {
+	font-size: 12px;
+	color: #666;
+	margin-bottom: 16px;
+}
+
+.inputContainer {
+	display: flex;
+	flex-direction: column;
+}
+
+.textarea {
+	width: 100%;
+	min-height: 100px;
+	padding: 12px;
+	font-size: 12px;
+	border: 1px solid #ddd;
+	border-radius: 12px;
+	resize: vertical;
+	margin-bottom: 12px;
+	resize: none;
+}
+
+.textarea:focus {
+	border-color: #b78af0;
+	outline: 2px solid rgba(200, 178, 255, 0.5);
+}
+
+.textarea:active {
+	border-color: #b78af0;
+}
+
+.button {
+	padding: 10px 16px;
+	font-size: 12px;
+	color: white;
+	background-color: #007bff;
+	border: none;
+	border-radius: 4px;
+	cursor: pointer;
+}
+
+.button:disabled {
+	background-color: #ccc;
+	cursor: not-allowed;
+}
+
+.loadingMessage {
+	margin-top: 12px;
+	font-size: 10px;
+	color: #007bff;
+}
+
+.select {
+	width: 100%;
+	padding: 8px;
+	font-size: 12px;
+	border: 1px solid #ddd;
+	border-radius: 12px;
+	margin-bottom: 12px;
+	background-color: white;
+	color: #333;
+	/* 
+	padding-right: 32px;
+	outline: 1px solid #ddd;
+	border-right: 12px solid transparent; */
+}
+
+.select:focus {
+	outline-color: 1px solid #b78af0;
+	/* outline:
+		1px solid #b78af0,
+		2px solid rgba(200, 178, 255, 0.5); */
+}
+
+.select:active {
+	outline-color: #b78af0;
+	/* outline:
+		1px solid #b78af0,
+		2px solid rgba(200, 178, 255, 0.5); */
+}
+
+.select:focus {
+	border-color: #b78af0;
+	outline: 2px solid rgba(200, 178, 255, 0.5);
+}
+
+.select:active {
+	border-color: #b78af0;
+}
+
+.charCount {
+	font-size: 10px;
+	color: #666;
+	margin-top: 4px;
+	text-align: right;
+	margin-bottom: 8px;
+}
+
+.errorMessage {
+	margin-top: 12px;
+	font-size: 10px;
+	color: #d9534f;
+}

package/src/features/GenerateChart/AIChat.tsx

@@ -0,0 +1,198 @@
+import React, { useState, useEffect } from "react";
+import styles from "./AIChat.module.css";
+import { LayoutEngine } from "features/GenerateChart/lib/engine/index";
+import { generateChart } from "shared/api/ai";
+import { Board } from "microboard-temp";
+import { useTranslation } from "react-i18next";
+import { UiButton } from "shared/ui-lib/UiButton";
+import { useClickOutside } from "shared/lib/useClickOutside";
+
+const CHARACTER_LIMIT = 500;
+
+export type ChartType = "Flow chart" | "Cloud architecture" | "Database";
+
+interface Props {
+	board: Board;
+	onClose: () => void;
+	initialPrompt?: string;
+	initialChartType?: ChartType;
+	onSavePrompt: (prompt: string, chartType: ChartType) => void;
+}
+
+export const AIChat: React.FC<Props> = ({
+	board,
+	onClose,
+	initialPrompt = "",
+	initialChartType = "Flow chart",
+	onSavePrompt,
+}) => {
+	const { t } = useTranslation();
+	const [prompt, setPrompt] = useState(initialPrompt);
+	const [chartType, setChartType] = useState<ChartType>(initialChartType);
+	const [isLoading, setIsLoading] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+
+	useEffect(() => {
+		return () => {
+			onSavePrompt(prompt, chartType);
+		};
+	}, [prompt, chartType, onSavePrompt]);
+
+	useEffect(() => {
+		const escapeHandler = (ev: KeyboardEvent): void => {
+			if (ev.key === "Escape") {
+				onClose();
+			}
+		};
+
+		window.addEventListener("keydown", escapeHandler);
+
+		return () => {
+			window.removeEventListener("keydown", escapeHandler);
+		};
+	});
+
+	const handleInputChange = (
+		ev: React.ChangeEvent<HTMLTextAreaElement>,
+	): void => {
+		setPrompt(ev.target.value);
+		setError(null);
+	};
+
+	const handleChartTypeChange = (
+		ev: React.ChangeEvent<HTMLSelectElement>,
+	): void => {
+		setChartType(ev.target.value as ChartType);
+		setError(null);
+	};
+
+	const handleSubmit = async (ev?: React.FormEvent): Promise<void> => {
+		if (ev) {
+			ev.preventDefault();
+		}
+
+		if (!prompt) {
+			return;
+		}
+
+		setIsLoading(true);
+		setError(null);
+		try {
+			const res = await generateChart({ input: prompt });
+			if (!res.data) {
+				throw new Error("No data received");
+			}
+
+			const layoutEngine = new LayoutEngine(board);
+			layoutEngine.parse(res.data.message);
+		} catch (err) {
+			setError("Failed to generate chart. Please try again.");
+			console.error("Error:", err);
+		} finally {
+			setIsLoading(false);
+		}
+	};
+
+	const topHandler = (ev): void => {
+		ev.stopPropagation();
+	};
+
+	const handleKeydown = (
+		ev: React.KeyboardEvent<HTMLTextAreaElement>,
+	): void => {
+		ev.stopPropagation();
+	};
+
+	const ref = useClickOutside(onClose);
+
+	return (
+		<div
+			className={styles.chatContainer}
+			ref={ref}
+			onKeyDown={topHandler}
+			onPaste={ev => {
+				ev.stopPropagation();
+			}}
+			onCopy={ev => {
+				ev.stopPropagation();
+			}}
+		>
+			<div className={styles.header}>
+				<div className={styles.flexTitle}>
+					<h2 className={styles.title}>{t("ai.generateAiChart")}</h2>
+					<span className={styles.betaTag}>Beta</span>
+				</div>
+				<button onClick={onClose} className={styles.closeButton}>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						width="24"
+						height="24"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						strokeWidth="2"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+					>
+						<path d="M18 6 6 18"></path>
+						<path d="m6 6 12 12"></path>
+					</svg>
+				</button>
+			</div>
+			<p className={styles.description}>{t("ai.enterIdea")}</p>
+			<form onSubmit={handleSubmit} className={styles.inputContainer}>
+				<select
+					className={styles.select}
+					onChange={handleChartTypeChange}
+					value={chartType}
+					disabled={isLoading}
+				>
+					<option value="Flow chart">{t("ai.flowChart")}</option>
+					<option value="Cloud architecture" disabled>
+						{t("ai.cloudArch")}
+					</option>
+					<option value="Database" disabled>
+						{t("ai.database")}
+					</option>
+				</select>
+				<textarea
+					className={styles.textarea}
+					onChange={handleInputChange}
+					placeholder={t("ai.chatPlaceholder")}
+					disabled={isLoading}
+					value={prompt}
+					onKeyDown={ev => {
+						handleKeydown(ev);
+						if (ev.key === "Enter" && !ev.shiftKey) {
+							ev.preventDefault();
+							handleSubmit();
+						}
+						if (ev.key === "Escape") {
+							onClose();
+						}
+					}}
+					onPaste={ev => ev.stopPropagation()}
+					onCopy={ev => ev.stopPropagation()}
+					maxLength={CHARACTER_LIMIT}
+				/>
+				<div className={styles.charCount}>
+					{prompt.length} / {CHARACTER_LIMIT} {t("ai.symbols")}
+				</div>
+				<UiButton
+					type="submit"
+					variant="primary"
+					disabled={isLoading}
+					size="lg"
+				>
+					{isLoading ? t("ai.generating") : t("ai.generate")}
+				</UiButton>
+			</form>
+			{error && <div className={styles.errorMessage}>{error}</div>}
+			{isLoading && (
+				<div className={styles.loadingMessage}>
+					{t("ai.processingIdea")}
+				</div>
+			)}
+		</div>
+	);
+};

package/src/features/GenerateChart/AIChatPanel.module.css

@@ -0,0 +1,34 @@
+@media screen and (max-height: 740px) {
+	.wrapper {
+		position: fixed;
+		bottom: calc(var(--absolute-position-panel-padding) * 2 + 48px);
+		right: 12px;
+	}
+}
+
+.panelButton {
+	padding: 12px;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: none;
+	border: none;
+	transition: all 0.5s ease;
+}
+
+.panelButton:hover {
+	background-color: rgba(0, 0, 0, 0.05);
+	border-radius: 8px;
+}
+
+.panelIcon {
+	width: 24px;
+	height: 24px;
+}
+
+@media screen and (max-width: 550px) {
+	.panelButton {
+		display: none;
+	}
+}

package/src/features/GenerateChart/AIChatPanel.tsx

@@ -0,0 +1,72 @@
+import React, { useState } from "react";
+import { UiPanel } from "shared/ui-lib/UiPanel";
+import { AIChat, ChartType } from "./AIChat";
+import styles from "./AIChatPanel.module.css";
+import { Board } from "microboard-temp";
+import { useTranslation } from "react-i18next";
+
+interface Props {
+	board: Board;
+}
+
+export const AIChatPanel: React.FC<Props> = ({ board }) => {
+	const { t } = useTranslation();
+	const [isOpen, setIsOpen] = useState(false);
+	const [savedPrompt, setSavedPrompt] = useState("");
+	const [savedChartType, setSavedChartType] =
+		useState<ChartType>("Flow chart");
+
+	const toggleChat = (): void => {
+		setIsOpen(!isOpen);
+	};
+
+	const handleClose = (): void => {
+		setIsOpen(false);
+	};
+
+	const handleSavePrompt = (prompt: string, chartType: ChartType): void => {
+		setSavedPrompt(prompt);
+		setSavedChartType(chartType);
+	};
+
+	if (isOpen) {
+		return (
+			<AIChat
+				board={board}
+				onClose={handleClose}
+				initialPrompt={savedPrompt}
+				initialChartType={savedChartType}
+				onSavePrompt={handleSavePrompt}
+			/>
+		);
+	}
+
+	return (
+		<UiPanel className={styles.wrapper} padding={0}>
+			<button
+				onClick={toggleChat}
+				className={styles.panelButton}
+				title={t("ai.generateAiChart")}
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width="24"
+					height="24"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					strokeWidth="2"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+					className={styles.panelIcon}
+				>
+					<path d="M10 9.5 8 12l2 2.5"></path>
+					<path d="m14 9.5 2 2.5-2 2.5"></path>
+					<path d="M7.9 20A9 9 0 1 0 4 16.1L2 22z"></path>
+				</svg>
+			</button>
+		</UiPanel>
+	);
+};
+
+export default AIChatPanel;