+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+ const ACTIONS = [
+ {
+ label: __( 'Knowledge Base', 'hyve' ),
+ description: __( 'In Knowledge Base, view and remove any Posts/Pages added to Hyve from the chat\'s data source.', 'hyve' ),
+ icon: archive,
+ action: () => setRoute( 'data' )
+ },
+ {
+ label: __( 'Personalize', 'hyve' ),
+ description: __( 'Customize Hyve\'s behavior and appearance to better suit your website and brand.', 'hyve' ),
+ icon: brush,
+ action: () => setRoute( 'settings' )
+ },
+ {
+ label: __( 'Need help?', 'hyve' ),
+ description: __( 'Check out our documentation or contact support for assistance.', 'hyve' ),
+ icon: help,
+ action: () => window?.open( window?.hyve?.docs, '_blank' )
+ }
+ ];
+
+ return (
+
+
+
+
+ { __( 'Welcome to Hyve! Designed to seamlessly integrate AI chat into your WordPress site, this plugin allows you to craft a personalized chat experience using your own posts and pages. Enjoy engaging with your website visitors through Hyve!', 'hyve' ) }
+ +{ __( 'To begin using the Hyve plugin, you\'ll need an OpenAI API key. This key enables Hyve to communicate with OpenAI\'s powerful language models, ensuring you get the best possible responses.', 'hyve' ) }
+ +
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Home;
diff --git a/src/backend/parts/Messages.js b/src/backend/parts/Messages.js
new file mode 100644
index 0000000..09789a8
--- /dev/null
+++ b/src/backend/parts/Messages.js
@@ -0,0 +1,200 @@
+/**
+ * External dependencies.
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies.
+ */
+import { __ } from '@wordpress/i18n';
+
+import apiFetch from '@wordpress/api-fetch';
+
+import {
+ Button,
+ Modal,
+ Panel,
+ PanelRow,
+ Spinner
+} from '@wordpress/components';
+
+import {
+ useEffect,
+ useState
+} from '@wordpress/element';
+
+import { applyFilters } from '@wordpress/hooks';
+
+import { addQueryArgs } from '@wordpress/url';
+
+/**
+ * Internal dependencies.
+ */
+import UpsellContainer from './UpsellContainer';
+
+const LoadMore = ({ onClick }) => (
+
+);
+
+const Messages = () => {
+ const [ posts, setPosts ] = useState([]);
+ const [ selectedPost, setSelectedPost ] = useState( null );
+ const [ hasMore, setHasMore ] = useState( false );
+ const [ isUpsellOpen, setUpsellOpen ] = useState( false );
+ const [ isLoading, setLoading ] = useState( true );
+
+ const fetchPosts = async() => {
+ setLoading( true );
+
+ const response = await apiFetch({
+ path: addQueryArgs( `${ window.hyve.api }/threads`, {
+ offset: posts?.length || 0
+ })
+ });
+
+ setLoading( false );
+ setPosts( posts.concat( response.posts ) );
+ setHasMore( response.more );
+ };
+
+ useEffect( () => {
+ fetchPosts();
+ }, []);
+
+ return (
+ + { __( 'Overview', 'hyve' ) } +
+ +
+ { STATUS.map( ({ label, value, description }) => (
+
+
+
+
+ ) ) }
+
+
+ -
+
- + { label } + + +
- + { value } + + +
- + { description } + +
+ { __( 'Get Started', 'hyve' ) } +
+ +
+ { ACTIONS.map( ({ label, description, icon, action }) => (
+
+ ) )}
+
+
+ { isUpsellOpen && (
+ setUpsellOpen( false ) }
+ className="md:max-w-3xl md:w-full overflow-hidden"
+ >
+
+ 
+
+
+ ) }
+
+
+
+
+
+
+ );
+};
+
+export default Messages;
diff --git a/src/backend/parts/ModerationReview.js b/src/backend/parts/ModerationReview.js
new file mode 100644
index 0000000..dcc7cec
--- /dev/null
+++ b/src/backend/parts/ModerationReview.js
@@ -0,0 +1,119 @@
+/**
+ * WordPress dependencies.
+ */
+import {
+ __,
+ sprintf
+} from '@wordpress/i18n';
+
+import {
+ Button,
+ Modal
+} from '@wordpress/components';
+
+import { useState } from '@wordpress/element';
+
+import { info } from '@wordpress/icons';
+
+/**
+ * Internal dependencies.
+ */
+import {
+ moderationLabels,
+ onProcessData
+} from '../utils';
+
+const ModerationReview = ({
+ post,
+ type = '',
+ isOpen,
+ onClose,
+ onSuccess = () => {}
+}) => {
+ const [ isBusy, setBusy ] = useState( false );
+
+ const onOverride = async() => {
+ setBusy( true );
+
+ await onProcessData({
+ post,
+ type,
+ params: {
+ action: 'override'
+ },
+ onSuccess: () => {
+ onClose();
+ onSuccess();
+ }
+ });
+
+ setBusy( false );
+ };
+
+ if ( ! isOpen || ! post?.review ) {
+ return null;
+ }
+
+ return (
+ { __( 'Here you can see an history of all the messages between Hyve and your users.', 'hyve' ) }
+ + { ( isLoading && ! posts?.length ) && ( +
+
+ )}
+
+ { ( ! isLoading && ! posts?.length ) && (
+
+
+ )}
+
+ { ( ( ! isLoading && ( posts && 0 < posts.length ) ) || ( posts && 0 < posts.length ) ) && (
+ { __( 'Messsages between Hyve and your users will appear here', 'hyve' ) }
+
+ { ( ! isLoading || ( posts && 0 < posts.length ) ) && (
+
+ ) }
+
+ { posts?.map( ( post, index ) => (
+
+ ) ) }
+
+ { hasMore && applyFilters(
+ 'hyve.messages.load-more',
+ setUpsellOpen( true ) }
+ />,
+ isLoading,
+ fetchPosts
+ ) }
+
+ ) }
+
+
+ { ! selectedPost && (
+
+
+
+ ) }
+
+ { selectedPost && (
+ <>
+ { __( 'Select a message to view the conversation', 'hyve' ) }
+
+
+
+ { __( 'Thread ID', 'hyve' ) }
+{ selectedPost?.thread_id?.replace( 'thread_', '' ) }
+
+ { selectedPost?.thread && ( 0 < selectedPost?.thread?.length ) && selectedPost?.thread.map( ( message, index ) => {
+ const datetime = new Date( message.time * 1000 );
+ const date = `${ String( datetime.getDate() ).padStart( 2, 0 ) }/${ String( datetime.getMonth() + 1 ).padStart( 2, 0 ) }/${ datetime.getFullYear() } ${ String( datetime.getHours() ).padStart( 2, 0 ) }:${ String( datetime.getMinutes() ).padStart( 2, 0 ) } ${ 12 <= datetime.getHours() ? 'PM' : 'AM' }`;
+
+ if ( 'bot' === message.sender ) {
+ return (
+
+
+ ) }
+
+
+ );
+ }
+
+ if ( 'user' === message.sender ) {
+ return (
+ { message.message }
+ +
+
+ );
+ }
+
+ return null;
+ }) }
+ { message.message }
+ +{ __( 'The content of the post listed here could not be added or updated due to non-compliance with content policies. Review these to understand the limitations and possibly modify content to align with required standards.', 'hyve' ) }
+ +{ __( 'The following content was flagged for:', 'hyve' ) }
+ + { post && Object.keys( post.review ).map( review => ( +
+
+ ) ) }
+
+
+
+
+ { moderationLabels[ review ].label }
+ + +
+
+
+
+
+
+
+ { Math.floor( post.review[ review ] * 100 ) }%
+
+ { __( 'Occasionally, OpenAI\'s Moderation system may incorrectly flag content as a violation—these are false positives. Such errors can occur because automated systems sometimes lack the necessary context to interpret nuances accurately. If your content is flagged but you believe it adheres to the guidelines, please manually review it. Should you determine it does not violate the content policies, you can click the button below to override the moderation decision.', 'hyve' ) }
+ +
+
+
+
+ {
+ setData({
+ ...data,
+ title
+ });
+ } }
+ />
+
+ {
+ setData({
+ ...data,
+ content
+ });
+ } }
+ />
+
+
+
+ { isEdit && (
+
+ ) }
+
+
+
+
+
+
+ { isLoading && (
+
+
+
+
+ { __( 'ID', 'hyve' ) }
+ { __( 'Title', 'hyve' ) }
+ { __( 'Action', 'hyve' ) }
+
+ { posts?.map( ( post ) => (
+
+
+
+ ) )}
+
+ { ( ! posts.length && ! isLoading ) && (
+ { post.ID }
+
+
+ { post.title }
+
+
+
+ { ( false !== secondaryAction && undefined !== post.review ) && (
+
+ )}
+
+
+
+
+ {__( 'No data found.', 'hyve' )}
+
+ )}
+
+
+ )}
+
+ { hasMore && (
+
+
+
+ )}
+
+ );
+};
+
+export default PostsTable;
diff --git a/src/backend/parts/Sidebar.js b/src/backend/parts/Sidebar.js
new file mode 100644
index 0000000..0b2c49e
--- /dev/null
+++ b/src/backend/parts/Sidebar.js
@@ -0,0 +1,130 @@
+/**
+ * External dependencies.
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies.
+ */
+import { __ } from '@wordpress/i18n';
+
+import {
+ useDispatch,
+ useSelect
+} from '@wordpress/data';
+
+import {
+ Button,
+ Icon,
+ Panel
+} from '@wordpress/components';
+
+import { applyFilters } from '@wordpress/hooks';
+
+import { chevronDown } from '@wordpress/icons';
+
+/**
+ * Internal dependencies.
+ */
+import { ROUTE_TREE } from '../route';
+import { setUtm } from '../utils';
+
+const Sidebar = () => {
+ const route = useSelect( ( select ) => select( 'hyve' ).getRoute() );
+ const hasAPI = useSelect( ( select ) => select( 'hyve' ).hasAPI() );
+
+ const { setRoute } = useDispatch( 'hyve' );
+
+ const MENU_ITEMS = applyFilters( 'hyve.route', ROUTE_TREE );
+
+ return (
+
+
+
+
+ { ( hasAPI && ! window?.hyve?.license ) && (
+ <>
+
+ +
+
+
+ ) }
+
+ );
+};
+
+export default Sidebar;
diff --git a/src/backend/parts/UpsellContainer.js b/src/backend/parts/UpsellContainer.js
new file mode 100644
index 0000000..71a6f8f
--- /dev/null
+++ b/src/backend/parts/UpsellContainer.js
@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies.
+ */
+import { __ } from '@wordpress/i18n';
+
+import { Button } from '@wordpress/components';
+
+/**
+ * Internal dependencies.
+ */
+import { setUtm } from '../utils';
+
+const UpsellContainer = ({
+ title,
+ description,
+ campaign,
+ children
+}) => {
+ return (
+
+
+
+ + +
+
+
+
+
+
+ { __( 'Upgrade to Premium', 'hyve' ) }
+{ __( 'Unlock powerful features and enhance your chatbot experience.', 'hyve' ) }
+
+ { children }
+
+
+ );
+};
+
+export default UpsellContainer;
diff --git a/src/backend/parts/data/AddData.js b/src/backend/parts/data/AddData.js
new file mode 100644
index 0000000..1010934
--- /dev/null
+++ b/src/backend/parts/data/AddData.js
@@ -0,0 +1,200 @@
+/**
+ * External dependencies.
+ */
+import hash from 'object-hash';
+
+/**
+ * WordPress dependencies.
+ */
+import { __ } from '@wordpress/i18n';
+
+import apiFetch from '@wordpress/api-fetch';
+
+import {
+ Notice,
+ Panel,
+ PanelRow,
+ SearchControl,
+ SelectControl
+} from '@wordpress/components';
+
+import {
+ useDispatch,
+ useSelect
+} from '@wordpress/data';
+
+import {
+ useEffect,
+ useState
+} from '@wordpress/element';
+
+import { addQueryArgs } from '@wordpress/url';
+
+/**
+ * Internal dependencies.
+ */
+import { onProcessData } from '../../utils';
+
+import PostsTable from '../PostsTable';
+
+import ModerationReview from '../ModerationReview';
+
+const excludeTypes = [ 'attachment' ];
+
+let postTypes = window.hyve.postTypes.filter( ( postType ) => ! excludeTypes.includes( postType.value ) );
+
+postTypes.unshift({
+ label: __( 'All', 'hyve' ),
+ value: 'any'
+});
+
+const AddData = () => {
+ const [ posts, setPosts ] = useState({});
+ const [ processedPosts, setProcessedPosts ] = useState([]);
+ const [ hasMore, setHasMore ] = useState( false );
+ const [ isLoading, setLoading ] = useState( true );
+ const [ isUpdating, setUpdating ] = useState([]);
+ const [ isModerationModalOpen, setModerationModalOpen ] = useState( false );
+ const [ post, setPost ] = useState( null );
+
+ const [ query, setQuery ] = useState({
+ type: 'any',
+ search: ''
+ });
+
+ const { setTotalChunks } = useDispatch( 'hyve' );
+ const hasReachedLimit = useSelect( ( select ) => select( 'hyve' ).hasReachedLimit() );
+
+ const fetchData = async() => {
+ setLoading( true );
+
+ const queryHash = hash( query );
+
+ const response = await apiFetch({
+ path: addQueryArgs( `${ window.hyve.api }/data`, {
+ offset: posts[ queryHash ]?.length || 0,
+ ...query
+ })
+ });
+
+ setLoading( false );
+
+ setPosts({
+ ...posts,
+ [ queryHash ]: ( posts[ queryHash ] || []).concat( response.posts )
+ });
+
+ setHasMore( response.more );
+ setTotalChunks( response?.totalChunks );
+ };
+
+ const onProcess = async( id ) => {
+ setUpdating( prev => [ ...prev, id ]);
+ const post = posts[hash( query )].find( post => post.ID === id );
+
+ await onProcessData({
+ post,
+ onSuccess: () => {
+ setUpdating( prev => prev.filter( postId => postId !== id ) );
+ setProcessedPosts( prev => [ ...prev, id ]);
+ },
+ onError: ( error ) => {
+ if ( 'content_failed_moderation' === error?.code && undefined !== error.review ) {
+ const newPost = {
+ ...post,
+ review: error.review
+ };
+
+ setPost( newPost );
+ setModerationModalOpen( true );
+ }
+
+ setUpdating( prev => prev.filter( postId => postId !== id ) );
+ }
+ });
+ };
+
+ useEffect( () => {
+ const handler = setTimeout( () => fetchData(), 1000 );
+ return () => clearTimeout( handler );
+ }, [ query ]);
+
+ const onChangeQuery = ( key, value ) => {
+ setQuery({
+ ...query,
+ [ key ]: value
+ });
+ };
+
+ return (
+ <>
+
+
+
+
+ { title }
+ { description }
+ + +
+
+
+ { hasReachedLimit && (
+
+ { __( 'You have reached the limit of posts that can be added to the knowledge base. Please delete existing posts if you wish to add more.', 'hyve' ) }
+
+ ) }
+
+
+
+
+
+ { __( 'Select posts that are informative, engaging, and relevant. These will be the building blocks that empower your chat assistant to deliver precise and helpful responses. Whether it is answering FAQs or diving into detailed explanations, the content you choose here will shape how effectively your assistant interacts with users.', 'hyve' ) }
+ +
+ ! processedPosts.includes( post.ID ) ) || []}
+ isLoading={ isLoading }
+ hasMore={ hasMore }
+ onFetch={ fetchData }
+ onAction={ onProcess }
+ actionLabel={ __( 'Add', 'hyve' ) }
+ isBusy={ isUpdating }
+ isDisabled={ hasReachedLimit }
+ />
+
+
+
+
+
+ onChangeQuery( 'type', e )}
+ />
+
+
+
+ onChangeQuery( 'search', e )}
+ />
+
+
+
+
+
+
+
+ );
+};
+
+export default Custom;
diff --git a/src/backend/parts/data/FAQ.js b/src/backend/parts/data/FAQ.js
new file mode 100644
index 0000000..678d453
--- /dev/null
+++ b/src/backend/parts/data/FAQ.js
@@ -0,0 +1,109 @@
+/**
+ * WordPress dependencies.
+ */
+import { __ } from '@wordpress/i18n';
+
+import {
+ Button,
+ Panel,
+ PanelRow
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies.
+ */
+import UpsellContainer from '../UpsellContainer';
+
+const posts = [
+ {
+ question: __( 'How do I reset my password?', 'hyve' ),
+ count: 5
+ },
+ {
+ question: __( 'How do I change my email address?', 'hyve' ),
+ count: 3
+ },
+ {
+ question: __( 'How do I update my payment method?', 'hyve' ),
+ count: 2
+ },
+ {
+ question: __( 'How do I cancel my subscription?', 'hyve' ),
+ count: 1
+ },
+ {
+ question: __( 'How do I change my plan?', 'hyve' ),
+ count: 1
+ },
+ {
+ question: __( 'How do I update my billing information?', 'hyve' ),
+ count: 1
+ }
+];
+
+const Custom = () => {
+ return (
+ { __( 'Custom Data allows you to privately feed specific data directly into your chat bot without displaying this information on your public website. With this, you can equip your bot with unique, specialized knowledge that aligns with your business needs and customer queries.', 'hyve' ) }
+ +
+
+ {} }
+ onAction={ () => {} }
+ actionLabel={ __( 'Edit', 'hyve' ) }
+ isBusy={ [] }
+ />
+
+
+
+
+
+
+ {} }
+ />
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Custom;
diff --git a/src/backend/parts/data/FailedModeration.js b/src/backend/parts/data/FailedModeration.js
new file mode 100644
index 0000000..1ece68e
--- /dev/null
+++ b/src/backend/parts/data/FailedModeration.js
@@ -0,0 +1,138 @@
+/**
+ * WordPress dependencies.
+ */
+import { __ } from '@wordpress/i18n';
+
+import apiFetch from '@wordpress/api-fetch';
+
+import {
+ Panel,
+ PanelRow
+} from '@wordpress/components';
+
+import { useDispatch } from '@wordpress/data';
+
+import {
+ useEffect,
+ useState
+} from '@wordpress/element';
+
+import { addQueryArgs } from '@wordpress/url';
+
+/**
+ * Internal dependencies.
+ */
+import { onProcessData } from '../../utils';
+import PostsTable from '../PostsTable';
+import ModerationReview from '../ModerationReview';
+
+const FailedModeration = () => {
+ const [ needsUpdate, setNeedsUpdate ] = useState([]);
+ const [ hasMoreUpdate, setHasMoreUpdate ] = useState( false );
+ const [ isLoadingUpdate, setLoadingUpdate ] = useState( false );
+ const [ isUpdating, setUpdating ] = useState([]);
+ const [ isOpen, setOpen ] = useState( false );
+ const [ post, setPost ] = useState( null );
+
+ const { setTotalChunks } = useDispatch( 'hyve' );
+
+ const fetchUpdate = async() => {
+ setLoadingUpdate( true );
+
+ const response = await apiFetch({
+ path: addQueryArgs( `${ window.hyve.api }/data`, {
+ offset: needsUpdate?.length || 0,
+ status: 'moderation'
+ })
+ });
+
+ setLoadingUpdate( false );
+ setNeedsUpdate([
+ ...needsUpdate,
+ ...response.posts
+ ]);
+ setHasMoreUpdate( response.more );
+ setTotalChunks( response?.totalChunks );
+ };
+
+ const onUpdate = async( id ) => {
+ setUpdating( prev => [ ...prev, id ]);
+ const post = needsUpdate.find( post => post.ID === id );
+
+ await onProcessData({
+ post,
+ params: {
+ action: 'update'
+ },
+ onSuccess: () => {
+ setUpdating( prev => prev.filter( postId => postId !== id ) );
+ setNeedsUpdate( prev => prev.filter( post => post.ID !== id ) );
+ },
+ onError: ( error ) => {
+ if ( 'content_failed_moderation' === error?.code && undefined !== error.review ) {
+ const newPost = {
+ ...post,
+ review: error.review
+ };
+
+ setPost( newPost );
+ setOpen( true );
+ }
+
+ setUpdating( prev => prev.filter( postId => postId !== id ) );
+ }
+ });
+ };
+
+ useEffect( () => {
+ fetchUpdate();
+ }, []);
+
+ return (
+ <>
+ { __( 'The FAQ captures frequently asked questions that went unanswered by our chatbot, providing you with a valuable insight into what your users are seeking. This feature allows you to review these queries and decide whether to incorporate them into your bot\'s knowledge base. By actively updating your FAQ, you can continuously refine your chatbot\'s ability to address user needs effectively and enhance their interactive experience. These aren\'t updated instantly.', 'hyve' ) }
+ +
+
+
+
+
+
+
+
+
+
+
+ { __( 'Title', 'hyve' ) }
+ { __( 'Count', 'hyve' ) }
+ { __( 'Action', 'hyve' ) }
+
+ { posts?.map( ( post, key ) => (
+
+
+
+ ) )}
+
+ { post.question }
+
+
+ { post.count }
+
+
+
+
+
+
+
+
+
+
+
+
+
+ { __( 'On this page, you\'ll find posts and pages that could not be added or updated due to non-compliance with content policies. Review these to understand the limitations and possibly modify content to align with required standards. You can also adjust the moderation threshold in the Settings.', 'hyve' ) }
+ +
+ {
+ setOpen( true );
+ setPost( post );
+ }
+ } }
+ />
+
+
+
+
+
+
+
+ );
+};
+
+export default KnowledgeBase;
diff --git a/src/backend/parts/data/Updated.js b/src/backend/parts/data/Updated.js
new file mode 100644
index 0000000..a4e1f8f
--- /dev/null
+++ b/src/backend/parts/data/Updated.js
@@ -0,0 +1,132 @@
+/**
+ * WordPress dependencies.
+ */
+import { __ } from '@wordpress/i18n';
+
+import apiFetch from '@wordpress/api-fetch';
+
+import {
+ Panel,
+ PanelRow
+} from '@wordpress/components';
+
+import { useDispatch } from '@wordpress/data';
+
+import {
+ useEffect,
+ useState
+} from '@wordpress/element';
+
+import { addQueryArgs } from '@wordpress/url';
+
+/**
+ * Internal dependencies.
+ */
+import { onProcessData } from '../../utils';
+import PostsTable from '../PostsTable';
+import ModerationReview from '../ModerationReview';
+
+const Updated = () => {
+ const [ needsUpdate, setNeedsUpdate ] = useState([]);
+ const [ hasMoreUpdate, setHasMoreUpdate ] = useState( false );
+ const [ isLoadingUpdate, setLoadingUpdate ] = useState( false );
+ const [ isUpdating, setUpdating ] = useState([]);
+ const [ isModerationModalOpen, setModerationModalOpen ] = useState( false );
+ const [ post, setPost ] = useState( null );
+
+ const { setTotalChunks } = useDispatch( 'hyve' );
+
+ const fetchUpdate = async() => {
+ setLoadingUpdate( true );
+
+ const response = await apiFetch({
+ path: addQueryArgs( `${ window.hyve.api }/data`, {
+ offset: needsUpdate?.length || 0,
+ status: 'pending'
+ })
+ });
+
+ setLoadingUpdate( false );
+ setNeedsUpdate([
+ ...needsUpdate,
+ ...response.posts
+ ]);
+ setHasMoreUpdate( response.more );
+ setTotalChunks( response?.totalChunks );
+ };
+
+ const onUpdate = async( id ) => {
+ setUpdating( prev => [ ...prev, id ]);
+ const post = needsUpdate.find( post => post.ID === id );
+
+ await onProcessData({
+ post,
+ params: {
+ action: 'update'
+ },
+ onSuccess: () => {
+ setUpdating( prev => prev.filter( postId => postId !== id ) );
+ setNeedsUpdate( prev => prev.filter( post => post.ID !== id ) );
+ },
+ onError: ( error ) => {
+ if ( 'content_failed_moderation' === error?.code && undefined !== error.review ) {
+ const newPost = {
+ ...post,
+ review: error.review
+ };
+
+ setPost( newPost );
+ setModerationModalOpen( true );
+ }
+
+ setUpdating( prev => prev.filter( postId => postId !== id ) );
+ }
+ });
+ };
+
+ useEffect( () => {
+ fetchUpdate();
+ }, []);
+
+ return (
+ <>
+ { __( 'A list of all the content that has been added to the knowledge base. It\'s the foundation that supports your chat assistant, enabling it to provide accurate and insightful responses.', 'hyve' ) }
+ +
+
+
+
+
+
+
+
+
+ { __( 'Here, you\'ll see posts that have been updated since their addition to the knowledge base. This page allows you to review these updates and decide if you want to refresh the knowledge your assistant relies on.', 'hyve' ) }
+ +
+
+
+
+
+
+ setSetting( 'api_key', newValue ) }
+ />
+
+
+
+ { __( 'Get an API key', 'hyve' ) }
+
+
+
+
+
+
+ );
+};
+
+export default Advanced;
diff --git a/src/backend/parts/settings/Appearance.js b/src/backend/parts/settings/Appearance.js
new file mode 100644
index 0000000..cc68bbb
--- /dev/null
+++ b/src/backend/parts/settings/Appearance.js
@@ -0,0 +1,84 @@
+/**
+ * WordPress dependencies.
+ */
+import { __ } from '@wordpress/i18n';
+
+
+import {
+ BaseControl,
+ Button,
+ ColorPalette,
+ Panel,
+ PanelRow
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies.
+ */
+import UpsellContainer from '../UpsellContainer';
+
+const colorOptions = [
+ {
+ label: __( 'Chat Background', 'hyve' ),
+ value: 'chat_background',
+ default: '#ffffff'
+ },
+ {
+ label: __( 'Assistant Background', 'hyve' ),
+ value: 'assistant_background',
+ default: '#ecf1fb'
+ },
+ {
+ label: __( 'User Background', 'hyve' ),
+ value: 'user_background',
+ default: '#1155cc'
+ },
+ {
+ label: __( 'Icon Background', 'hyve' ),
+ value: 'icon_background',
+ default: '#1155cc'
+ }
+];
+
+const Appearance = () => {
+ return (
+
+
+
+
+ { colorOptions.map( ( option ) => (
+
+ {} }
+ />
+
+ ) ) }
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Appearance;
diff --git a/src/backend/parts/settings/Assistant.js b/src/backend/parts/settings/Assistant.js
new file mode 100644
index 0000000..8d39ec6
--- /dev/null
+++ b/src/backend/parts/settings/Assistant.js
@@ -0,0 +1,117 @@
+/**
+ * WordPress dependencies.
+ */
+import { __ } from '@wordpress/i18n';
+
+import apiFetch from '@wordpress/api-fetch';
+
+import {
+ Button,
+ Panel,
+ PanelRow,
+ RangeControl
+} from '@wordpress/components';
+
+import {
+ useState
+} from '@wordpress/element';
+
+import {
+ useDispatch,
+ useSelect
+} from '@wordpress/data';
+
+const Assistant = () => {
+ const settings = useSelect( ( select ) => select( 'hyve' ).getSettings() );
+ const { setSetting } = useDispatch( 'hyve' );
+
+ const { createNotice } = useDispatch( 'core/notices' );
+
+ const [ isSaving, setIsSaving ] = useState( false );
+
+ const onSave = async() => {
+ setIsSaving( true );
+
+ try {
+ const response = await apiFetch({
+ path: `${ window.hyve.api }/settings`,
+ method: 'POST',
+ data: {
+ data: settings
+ }
+ });
+
+ if ( response.error ) {
+ throw new Error( response.error );
+ }
+
+ createNotice(
+ 'success',
+ __( 'Settings saved.', 'hyve' ),
+ {
+ type: 'snackbar',
+ isDismissible: true
+ });
+ } catch ( error ) {
+ createNotice(
+ 'error',
+ error,
+ {
+ type: 'snackbar',
+ isDismissible: true
+ });
+ }
+
+ setIsSaving( false );
+ };
+
+ return (
+
+
+
+ setSetting( 'temperature', newValue ) }
+ />
+
+
+
+ setSetting( 'top_p', newValue ) }
+ />
+
+
+
+
+
+
+
+ );
+};
+
+export default Assistant;
diff --git a/src/backend/parts/settings/General.js b/src/backend/parts/settings/General.js
new file mode 100644
index 0000000..151c6a4
--- /dev/null
+++ b/src/backend/parts/settings/General.js
@@ -0,0 +1,172 @@
+/**
+ * WordPress dependencies.
+ */
+import { __ } from '@wordpress/i18n';
+
+import apiFetch from '@wordpress/api-fetch';
+
+import {
+ BaseControl,
+ Button,
+ Panel,
+ PanelRow,
+ TextControl,
+ __experimentalToggleGroupControl as ToggleGroupControl,
+ __experimentalToggleGroupControlOption as ToggleGroupControlOption
+} from '@wordpress/components';
+
+import { useState } from '@wordpress/element';
+
+import {
+ useDispatch,
+ useSelect
+} from '@wordpress/data';
+
+import { applyFilters } from '@wordpress/hooks';
+
+const SuggestedQuestions = () => {
+ return (
+ { __( 'These questions will be displayed in the chat to get the conversation started.', 'hyve' ) }
+ +
+ { Array.from({ length: 3 }).map( ( _, index ) => (
+ {} }
+ />
+ ) ) }
+
+
+
+
+ setSetting( 'chat_enabled', Boolean( newValue ) ) }
+ >
+
+
+
+
+ setSetting( 'welcome_message', newValue ) }
+ />
+
+
+
+ setSetting( 'default_message', newValue ) }
+ />
+
+
+ { applyFilters( 'hyve.suggestedQuestions',
+
+
+
+
+ );
+};
+
+export default General;
diff --git a/src/backend/parts/settings/Moderation.js b/src/backend/parts/settings/Moderation.js
new file mode 100644
index 0000000..cd255c6
--- /dev/null
+++ b/src/backend/parts/settings/Moderation.js
@@ -0,0 +1,123 @@
+/**
+ * WordPress dependencies.
+ */
+import { __ } from '@wordpress/i18n';
+
+import apiFetch from '@wordpress/api-fetch';
+
+import {
+ Button,
+ Panel,
+ PanelRow,
+ RangeControl
+} from '@wordpress/components';
+
+import { useState } from '@wordpress/element';
+
+import {
+ useDispatch,
+ useSelect
+} from '@wordpress/data';
+
+/**
+ * Internal dependencies.
+ */
+import { moderationLabels } from '../../utils';
+
+const Moderation = () => {
+ const settings = useSelect( ( select ) => select( 'hyve' ).getSettings() );
+ const { setSetting } = useDispatch( 'hyve' );
+
+ const { createNotice } = useDispatch( 'core/notices' );
+
+ const [ isSaving, setIsSaving ] = useState( false );
+
+ const onSave = async() => {
+ setIsSaving( true );
+
+ try {
+ const response = await apiFetch({
+ path: `${ window.hyve.api }/settings`,
+ method: 'POST',
+ data: {
+ data: settings
+ }
+ });
+
+ if ( response.error ) {
+ throw new Error( response.error );
+ }
+
+ createNotice(
+ 'success',
+ __( 'Settings saved.', 'hyve' ),
+ {
+ type: 'snackbar',
+ isDismissible: true
+ });
+ } catch ( error ) {
+ createNotice(
+ 'error',
+ error,
+ {
+ type: 'snackbar',
+ isDismissible: true
+ });
+ }
+
+ setIsSaving( false );
+ };
+
+ const onChangeModeration = ( key, value ) => {
+ setSetting( 'moderation_threshold', {
+ ...settings.moderation_threshold,
+ [key]: Number( value ) * 100
+ });
+ };
+
+ return (
+
+
+
+ onChangeModeration( moderation, newValue ) }
+ />
+ ) ) }
+
+
+
+
+
+
+
+ );
+};
+
+export default Moderation;
diff --git a/src/backend/route.js b/src/backend/route.js
new file mode 100644
index 0000000..2dc5819
--- /dev/null
+++ b/src/backend/route.js
@@ -0,0 +1,105 @@
+/**
+ * WordPress dependencies.
+ */
+import { __ } from '@wordpress/i18n';
+
+import {
+ archive,
+ comment,
+ home,
+ settings
+} from '@wordpress/icons';
+
+/**
+ * Internal dependencies.
+ */
+import Home from './parts/Home';
+import KnowledgeBase from './parts/data/KnowledgeBase';
+import AddData from './parts/data/AddData';
+import Updated from './parts/data/Updated';
+import FailedModeration from './parts/data/FailedModeration';
+import Custom from './parts/data/Custom';
+import FAQ from './parts/data/FAQ';
+import Messages from './parts/Messages';
+import General from './parts/settings/General';
+import Appearance from './parts/settings/Appearance';
+import Assistant from './parts/settings/Assistant';
+import Moderation from './parts/settings/Moderation';
+import Advanced from './parts/settings/Advanced';
+
+export const ROUTE_TREE = {
+ home: {
+ label: __( 'Dashboard', 'hyve' ),
+ icon: home,
+ component: Home,
+ disabled: false
+ },
+ data: {
+ label: __( 'Data', 'hyve' ),
+ icon: archive,
+ children: {
+ data: {
+ label: __( 'Knowledge Base', 'hyve' ),
+ component: KnowledgeBase
+ },
+ add: {
+ label: __( 'Add Data', 'hyve' ),
+ component: AddData
+ },
+ update: {
+ label: __( 'Requires Update', 'hyve' ),
+ component: Updated
+ },
+ flagged: {
+ label: __( 'Failed Moderation', 'hyve' ),
+ component: FailedModeration
+ },
+ custom: {
+ label: __( 'Custom Data', 'hyve' ),
+ component: Custom,
+ isPro: true
+ },
+ faq: {
+ label: __( 'FAQ', 'hyve' ),
+ component: FAQ,
+ isPro: true
+ }
+ }
+ },
+ messages: {
+ label: __( 'Messages', 'hyve' ),
+ icon: comment,
+ component: Messages
+ },
+ settings: {
+ label: __( 'Settings', 'hyve' ),
+ icon: settings,
+ children: {
+ settings: {
+ label: __( 'General', 'hyve' ),
+ component: General
+ },
+ appearance: {
+ label: __( 'Appearance', 'hyve' ),
+ component: Appearance,
+ disabled: true,
+ isPro: true
+ },
+ assistant: {
+ label: __( 'Assistant', 'hyve' ),
+ component: Assistant,
+ disabled: true
+ },
+ moderation: {
+ label: __( 'Moderation', 'hyve' ),
+ component: Moderation,
+ disabled: true
+ },
+ advanced: {
+ label: __( 'Advanced', 'hyve' ),
+ component: Advanced,
+ disabled: false
+ }
+ }
+ }
+};
diff --git a/src/backend/store.js b/src/backend/store.js
new file mode 100644
index 0000000..b1037b2
--- /dev/null
+++ b/src/backend/store.js
@@ -0,0 +1,124 @@
+/**
+ * WordPress dependencies.
+ */
+import {
+ createReduxStore,
+ register
+} from '@wordpress/data';
+
+const DEFAULT_STATE = {
+ route: 'home',
+ hasLoaded: false,
+ settings: {},
+ processed: [],
+ hasAPI: Boolean( window.hyve.hasAPIKey ),
+ totalChunks: 0
+};
+
+const actions = {
+ setRoute( route ) {
+ return {
+ type: 'SET_ROUTE',
+ route
+ };
+ },
+ setLoading() {
+ return {
+ type: 'HAS_LOADED'
+ };
+ },
+ setSettings( settings ) {
+ return {
+ type: 'SET_SETTINGS',
+ settings
+ };
+ },
+ setSetting( key, value ) {
+ return {
+ type: 'SET_SETTING',
+ key,
+ value
+ };
+ },
+ setHasAPI( hasAPI ) {
+ return {
+ type: 'SET_HAS_API',
+ hasAPI
+ };
+ },
+ setTotalChunks( totalChunks ) {
+ return {
+ type: 'SET_TOTAL_CHUNKS',
+ totalChunks
+ };
+ }
+};
+
+const selectors = {
+ getRoute( state ) {
+ return state.route;
+ },
+ hasLoaded( state ) {
+ return state.hasLoaded;
+ },
+ getSettings( state ) {
+ return state.settings;
+ },
+ hasAPI( state ) {
+ return state.hasAPI;
+ },
+ getTotalChunks( state ) {
+ return state.totalChunks;
+ },
+ hasReachedLimit( state ) {
+ return hyve.chunksLimit <= Number( state.totalChunks );
+ }
+};
+
+const reducer = ( state = DEFAULT_STATE, action ) => {
+ switch ( action.type ) {
+ case 'SET_ROUTE':
+ return {
+ ...state,
+ route: action.route
+ };
+ case 'HAS_LOADED':
+ return {
+ ...state,
+ hasLoaded: true
+ };
+ case 'SET_SETTINGS':
+ return {
+ ...state,
+ settings: action.settings
+ };
+ case 'SET_SETTING':
+ return {
+ ...state,
+ settings: {
+ ...state.settings,
+ [ action.key ]: action.value
+ }
+ };
+ case 'SET_HAS_API':
+ return {
+ ...state,
+ hasAPI: action.hasAPI
+ };
+ case 'SET_TOTAL_CHUNKS':
+ return {
+ ...state,
+ totalChunks: action.totalChunks
+ };
+ default:
+ return state;
+ }
+};
+
+const store = createReduxStore( 'hyve', {
+ reducer,
+ actions,
+ selectors
+});
+
+register( store );
diff --git a/src/backend/style.scss b/src/backend/style.scss
new file mode 100644
index 0000000..8cc3c42
--- /dev/null
+++ b/src/backend/style.scss
@@ -0,0 +1,41 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
+#wpcontent {
+ padding: 0;
+}
+
+.components-panel__row {
+ display: block;
+ margin: 0;
+ padding: 16px;
+}
+
+.components-snackbar-list {
+ bottom: .5rem;
+ position: fixed;
+ padding-left: 1.5rem;
+}
+
+.components-toggle-group-control {
+ max-width: 12rem;
+}
+
+.components-color-palette__custom-color-text-wrapper {
+ display: none;
+}
+
+.hyve-video {
+ position: relative;
+ padding-bottom: 56.25%; /* 16:9 */
+ height: 0;
+
+ iframe {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ }
+}
diff --git a/src/backend/utils.js b/src/backend/utils.js
new file mode 100644
index 0000000..8dbe97b
--- /dev/null
+++ b/src/backend/utils.js
@@ -0,0 +1,248 @@
+/**
+ * External dependencies.
+ */
+import { getEncoding } from 'js-tiktoken';
+
+/**
+ * WordPress dependencies.
+ */
+import { __ } from '@wordpress/i18n';
+
+import apiFetch from '@wordpress/api-fetch';
+
+import { dispatch } from '@wordpress/data';
+
+const { createNotice } = dispatch( 'core/notices' );
+
+const tokenizer = getEncoding( 'cl100k_base' );
+
+const createChunks = ( text, maxTokens, tokenizer ) => {
+ const sentences = text.split( '. ' );
+
+ const chunks = [];
+ let tokensSoFar = 0;
+ let chunk = [];
+
+ for ( let i = 0; i < sentences.length; i++ ) {
+ const sentence = sentences[i];
+ const tokenLength = tokenizer.encode( ' ' + sentence ).length;
+
+ if ( tokensSoFar + tokenLength > maxTokens ) {
+ chunks.push( chunk.join( '. ' ) + '.' );
+ chunk = [];
+ tokensSoFar = 0;
+ }
+
+ if ( tokenLength > maxTokens ) {
+ continue;
+ }
+
+ chunk.push( sentence );
+ tokensSoFar += tokenLength + 1;
+ }
+
+ if ( 0 < chunk.length ) {
+ chunks.push( chunk.join( '. ' ) + '.' );
+ }
+
+ return chunks;
+};
+
+export const tokenize = ( post, chunk = true ) => {
+ let {
+ ID,
+ title,
+ content
+ } = post;
+
+ content = content.replace( /<[^>]+>/g, '' );
+
+ const tokens = tokenizer.encode( content );
+
+ const article = {
+ 'post_id': ID,
+ 'post_title': title,
+ 'post_content': content,
+ tokens
+ };
+
+ let data = [];
+
+ const chunkedTokenSize = 1000;
+ const tokenLength = article.tokens.length;
+
+ if ( ( tokenLength > chunkedTokenSize ) && chunk ) {
+ const shortenedSentences = createChunks( article.post_content, chunkedTokenSize, tokenizer );
+
+ for ( const shortenedSentence of shortenedSentences ) {
+ const chunkedTokens = tokenizer.encode( article.title + ' ' + shortenedSentence );
+
+ data.push({
+ ...article,
+ 'post_content': shortenedSentence,
+ tokens: chunkedTokens,
+ 'token_count': chunkedTokens.length
+ });
+ }
+ } else {
+ const chunkedTokens = tokenizer.encode( article.title + ' ' + article.post_content );
+
+ data.push({
+ ...article,
+ tokens: chunkedTokens,
+ 'token_count': chunkedTokens.length
+ });
+ }
+
+ return data;
+};
+
+export const moderationLabels = {
+ 'hate': {
+ label: __( 'Hate Speech', 'hyve' ),
+ description: __( 'Content that expresses, incites, or promotes hate based on race, gender, ethnicity, religion, nationality, sexual orientation, disability status, or caste. Hateful content aimed at non-protected groups (e.g., chess players) is harassment.', 'hyve' ),
+ default: 0.7
+ },
+ 'hate/threatening': {
+ label: __( 'Hate Speech/Threatening', 'hyve' ),
+ description: __( 'Hateful content that also includes violence or serious harm towards the targeted group based on race, gender, ethnicity, religion, nationality, sexual orientation, disability status, or caste.', 'hyve' ),
+ default: 0.6
+ },
+ 'harassment': {
+ label: __( 'Harassment', 'hyve' ),
+ description: __( 'Content that expresses, incites, or promotes harassing language towards any target.', 'hyve' ),
+ default: 0.7
+ },
+ 'harassment/threatening': {
+ label: __( 'Harassment/Threatening', 'hyve' ),
+ description: __( 'Harassment content that also includes violence or serious harm towards any target.', 'hyve' ),
+ default: 0.6
+ },
+ 'self-harm': {
+ label: __( 'Self-Harm', 'hyve' ),
+ description: __( 'Content that promotes, encourages, or depicts acts of self-harm, such as suicide, cutting, and eating disorders.', 'hyve' ),
+ default: 0.5
+ },
+ 'self-harm/intent': {
+ label: __( 'Self-Harm with Intent', 'hyve' ),
+ description: __( 'Content where the speaker expresses that they are engaging or intend to engage in acts of self-harm, such as suicide, cutting, and eating disorders.', 'hyve' ),
+ default: 0.5
+ },
+ 'self-harm/instructions': {
+ label: __( 'Self-Harm Instructions', 'hyve' ),
+ description: __( 'Content that encourages performing acts of self-harm, such as suicide, cutting, and eating disorders, or that gives instructions or advice on how to commit such acts.', 'hyve' ),
+ default: 0.5
+ },
+ 'sexual': {
+ label: __( 'Sexual Content', 'hyve' ),
+ description: __( 'Content meant to arouse sexual excitement, such as the description of sexual activity, or that promotes sexual services (excluding sex education and wellness).', 'hyve' ),
+ default: 0.8
+ },
+ 'sexual/minors': {
+ label: __( 'Sexual Content Involving Minors', 'hyve' ),
+ description: __( 'Sexual content that includes an individual who is under 18 years old.', 'hyve' ),
+ default: 0.5
+ },
+ 'violence': {
+ label: __( 'Violence', 'hyve' ),
+ description: __( 'Content that depicts death, violence, or physical injury.', 'hyve' ),
+ default: 0.7
+ },
+ 'violence/graphic': {
+ label: __( 'Graphic Violence', 'hyve' ),
+ description: __( 'Content that depicts death, violence, or physical injury in graphic detail.', 'hyve' ),
+ default: 0.8
+ }
+};
+
+export const onProcessData = async({
+ post = {},
+ type = 'core',
+ params = {},
+ onSuccess = () => {},
+ onError = () => {}
+}) => {
+ const chunks = tokenize( post );
+ let bailOut = false;
+
+ try {
+ for ( const data of chunks ) {
+ if ( bailOut ) {
+ break;
+ }
+
+ let response = '';
+
+ if ( 'knowledge' === type ) {
+ if ( post.ID ) {
+ response = await apiFetch({
+ path: `${ window.hyve.api }/knowledge/${ post.ID }`,
+ method: 'POST',
+ data: {
+ data,
+ ...params
+ }
+ });
+ } else {
+ response = await apiFetch({
+ path: `${ window.hyve.api }/knowledge`,
+ method: 'POST',
+ data: {
+ data,
+ ...params
+ }
+ });
+ }
+ } else {
+ response = await apiFetch({
+ path: `${ window.hyve.api }/data`,
+ method: 'POST',
+ data: {
+ data,
+ ...params
+ }
+ });
+ }
+
+ if ( response.error ) {
+ bailOut = true;
+ throw response;
+ }
+ }
+
+ createNotice(
+ 'success',
+ __( 'Post has been updated.', 'hyve' ),
+ {
+ type: 'snackbar',
+ isDismissible: true
+ }
+ );
+
+ onSuccess();
+ } catch ( error ) {
+ createNotice(
+ 'error',
+ error.error,
+ {
+ type: 'snackbar',
+ isDismissible: true
+ }
+ );
+
+ onError( error );
+ }
+};
+
+
+/**
+ * Helper function to add proper utm.
+ * @param {string} url Url to add utms.
+ * @param {string} area Descriptive name of the link
+ * @returns {string}
+ */
+export const setUtm = ( urlAdress, linkArea ) => {
+ const urlLink = new URL( urlAdress );
+ urlLink.searchParams.set( 'utm_campaign', linkArea );
+ return urlLink.toString();
+};
diff --git a/src/block/block.json b/src/block/block.json
new file mode 100644
index 0000000..f553db0
--- /dev/null
+++ b/src/block/block.json
@@ -0,0 +1,36 @@
+{
+ "$schema": "https://schemas.wp.org/trunk/block.json",
+ "apiVersion": 3,
+ "name": "hyve/chat",
+ "version": "1.0.0",
+ "title": "Hyve Chat",
+ "category": "widgets",
+ "attributes": {
+ "variant": {
+ "type": "string"
+ }
+ },
+ "supports": {
+ "html": false
+ },
+ "variations": [
+ {
+ "name": "default",
+ "title": "Hyve Chat - Inline",
+ "isDefault": true
+ },
+ {
+ "name": "floating",
+ "title": "Hyve Chat - Chat Bubble",
+ "description": "A floating chat bubble that opens the chat window when clicked.",
+ "attributes": {
+ "variant": "floating"
+ }
+ }
+ ],
+ "textdomain": "hyve",
+ "editorScript": "file:./index.js",
+ "render": "file:./render.php",
+ "style": "hyve-styles",
+ "viewScript": "hyve-lite-scripts"
+}
diff --git a/src/block/index.js b/src/block/index.js
new file mode 100644
index 0000000..e2d2372
--- /dev/null
+++ b/src/block/index.js
@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies.
+ */
+import { __ } from '@wordpress/i18n';
+
+import { registerBlockType } from '@wordpress/blocks';
+
+import { useBlockProps } from '@wordpress/block-editor';
+
+import { Placeholder } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+
+registerBlockType( metadata.name, {
+ edit: () => {
+ const blockProps = useBlockProps();
+
+ return (
+ { __( 'With the moderation functionality, you can check whether your content is potentially harmful. Users can use it to identify content that might be harmful and take action.', 'hyve' ) }
+ +{ __( 'Occasionally, OpenAI\'s Moderation system may incorrectly flag content as a violation—these are false positives. Such errors can occur because automated systems sometimes lack the necessary context to interpret nuances accurately. If your content is flagged but you believe it adheres to the guidelines, please manually review it. Should you determine it does not violate the content policies, you can also override the moderation decisions.', 'hyve' ) }
+ + { Object.keys( moderationLabels ).map( moderation => ( +
+
+ { __( 'Hyve Chatbot will appear here. No further action needed.', 'hyve' ) }
+
+
+ );
+ },
+ save: () => null
+});
diff --git a/src/block/render.php b/src/block/render.php
new file mode 100644
index 0000000..9e42bda
--- /dev/null
+++ b/src/block/render.php
@@ -0,0 +1,25 @@
+
+
+ $hyve_id,
+ )
+ )
+);
+?>
+>
diff --git a/src/frontend/App.js b/src/frontend/App.js
new file mode 100644
index 0000000..d0cf8f8
--- /dev/null
+++ b/src/frontend/App.js
@@ -0,0 +1,462 @@
+/**
+ * WordPress dependencies.
+ */
+import apiFetch from '@wordpress/api-fetch';
+
+import { addQueryArgs } from '@wordpress/url';
+
+const clickAudio = new Audio( hyve.audio.click );
+const pingAudio = new Audio( hyve.audio.ping );
+
+class App {
+ constructor() {
+ this.isInitialToggle = true;
+ this.hasSuggestions = false;
+ this.messages = [];
+ this.threadID = null;
+ this.runID = null;
+ this.recordID = null;
+
+ this.renderUI();
+ this.setupListeners();
+ this.restoreStorage();
+ }
+
+ restoreStorage() {
+ if ( null === window.localStorage.getItem( 'hyve-chat' ) ) {
+ return;
+ }
+
+ const storage = JSON.parse( window.localStorage.getItem( 'hyve-chat' ) );
+
+ if ( ! storage.timestamp ) {
+ return;
+ }
+
+ const currentDate = new Date();
+ const storageDate = new Date( storage.timestamp );
+
+ if ( 86400000 < currentDate - storageDate || null === storage.threadID ) {
+ window.localStorage.removeItem( 'hyve-chat' );
+ return;
+ }
+
+ this.messages = storage.messages;
+ this.threadID = storage.threadID;
+ this.recordID = storage.recordID;
+ this.isInitialToggle = false;
+
+ this.messages.forEach( message => {
+ this.addMessage( message.time, message.message, message.sender, message.id, false );
+ });
+ }
+
+ updateStorage() {
+ const messages = this.messages.filter( message => null === message.id ).slice( -20 );
+
+ window.localStorage.setItem( 'hyve-chat', JSON.stringify({
+ timestamp: new Date(),
+ messages,
+ threadID: this.threadID,
+ recordID: this.recordID
+ }) );
+ }
+
+ add( message, sender, id = null ) {
+ const time = new Date();
+
+ message = this.sanitize( message );
+
+ this.messages.push({ time, message, sender, id });
+ this.addMessage( time, message, sender, id );
+
+ this.updateStorage();
+
+ if ( 'user' !== sender ) {
+ return;
+ }
+
+ this.sendRequest( message );
+
+ if ( this.hasSuggestions ) {
+ this.removeSuggestions();
+ }
+ }
+
+ sanitize( input ) {
+ const tempDiv = document.createElement( 'div' );
+ tempDiv.textContent = input;
+ return tempDiv.innerHTML;
+ }
+
+ setThreadID( threadID ) {
+ this.threadID = threadID;
+ }
+
+ setRunID( runID ) {
+ this.runID = runID;
+ }
+
+ setRecordID( recordID ) {
+ this.recordID = recordID;
+ }
+
+ setLoading( isLoading ) {
+ const chatInputText = document.querySelector( '#hyve-text-input' );
+ const chatSendButton = document.querySelector( '.hyve-send-button button' );
+
+ chatInputText.disabled = isLoading;
+ chatSendButton.disabled = isLoading;
+ }
+
+ async getResponse( message ) {
+ try {
+ const response = await apiFetch({
+ path: addQueryArgs( `${ window.hyve.api }/chat`, {
+ 'thread_id': this.threadID,
+ 'run_id': this.runID,
+ 'record_id': this.recordID,
+ message
+ }),
+ headers: {
+ 'Cache-Control': 'no-cache'
+ }
+ });
+
+ if ( response.error ) {
+ this.add( 'Sorry, I am not able to process your request at the moment. Please try again.', 'bot' );
+ this.removeMessage( this.runID );
+ return;
+ }
+
+ if ( 'in_progress' === response.status ) {
+ setTimeout( async() => {
+ await this.getResponse( message );
+ }, 2000 );
+
+ return;
+ }
+
+ this.removeMessage( this.runID );
+
+ if ( 'completed' === response.status ) {
+ this.add( response.message, 'bot' );
+ this.setLoading( false );
+ }
+
+ if ( 'failed' === response.status ) {
+ this.add( 'Sorry, I am not able to process your request at the moment. Please try again.', 'bot' );
+ this.setLoading( false );
+ }
+ } catch ( error ) {
+ this.add( 'Sorry, I am not able to process your request at the moment. Please try again.', 'bot' );
+ this.setLoading( false );
+ }
+ }
+
+ async sendRequest( message ) {
+ try {
+ this.setLoading( true );
+
+ const response = await apiFetch({
+ path: `${ window.hyve.api }/chat`,
+ method: 'POST',
+ data: {
+ message,
+ ...( null !== this.threadID ? { 'thread_id': this.threadID } : {}),
+ ...( null !== this.recordID ? { 'record_id': this.recordID } : {})
+ }
+ });
+
+ if ( response.error ) {
+ this.add( 'Sorry, I am not able to process your request at the moment. Please try again.', 'bot' );
+ this.setLoading( false );
+ return;
+ }
+
+ if ( response.thread_id !== this.threadID ) {
+ this.setThreadID( response.thread_id );
+ }
+
+ if ( response.record_id !== this.recordID ) {
+ this.setRecordID( response.record_id );
+ }
+
+ this.setRunID( response.query_run );
+
+ this.add( 'Typing...', 'bot', response.query_run );
+
+ await this.getResponse( message );
+ } catch ( error ) {
+ this.add( 'Sorry, I am not able to process your request at the moment. Please try again.', 'bot' );
+ this.setLoading( false );
+ }
+ }
+
+ addAudioPlayback( audioElement ) {
+ audioElement.play();
+ }
+
+ addMessage( time, message, sender, id, sound = true ) {
+ const chatMessageBox = document.getElementById( 'hyve-message-box' );
+
+ const datetime = new Date( time );
+
+ const date = `${ String( datetime.getDate() ).padStart( 2, 0 ) }/${ String( datetime.getMonth() + 1 ).padStart( 2, 0 ) }/${ datetime.getFullYear() } ${ String( datetime.getHours() ).padStart( 2, 0 ) }:${ String( datetime.getMinutes() ).padStart( 2, 0 ) } ${ 12 <= datetime.getHours() ? 'PM' : 'AM' }`;
+
+ let messageHTML = `${message}
`; + + if ( null === id ) { + messageHTML += ``; + } + + const messageDiv = this.createElement( 'div', { + className: `hyve-${sender}-message`, + innerHTML: messageHTML + }); + + if ( 'bot' === sender && window.hyve.colors?.assistant_background ) { + messageDiv.classList.add( 'is-dark' ); + } + + if ( 'user' === sender && window.hyve.colors?.user_background ) { + messageDiv.classList.add( 'is-dark' ); + } + + if ( 'user' === sender && ! window.hyve.colors?.user_background && undefined !== window.hyve.colors?.user_background ) { + messageDiv.classList.add( 'is-light' ); + } + + if ( null !== id ) { + messageDiv.id = `hyve-message-${id}`; + } + + chatMessageBox.appendChild( messageDiv ); + chatMessageBox.scrollTop = chatMessageBox.scrollHeight; + + if ( ! sound ) { + return; + } + + this.addAudioPlayback( pingAudio ); + } + + removeMessage( id ) { + const message = document.getElementById( `hyve-message-${id}` ); + if ( message ) { + message.remove(); + } + } + + toggleChatWindow( isOpen ) { + const elements = [ 'hyve-open', 'hyve-close', 'hyve-window' ].map( id => document.getElementById( id ) ); + + if ( isOpen ) { + elements[0].style.display = 'none'; + elements[1].style.display = 'block'; + elements[2].style.display = 'block'; + + const chatMessageBox = document.getElementById( 'hyve-message-box' ); + chatMessageBox.scrollTop = chatMessageBox.scrollHeight; + } else { + elements[0].style.display = 'block'; + elements[1].style.display = 'none'; + elements[2].style.display = 'none'; + } + + this.addAudioPlayback( clickAudio ); + + if ( window.hyve.welcome && '' !== window.hyve.welcome && this.isInitialToggle ) { + this.isInitialToggle = false; + const welcomeMessage = window.hyve.welcome; + + setTimeout( () => { + this.add( welcomeMessage, 'bot' ); + this.addSuggestions(); + }, 1000 ); + } + } + + addSuggestions() { + const questions = window.hyve?.predefinedQuestions; + + if ( ! Array.isArray( questions ) ) { + return; + } + + const filteredQuestions = questions.filter( question => '' !== question.trim() ); + + if ( 0 === filteredQuestions.length ) { + return; + } + + const chatMessageBox = document.getElementById( 'hyve-message-box' ); + + let suggestions = [ + 'Not sure where to start?' + ]; + + filteredQuestions.forEach( question => { + suggestions.push( `` ); + }); + + const messageDiv = this.createElement( 'div', { + className: 'hyve-suggestions', + innerHTML: suggestions.join( '' ) + }); + + + if ( window.hyve.colors?.user_background ) { + messageDiv.classList.add( 'is-dark' ); + } + + if ( ! window.hyve.colors?.user_background && undefined !== window.hyve.colors?.user_background ) { + messageDiv.classList.add( 'is-light' ); + } + + const suggestionButtons = messageDiv.querySelectorAll( 'button' ); + + suggestionButtons.forEach( button => { + button.addEventListener( 'click', () => { + this.add( button.textContent, 'user' ); + }); + }); + + chatMessageBox.appendChild( messageDiv ); + + this.hasSuggestions = true; + } + + removeSuggestions() { + const suggestions = document.querySelector( '.hyve-suggestions' ); + + if ( suggestions ) { + suggestions.remove(); + this.hasSuggestions = false; + } + } + + setupListeners() { + const chatOpen = document.getElementById( 'hyve-open' ); + const chatClose = document.getElementById( 'hyve-close' ); + const chatInputText = document.getElementById( 'hyve-text-input' ); + const chatSendButton = document.getElementById( 'hyve-send-button' ); + + if ( ! chatInputText || ! chatSendButton ) { + return; + } + + if ( chatOpen && chatClose ) { + chatOpen.addEventListener( 'click', () => this.toggleChatWindow( true ) ); + chatClose.addEventListener( 'click', () => this.toggleChatWindow( false ) ); + } + + chatInputText.addEventListener( 'keydown', ( event ) => { + if ( 13 === event.keyCode ) { + if ( '' !== chatInputText.value.trim() ) { + this.add( chatInputText.value, 'user' ); + chatInputText.value = ''; + } + } + }); + + chatSendButton.addEventListener( 'click', () => { + if ( '' !== chatInputText.value.trim() ) { + this.add( chatInputText.value, 'user' ); + chatInputText.value = ''; + } + }); + } + + createElement( tag, props, ...children ) { + const element = document.createElement( tag ); + Object.assign( element, props ); + children.forEach( child => { + if ( 'string' === typeof child ) { + element.appendChild( document.createTextNode( child ) ); + } else { + element.appendChild( child ); + } + }); + return element; + } + + renderUI() { + const chatOpenButton = this.createElement( 'button', { + className: 'collapsible open', + innerText: 'đź’¬' + }); + + const chatOpen = this.createElement( 'div', { className: 'hyve-bar-open', id: 'hyve-open' }, chatOpenButton ); + + const chatCloseButton = this.createElement( 'button', { + className: 'collapsible close', + innerHTML: '' + }); + + const chatClose = this.createElement( 'div', { className: 'hyve-bar-close', id: 'hyve-close' }, chatCloseButton ); + + if ( window.hyve.colors?.icon_background ) { + chatClose.classList.add( 'is-dark' ); + } + + if ( ! window.hyve.colors?.icon_background && undefined !== window.hyve.colors?.icon_background ) { + chatClose.classList.add( 'is-light' ); + } + + const chatWindow = this.createElement( 'div', { className: 'hyve-window', id: 'hyve-window' }); + + if ( window.hyve.colors?.chat_background ) { + chatWindow.classList.add( 'is-dark' ); + } + + const chatMessageBox = this.createElement( 'div', { className: 'hyve-message-box', id: 'hyve-message-box' }); + + const chatInputBox = this.createElement( 'div', { className: 'hyve-input-box' }); + const chatWrite = this.createElement( 'div', { className: 'hyve-write' }); + + const chatInputText = this.createElement( 'input', { + className: 'hyve-input-text', + type: 'text', + id: 'hyve-text-input', + placeholder: 'Write a reply...' + }); + + const chatSendButton = this.createElement( + 'div', + { + className: 'hyve-send-button', + id: 'hyve-send-button' + }, + this.createElement( 'button', { className: 'hyve-send-message', innerHTML: '' }) + ); + + chatWindow.appendChild( chatMessageBox ); + chatWrite.appendChild( chatInputText ); + chatInputBox.appendChild( chatWrite ); + chatInputBox.appendChild( chatSendButton ); + chatWindow.appendChild( chatInputBox ); + + const chatExists = document.querySelectorAll( '#hyve-chat' ); + + if ( true === Boolean( window?.hyve?.isEnabled ) || 0 < chatExists.length ) { + chatExists.forEach( element => { + element.remove(); + }); + + document.body.appendChild( chatWindow ); + document.body.appendChild( chatOpen ); + document.body.appendChild( chatClose ); + + return; + } + + const inlineChat = document.querySelector( '#hyve-inline-chat' ); + + if ( inlineChat ) { + inlineChat.appendChild( chatWindow ); + } + } +}; + +export default App; diff --git a/src/frontend/index.js b/src/frontend/index.js new file mode 100644 index 0000000..76f7c62 --- /dev/null +++ b/src/frontend/index.js @@ -0,0 +1,14 @@ +/** + * WordPress dependencies. + */ +import domReady from '@wordpress/dom-ready'; + +/** + * Internal dependencies. + */ +import './style.scss'; +import App from './App'; + +domReady( () => { + new App(); +}); diff --git a/src/frontend/style.scss b/src/frontend/style.scss new file mode 100644 index 0000000..4b5c34d --- /dev/null +++ b/src/frontend/style.scss @@ -0,0 +1,364 @@ +.hyve-bar-open, +.hyve-bar-close { + text-align: center; + position: fixed; + bottom: 40px; + right: 50px; + z-index: 9999999; + + &.is-dark { + .close { + svg { + fill: #fff; + } + } + } + + &.is-light { + .close { + svg { + fill: #000; + } + } + } + + .open, + .close { + background-color: var( --icon_background, #1155cc ); + font-size: 24px; + width: 70px; + cursor: pointer; + height: 70px; + padding: 15px; + border-radius: 50%; + border-style: none; + vertical-align: middle; + box-shadow: rgb(0 0 0 / 10%) 0px 1px 6px, rgb(0 0 0 / 20%) 0px 2px 24px; + } + + .close { + display: flex; + justify-content: center; + align-items: center; + + svg { + fill: #fff; + } + } +} + +.hyve-bar-close { + display: none; +} + +#hyve-inline-chat { + .hyve-window { + display: block; + position: relative; + bottom: 0; + right: 0; + box-shadow: none; + border: 1px solid lightgray; + width: auto; + z-index: 0; + } +} + +.hyve-window { + display: none; + box-sizing: border-box; + width: 350px; + height: 480px; + border-radius: 10px; + background-color: var( --chat_background, #ffffff ); + padding: 16px; + z-index: 9999999; + position: fixed; + bottom: 120px; + right: 54px; + box-shadow: rgb(0 0 0 / 10%) 0px 1px 6px, rgb(0 0 0 / 20%) 0px 2px 24px; + + &.is-dark { + .hyve-credits { + color: #e5e5e5; + + a { + color: #e5e5e5; + } + } + + .hyve-message-box { + .hyve-bot-message, + .hyve-user-message { + time { + color: #e5e5e5; + } + } + } + + .hyve-input-box { + .hyve-write { + input[type="text"] { + color: #ffffff; + + &::placeholder { + color: #e5e5e5; + } + } + } + + .hyve-send-button { + button { + &:hover, + &:focus { + svg { + fill: #e5e5e5; + } + } + + &:disabled { + fill: #ffffff; + } + + svg { + fill: #ffffff; + } + } + } + } + + .hyve-message-box { + .hyve-suggestions { + span { + color: #ffffff; + } + } + } + } + + &.is-light { + .hyve-message-box { + .hyve-suggestions { + span { + color: #202020; + } + } + } + } + + .hyve-credits { + text-align: center; + font-size: 10px; + color: #202020; + line-height: 1; + + a { + text-decoration: none; + color: #202020; + } + } + + .hyve-input-box { + display: flex; + justify-content: space-between; + gap: 1rem; + position: absolute; + font-size: 12px; + bottom: 0; + left: 0; + right: 0; + padding: 18px 30px; + border-top: 1px solid lightgray; + + .hyve-write { + float: left; + flex-grow: 100; + + input[type="text"] { + background-color: var( --chat_background, #ffffff ); + color: #202020; + border: none; + outline: none; + box-shadow: none; + font-size: 14px; + padding: 0; + height: 24px; + color: #202020; + + &::placeholder { + color: #808080; + } + } + } + + .hyve-send-button { + float: right; + border: none; + outline: none; + + button { + border: none; + background-color: transparent; + cursor: pointer; + outline: none; + padding: 0; + + &:hover, + &:focus { + svg { + fill: #5B5B66; + } + } + + &:disabled { + fill: #808080; + cursor: default; + } + + svg { + fill: #808080; + width: 24px; + height: 24px; + } + } + } + } +} + +.hyve-message-box { + height: 380px; + width: 100%; + padding-right: 5px; + overflow: auto; + display: flex; + flex-direction: column; + position: relative; + + .hyve-user-message, + .hyve-bot-message { + display: flex; + flex-direction: column; + + p { + font-size: 13px; + display: flex; + padding: 10px; + border-radius: 5px; + width: 100%; + overflow-wrap: break-word; + margin: 0; + } + + time { + font-size: 10px; + padding: 4px; + color: #000; + } + } + + .hyve-user-message { + margin-left: auto; + max-width: 75%; + min-width: 50%; + word-break: break-word; + margin-top: 14px; + margin-bottom: 14px; + color: white; + align-items: flex-end; + + &.is-dark { + color: #ffffff; + } + + &.is-light { + color: #000000; + } + + p { + background-color: var( --user_background, #1155cc ); + justify-content: flex-end; + } + } + + .hyve-bot-message { + margin-right: auto; + color: #000; + max-width: 75%; + min-width: 50%; + word-break: break-word; + margin-top: 14px; + margin-bottom: 14px; + border-radius: 5px; + align-items: flex-start; + + &.is-dark { + color: #ffffff; + } + + p { + background-color: var( --assistant_background, #ecf1fb ); + justify-content: flex-start; + } + } + + .hyve-suggestions { + display: flex; + flex-wrap: wrap; + justify-content: right; + position: absolute; + bottom: 0; + right: 0; + padding: 20px 0; + gap: 4px; + + &.is-dark { + button { + background-color: var( --user_background, #1155cc); + color: #ffffff; + } + } + + &.is-light { + button { + background-color: var( --user_background, #1155cc); + color: #202020; + } + } + + span { + font-size: 12px; + font-weight: 500; + flex: 0 0 100%; + text-align: right; + color: #202020; + } + + button { + background: #ecf1fb99; + box-shadow: none; + border: 0.5px solid rgb(145, 145, 145); + padding: 6px 8px; + border-radius: 8px; + cursor: pointer; + } + } +} + +@media screen and (max-width: 396px) { + .hyve-bar-open, + .hyve-bar-close { + bottom: 20px; + right: 21px; + + &.hyve-bar-close { + bottom: 21px; + right: 25px; + } + } + + .hyve-window { + right: 14px; + bottom: 87px; + width: 80% + } +} diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..31e3c78 --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,6 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: [ './src/style.scss', './src/*.js', './src/**/*.js' ], + theme: {}, + plugins: [] +}; diff --git a/tests/php/static-analysis-stubs/hyve-lite.php b/tests/php/static-analysis-stubs/hyve-lite.php new file mode 100644 index 0000000..c306f87 --- /dev/null +++ b/tests/php/static-analysis-stubs/hyve-lite.php @@ -0,0 +1,11 @@ +