23s2s

✏️ Editing: ChatSuggestions.jsx

import { sparkle } from '@agent/icons';
import { useSuggestionsStore } from '@agent/state/suggestions';
import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import {
	chevronRight,
	drafts,
	help,
	pencil,
	published,
	siteLogo,
	styles,
	swatch,
	typography,
	video,
} from '@wordpress/icons';

const icons = {
	styles,
	edit: pencil,
	help,
	video,
	sparkle,
	drafts,
	published,
	typography,
	pencil,
	siteLogo,
	swatch,
};

export const ChatSuggestions = ({ suggestions }) => {
	const { markAsClicked, isAvailable, getSuggestions } = useSuggestionsStore();
	const [allSuggestions, setAllSuggestions] = useState(suggestions);

const handleShowMore = () => {
		const next = getSuggestions({ slice: 6, exclude: allSuggestions });
		setAllSuggestions((prev) => [...prev, ...next]);
	};

if (!suggestions) return null;

return (
		<>
			{allSuggestions.map((suggestion) => {
				// Hide them if it's not available to the user
				if (!isAvailable(suggestion)) return null;
				return (
					<SuggestionButton
						key={suggestion.message}
						suggestion={suggestion}
						handleSubmit={handleSubmit}
					/>
				);
			})}
			<ShowMoreButton handleShowMore={handleShowMore} />
		</>
	);
};

const ShowMoreButton = ({ handleShowMore }) => {
	const [hide, setHide] = useState(false);
	const handleClick = () => {
		handleShowMore();
		setHide(true);
	};

if (hide) return null;
	return (
		<button
			type="button"
			className="group flex w-full items-center gap-3 rounded-sm bg-transparent px-1 py-1 text-xs not-italic text-gray-800 transition-colors duration-100 hover:text-gray-900 focus:outline-hidden group"
			onClick={handleClick}
		>
			<span className="h-px flex-1 bg-gray-200" />
			<span className="group-hover:underline group-focus:ring-2 group-focus:ring-design-main">
				{__('Show more', 'extendify-local')}
			</span>
			<span className="h-px flex-1 bg-gray-200" />
		</button>
	);
};

Sid Gifari From Gifari Industries - BD Cyber Security Team