@pega/cosmos-react-demos 7.11.3 → 7.11.4-10

package/jsx/work/ArticleList/ArticleList.stories.jsx

@@ -1,882 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { action } from '@storybook/addon-actions';
-import { createUID, menuHelpers, registerIcon, escapeRegExp, HTML, Flex, Button, Count } from '@pega/cosmos-react-core';
-import * as thumbsUpSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up-solid.icon';
-import * as thumbsDownSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down-solid.icon';
-import * as bookOpen from '@pega/cosmos-react-core/lib/components/Icon/icons/book-open.icon';
-import { ArticleList, ArticleSummary, ArticleListFilter } from '@pega/cosmos-react-work';
-import { ArticleMockData } from '../Article/Article.mocks';
-import { suggestedMock, followedMock, searchMock, ArticleBuddyMockData, searchSemanticArticles, semanticFilterOptions, BuddyListMockData } from './ArticleList.mocks';
-export default {
-    title: 'Work/ArticleList',
-    component: ArticleList,
-    subcomponents: { ArticleSummary, ArticleListFilter },
-    parameters: {
-        layout: 'fullscreen'
-    }
-};
-registerIcon(thumbsUpSolidIcon, thumbsDownSolidIcon, bookOpen);
-export const ArticleListDemo = (args) => {
-    const [searchVal, setSearchVal] = useState('');
-    const [activeTab, setActiveTab] = useState('Suggested');
-    const [loading, setLoading] = useState(false);
-    const [categoryList, setCategoryList] = useState([]);
-    const [sortBy, setSortBy] = useState([]);
-    const [articles, setArticles] = useState([]);
-    const [aiArticles, setAiArticles] = useState();
-    const [quickFilters, setQuickFilters] = useState([]);
-    const [loadingMore, isSetLoadMore] = useState(false);
-    const [hasMore, setHasMore] = useState(true);
-    const [filterCategoryValue, setFilterCategoryValue] = useState('');
-    const [buddyContent, setBuddyContent] = useState();
-    const [buddyLoader, setBuddyLoader] = useState(false);
-    const [commentVal, setCommentVal] = useState('');
-    const [buddyReaction, setBuddyReaction] = useState(undefined);
-    const [showThankYouMessage, setShowThankYouMessage] = useState(false);
-    const [listResult, setListResult] = useState();
-    const [fullList, setFullList] = useState();
-    const [showMore, setShowMore] = useState(false);
-    const [activeArticleByTab, setActiveArticleByTab] = useState({});
-    const [semanticFilterList, setSemanticFilterList] = useState(semanticFilterOptions);
-    const [initialMessage, setInitialMessage] = useState(true);
-    const selectedSortByOption = useMemo(() => menuHelpers.getSelected(sortBy)[0], [sortBy]);
-    const selectSortByOption = useCallback((id) => {
-        setSortBy(cur => menuHelpers.selectItem(cur, id, 'single-select'));
-    }, []);
-    const selectedCategory = useMemo(() => {
-        return menuHelpers.getSelected(categoryList).map(item => ({ text: item.primary, id: item.id }));
-    }, [categoryList]);
-    const categoryListToRender = useMemo(() => {
-        return menuHelpers.mapTree(categoryList, item => ({
-            ...item,
-            selected: !!item.selected
-        }));
-    }, [categoryList]);
-    const toggleItem = (id) => {
-        setCategoryList(cur => menuHelpers.toggleSelected(cur, id, 'multi-select'));
-    };
-    const onReaction = (articleId, reaction) => {
-        setArticles(prevArticles => {
-            const itemIndex = prevArticles.findIndex(article => article?.articleId === articleId);
-            const updatedData = [...prevArticles];
-            if (itemIndex !== -1) {
-                const currentItemFeedback = updatedData[itemIndex].feedback;
-                if (currentItemFeedback) {
-                    const likeValue = currentItemFeedback?.likes || 0;
-                    const dislikeValue = currentItemFeedback?.dislikes || 0;
-                    if (!reaction) {
-                        if (currentItemFeedback.reaction === 'liked') {
-                            currentItemFeedback.likes = likeValue - 1;
-                        }
-                        else {
-                            currentItemFeedback.dislikes = dislikeValue - 1;
-                        }
-                        currentItemFeedback.reaction = undefined;
-                    }
-                    if (reaction === 'liked') {
-                        if (currentItemFeedback?.reaction === 'disliked') {
-                            currentItemFeedback.dislikes = dislikeValue - 1;
-                        }
-                        currentItemFeedback.likes = likeValue + 1;
-                        currentItemFeedback.reaction = 'liked';
-                    }
-                    if (reaction === 'disliked') {
-                        if (currentItemFeedback.reaction === 'liked') {
-                            currentItemFeedback.likes = likeValue - 1;
-                        }
-                        currentItemFeedback.dislikes = dislikeValue + 1;
-                        currentItemFeedback.reaction = 'disliked';
-                    }
-                }
-            }
-            return updatedData;
-        });
-    };
-    const openArticle = (id, tab, title, isBuddy = false) => {
-        let article = {
-            backNavigation: {
-                title: 'Back to list',
-                onClick: () => {
-                    setActiveArticleByTab(prev => {
-                        return { ...prev, [activeTab]: undefined };
-                    });
-                }
-            },
-            title,
-            content: <HTML content={ArticleBuddyMockData.content}/>,
-            references: buddyContent?.references,
-            disclaimer: ArticleBuddyMockData.disclaimer
-        };
-        if (!isBuddy) {
-            article = {
-                articleId: id,
-                backNavigation: {
-                    title: 'Back to list',
-                    onClick: () => {
-                        setActiveArticleByTab(prev => {
-                            return { ...prev, [activeTab]: undefined };
-                        });
-                    }
-                },
-                primaryActions: [
-                    {
-                        icon: 'star',
-                        label: 'Follow',
-                        id: createUID(),
-                        onClick: articleId => {
-                            action('Follow')(articleId);
-                        }
-                    },
-                    {
-                        icon: 'open',
-                        label: 'Open',
-                        id: createUID(),
-                        onClick: articleId => {
-                            action('Open')(articleId);
-                        }
-                    }
-                ],
-                secondaryActions: [
-                    {
-                        text: 'Send in email',
-                        id: 'action1',
-                        onClick: action('Action')
-                    },
-                    {
-                        text: 'Send in chat',
-                        id: 'action2',
-                        onClick: action('Action')
-                    }
-                ],
-                content: <HTML content={ArticleMockData.fullArticleContent.content}/>,
-                title,
-                meta: {
-                    category: ArticleMockData.fullArticleContent.meta.category,
-                    publishedDate: ArticleMockData.fullArticleContent.meta.publishedDate
-                },
-                footer: {
-                    tags: {
-                        list: [
-                            {
-                                id: 'Retail banking',
-                                tagName: '#Retail_banking'
-                            },
-                            {
-                                id: 'Billing',
-                                tagName: '#Billing'
-                            },
-                            {
-                                id: '223444',
-                                tagName: '#CSR_Skills'
-                            },
-                            {
-                                id: '223446',
-                                tagName: '#Premium_Customers'
-                            },
-                            {
-                                id: '223447',
-                                tagName: '#Rare_Customers'
-                            },
-                            {
-                                id: '223448',
-                                tagName: '#Finance_Customers'
-                            }
-                        ],
-                        onTagClick: action('Tag clicked')
-                    },
-                    relatedLinks: [
-                        { title: 'Retail banking for beginners', href: 'https://pega.com' },
-                        { title: 'How to handle premium customers', href: 'https://pega.com' }
-                    ],
-                    relatedArticles: [
-                        {
-                            title: 'What are the implications of change in billing cycle',
-                            onClick: action('Related article'),
-                            id: createUID()
-                        },
-                        {
-                            title: 'What is the best billing cycle for premium customers',
-                            onClick: action('Related article'),
-                            id: createUID()
-                        },
-                        {
-                            title: 'How to enable automatic bill payment',
-                            onClick: action('Related article'),
-                            id: createUID()
-                        }
-                    ]
-                },
-                loading: false
-            };
-        }
-        setActiveArticleByTab(prev => {
-            return { ...prev, [tab]: article };
-        });
-    };
-    const updateArticles = (mockArticles) => {
-        const data = Object.values(mockArticles);
-        return data.map(({ isLiked = false, isFollowed = false, articleId = '', title, href, abstract, meta, feedback, quickFilters: quickFilterTags }) => {
-            const actionObj = [{ id: '1', text: 'Edit' }];
-            if (isLiked) {
-                actionObj.push({ id: '3', text: 'Dislike' });
-            }
-            else {
-                actionObj.push({ id: '3', text: 'Like' });
-            }
-            if (isFollowed) {
-                actionObj.push({ id: '4', text: 'Unfollow' });
-            }
-            else {
-                actionObj.push({ id: '4', text: 'Follow' });
-            }
-            return {
-                articleId,
-                href,
-                title,
-                abstract,
-                onTitleClick: () => {
-                    action('onTitleClick')(articleId);
-                    openArticle(articleId, activeTab, title);
-                },
-                actions: actionObj,
-                meta,
-                feedback,
-                quickFilters: args.showQuickFilters && quickFilterTags?.length
-                    ? quickFilterTags?.map(obj => {
-                        return obj;
-                    })
-                    : []
-            };
-        });
-    };
-    const fetchArticleContent = activeTabName => {
-        return new Promise(resolve => {
-            let activeTabContent = null;
-            if (!activeTabName || activeTabName === 'Search')
-                activeTabContent = { ...searchMock };
-            else if (activeTabName === 'Suggested')
-                activeTabContent = { ...suggestedMock };
-            else if (activeTabName === 'Followed')
-                activeTabContent = { ...followedMock };
-            setTimeout(() => {
-                if (activeTabContent) {
-                    resolve({
-                        articles: updateArticles(activeTabContent.articles),
-                        aiSuggestedArticles: activeTabContent.aiSuggestions ?? undefined,
-                        category: activeTabContent.category || [],
-                        sortBy: activeTabContent.sortBy || []
-                    });
-                }
-            }, 500);
-        });
-    };
-    searchMock.articles = searchMock.articles.map(article => {
-        return {
-            ...article,
-            feedback: {
-                ...article.feedback,
-                id: article.articleId,
-                onReaction
-            }
-        };
-    });
-    suggestedMock.articles = suggestedMock.articles.map(article => {
-        return {
-            ...article,
-            feedback: {
-                ...article.feedback,
-                id: article.articleId,
-                onReaction
-            }
-        };
-    });
-    followedMock.articles = followedMock.articles.map(article => {
-        return {
-            ...article,
-            feedback: {
-                ...article.feedback,
-                id: article.articleId,
-                onReaction
-            }
-        };
-    });
-    const updateBuddyArticles = (mockBuddyArticle) => {
-        const actionItems = [
-            { id: '1', text: 'Share' },
-            { id: '2', text: 'Copy' }
-        ];
-        return {
-            title: mockBuddyArticle?.title,
-            content: mockBuddyArticle?.content,
-            references: mockBuddyArticle?.references,
-            disclaimer: mockBuddyArticle?.disclaimer,
-            actions: actionItems
-        };
-    };
-    const fetchBuddySearchResult = () => {
-        return new Promise(resolve => {
-            setTimeout(() => {
-                resolve({
-                    data: updateBuddyArticles(ArticleBuddyMockData)
-                });
-            }, 1000);
-        });
-    };
-    const getBuddyResults = async () => {
-        setBuddyLoader(true);
-        const res = await fetchBuddySearchResult();
-        setBuddyContent(res.data);
-        setBuddyLoader(false);
-    };
-    const buddyQuery = {
-        label: 'Ask Bubby',
-        placeholder: 'Ask your question here...',
-        value: searchVal,
-        onChange: (e) => setSearchVal(e.target.value),
-        labelHidden: true
-    };
-    const feedbackParams = {
-        comment: {
-            labelHidden: true,
-            placeholder: 'How can I improve...',
-            value: commentVal,
-            onChange: (e) => setCommentVal(e.target.value)
-        },
-        question: args.enableSemanticSearch ? 'Was this search helpful?' : 'Was this helpful?',
-        reaction: buddyReaction,
-        onReaction: (reaction) => {
-            setBuddyReaction(reaction);
-        },
-        onSubmit: (response) => {
-            action('onClick')(`action ${response.reaction} ${response.comment}`);
-            setCommentVal('');
-            setBuddyReaction(undefined);
-            setShowThankYouMessage(true);
-        },
-        showThankYouMessage
-    };
-    const handleTabChange = (id) => {
-        setArticles([]);
-        setCategoryList([]);
-        setLoading(true);
-        fetchArticleContent(id).then(res => {
-            setArticles(res.articles);
-            setAiArticles(args.enableAISuggestions ? res.aiSuggestedArticles : undefined);
-            setCategoryList(res.category);
-            setSortBy(res.sortBy);
-            setLoading(false);
-        });
-        setActiveTab(id);
-        setSearchVal('');
-        if (id !== 'Search') {
-            setQuickFilters([]);
-        }
-    };
-    useEffect(() => {
-        setLoading(true);
-        fetchArticleContent(activeTab).then(res => {
-            setLoading(false);
-            setArticles(res.articles);
-            setAiArticles(args.enableAISuggestions ? res.aiSuggestedArticles : undefined);
-        });
-    }, [activeTab, args.enableAISuggestions]);
-    const filterRegex = useMemo(() => escapeRegExp(filterCategoryValue), [filterCategoryValue]);
-    const categoryProps = {
-        label: 'Category',
-        placeholder: 'Select categories',
-        onChange: e => {
-            setFilterCategoryValue(e.target.value);
-        },
-        value: filterCategoryValue,
-        mode: 'multi-select',
-        selected: {
-            items: selectedCategory
-        },
-        menu: {
-            items: filterCategoryValue
-                ? menuHelpers.flatten(categoryList).filter(({ primary }) => {
-                    return filterRegex.toLowerCase().includes(primary.toLowerCase());
-                })
-                : categoryListToRender,
-            onItemClick: toggleItem
-        }
-    };
-    const sortByProps = {
-        label: 'Sort by',
-        placeholder: 'Select sort by',
-        selected: selectedSortByOption
-            ? {
-                items: {
-                    id: selectedSortByOption.id,
-                    text: selectedSortByOption.primary
-                }
-            }
-            : undefined,
-        menu: {
-            items: sortBy,
-            onItemClick: selectSortByOption
-        }
-    };
-    const [searchFilter, setSearchFilter] = useState(['Buddy 1- taking care of customer operations', 'Buddy 2', 'Buddy 3'].map(name => ({
-        id: name,
-        primary: name
-    })));
-    const selectedFilter = useMemo(() => {
-        const selected = menuHelpers.getSelected(searchFilter)[0];
-        return selected ? selected.primary : 'Select buddy';
-    }, [searchFilter]);
-    const itemsToRender = useMemo(() => {
-        return menuHelpers.mapTree(searchFilter, item => {
-            return {
-                ...item
-            };
-        });
-    }, [searchFilter]);
-    const searchOptions = {
-        placeholder: 'Search article',
-        value: searchVal,
-        onSearchChange: (val) => {
-            setSearchVal(val);
-        },
-        onSearchSubmit: (val) => {
-            setInitialMessage(false);
-            return val;
-        },
-        searchFilter: {
-            text: selectedFilter,
-            variant: 'text',
-            menu: {
-                items: itemsToRender,
-                mode: 'single-select',
-                onItemClick: (id) => {
-                    setSearchFilter(cur => menuHelpers.toggleSelected(cur, id, 'single-select'));
-                }
-            }
-        },
-        filterInfo: selectedFilter !== 'Select buddy'
-            ? {
-                title: selectedFilter,
-                description: 'This gives information on filter selected'
-            }
-            : undefined
-    };
-    const actionOptions = [
-        {
-            id: '1',
-            text: 'Action 1',
-            onClick: (id) => action('onClick')(`action ${id}`)
-        },
-        {
-            id: '2',
-            text: 'Action 2',
-            onClick: (id) => action('onClick')(`action ${id}`)
-        },
-        {
-            id: '3',
-            text: 'Action 3',
-            onClick: (id) => action('onClick')(`action ${id}`)
-        }
-    ];
-    const suggestNewArticleAction = {
-        id: 'Suggest action',
-        text: 'Suggest action',
-        onClick: (id) => action('onClick')(id),
-        icon: 'plus'
-    };
-    let actions;
-    if (args.showAction) {
-        if (args.isSuggestArticleAction) {
-            actions = [suggestNewArticleAction];
-        }
-        else {
-            actions = actionOptions;
-        }
-    }
-    const handleClearClick = () => {
-        setQuickFilters([]);
-        setSearchVal('');
-        setCategoryList(curr => {
-            return curr?.map(categoryListItem => {
-                return {
-                    ...categoryListItem,
-                    selected: false
-                };
-            });
-        });
-        setSortBy(curr => {
-            return curr?.map(sortByListItem => {
-                return {
-                    ...sortByListItem,
-                    selected: false
-                };
-            });
-        });
-    };
-    let timeoutId;
-    const stopTimeout = () => {
-        clearTimeout(timeoutId);
-    };
-    const onLoadMore = useCallback(() => {
-        if (!loading && !loadingMore && activeTab) {
-            isSetLoadMore(true);
-            setLoading(false);
-            timeoutId = setTimeout(() => {
-                isSetLoadMore(false);
-                setLoading(false);
-                setHasMore(true);
-                setArticles(prevArticles => [
-                    ...prevArticles,
-                    {
-                        articleId: createUID(),
-                        title: 'Last article alert!!!',
-                        href: 'design.pega.com',
-                        abstract: 'Last article alert. This is the last article , hence the last index to be noted. This will be appended at the end of the list',
-                        meta: {
-                            category: 'Retail',
-                            publishedDate: '2023-04-06'
-                        },
-                        feedback: {
-                            articleId: createUID(),
-                            likes: 20,
-                            dislikes: 80,
-                            liked: true,
-                            disliked: false,
-                            onReaction: () => { }
-                        },
-                        isFollowed: false,
-                        isLiked: true,
-                        quickFilters: [
-                            { id: '1', name: 'insurance' },
-                            { id: '2', name: 'policy' }
-                        ]
-                    }
-                ]);
-            }, 3000);
-        }
-    }, [loading, loadingMore, activeTab]);
-    useEffect(() => {
-        return () => stopTimeout();
-    }, []);
-    const onQuickFilterClick = (quickFilterParam) => {
-        handleTabChange('Search');
-        setQuickFilters([...quickFilters, quickFilterParam]);
-        setSemanticFilterList(cur => menuHelpers.toggleSelected(cur, quickFilterParam.id, 'multi-select'));
-    };
-    const updateSematicResults = searchSemanticArticles.map(article => ({
-        ...article,
-        onQuickFilterClick
-    }));
-    const sematicFilterItems = useMemo(() => {
-        return menuHelpers.mapTree(semanticFilterList, item => {
-            let selectable = false;
-            if (!item.items) {
-                selectable = true;
-            }
-            return {
-                ...item,
-                visual: undefined,
-                count: item.items ? item.items.length : undefined,
-                secondary: undefined,
-                selected: selectable ? !!item.selected : undefined,
-                tooltip: undefined
-            };
-        });
-    }, [semanticFilterList]);
-    const selections = useMemo(() => menuHelpers.getSelected(semanticFilterList), [semanticFilterList]);
-    const semanticFilterProps = {
-        id: 'sematic-filter',
-        listId: 'sematic-filter-list',
-        items: sematicFilterItems,
-        mode: 'multi-select',
-        role: 'listbox',
-        emptyText: 'No items found.',
-        onItemClick: (selectedItemId) => {
-            if (selectedItemId)
-                setSemanticFilterList(cur => menuHelpers.toggleSelected(cur, selectedItemId, 'multi-select'));
-        },
-        footer: (<Flex container={{ justify: 'between' }}>
-        <Button onClick={() => {
-                action('clear');
-            }}>
-          Clear
-        </Button>
-
-        <Button variant='primary' onClick={() => {
-                handleTabChange('Search');
-                const filters = selections.map(item => {
-                    return {
-                        id: item.id,
-                        name: item.primary
-                    };
-                });
-                setQuickFilters(filters);
-            }}>
-          Add
-          <>&nbsp; {selections && selections.length > 0 && <Count>{selections.length}</Count>}</>
-        </Button>
-      </Flex>)
-    };
-    const searchCommonProps = {
-        count: args.showCount ? searchMock.count : undefined,
-        searchInput: searchOptions,
-        category: categoryProps,
-        sortBy: sortByProps,
-        onClearClick: handleClearClick,
-        quickFilters,
-        handleQuickFilterRemove: (id) => {
-            setQuickFilters(quickFilters.filter(item => item.id !== id));
-            if (activeTab === 'Search' && args.enableSemanticSearch) {
-                setSemanticFilterList(cur => menuHelpers.toggleSelected(cur, id, 'multi-select'));
-            }
-        },
-        showResults: args.showResults
-    };
-    const semanticSearchProps = {
-        ...searchCommonProps,
-        semanticSearch: true,
-        semanticFilter: semanticFilterProps,
-        articles: updateSematicResults,
-        feedback: feedbackParams,
-        error: false,
-        initialMessage,
-        activeArticle: activeArticleByTab.Search
-    };
-    const nonSemanticSearch = {
-        ...searchCommonProps,
-        articles: articles.map(article => {
-            if (!article.feedback ||
-                article.feedback.likes === undefined ||
-                article.feedback.dislikes === undefined) {
-                return article;
-            }
-            const likesValue = (article.feedback?.likes ?? 0 * 100) / article.feedback.likes + article.feedback.dislikes;
-            const disLikeValue = (article.feedback.dislikes ?? 0 * 100) / article.feedback.likes + article.feedback.dislikes;
-            return {
-                ...article,
-                feedback: {
-                    ...article.feedback,
-                    likes: likesValue,
-                    dislikes: disLikeValue
-                }
-            };
-        }),
-        activeArticle: activeArticleByTab.Search
-    };
-    const onNotRelevant = (id) => {
-        setListResult(prev => ({
-            ...prev,
-            detected: prev?.detected?.filter(item => item.id !== id)
-        }));
-    };
-    const updateBuddyList = (mockBuddyList) => {
-        const updatedAutoAnsweredList = mockBuddyList?.autoAnswered
-            ? mockBuddyList?.autoAnswered.map(item => ({
-                ...item,
-                onTitleClick: (id) => {
-                    action('onTitleClick')(id);
-                    openArticle(id, activeTab, item.query, true);
-                }
-            }))
-            : [];
-        const updateDetectedList = mockBuddyList?.detected
-            ? mockBuddyList?.detected.map(item => ({
-                ...item,
-                actions: [
-                    {
-                        id: '1',
-                        text: 'Edit',
-                        onClick: () => {
-                            action('onEdit');
-                        }
-                    },
-                    {
-                        id: '2',
-                        text: 'Not relevant',
-                        onClick: () => {
-                            onNotRelevant(item.id);
-                        }
-                    }
-                ],
-                onTitleClick: (id) => {
-                    action('onTitleClick')(id);
-                    handleTabChange('Buddy');
-                    setSearchVal(item.query);
-                }
-            }))
-            : [];
-        return {
-            autoAnswered: updatedAutoAnsweredList,
-            detected: updateDetectedList,
-            pastQuestions: mockBuddyList?.pastQuestions,
-            notRelevantQuestions: mockBuddyList?.notRelevantQuestions
-        };
-    };
-    const fetchListResult = () => {
-        return new Promise(resolve => {
-            setTimeout(() => {
-                resolve({
-                    data: updateBuddyList(BuddyListMockData)
-                });
-            }, 1000);
-        });
-    };
-    const loadInitial = (autoAnsweredList, detectedList, pastQuestionsList, notRelevantList) => {
-        const limit = 3;
-        const result = {};
-        if (autoAnsweredList?.length >= limit) {
-            result.autoAnswered = autoAnsweredList.slice(0, limit);
-        }
-        else {
-            result.autoAnswered = autoAnsweredList;
-            const remainingSpace = limit - (autoAnsweredList?.length || 0);
-            if (detectedList && detectedList?.length >= remainingSpace) {
-                result.detected = detectedList.slice(0, remainingSpace);
-            }
-            else {
-                result.detected = detectedList;
-            }
-        }
-        if (pastQuestionsList && notRelevantList) {
-            action('more content to show');
-        }
-        return result;
-    };
-    const getBuddyList = async () => {
-        setLoading(true);
-        const res = await fetchListResult();
-        setFullList(res.data);
-        setListResult(loadInitial(res?.data?.autoAnswered ?? [], res?.data?.detected ?? [], res?.data?.pastQuestions ?? [], res?.data?.notRelevantQuestions ?? []));
-        setLoading(false);
-    };
-    useEffect(() => {
-        if (args.enableVoiceAISuggestions) {
-            getBuddyList();
-        }
-    }, [args.enableVoiceAISuggestions]);
-    useEffect(() => {
-        if (showMore) {
-            setListResult(fullList);
-        }
-        else {
-            setListResult(loadInitial(listResult?.autoAnswered ?? [], listResult?.detected ?? [], listResult?.pastQuestions ?? [], listResult?.notRelevantQuestions ?? []));
-        }
-    }, [showMore]);
-    return (<div style={{
-            width: '25rem',
-            margin: ' 0 0.2rem 0'
-        }}>
-      <ArticleList header={args.showHeader
-            ? {
-                title: 'Knowledge articles',
-                icon: args.showHeaderIcon ? 'book-open' : '',
-                actions
-            }
-            : undefined} activeTab={activeTab} onTabClick={handleTabChange} skeletonize={false} suggested={{
-            count: args.showCount ? suggestedMock.count : undefined,
-            articles: args.enableVoiceAISuggestions
-                ? {
-                    ...listResult,
-                    showMore,
-                    onShowMoreToggle: () => {
-                        setShowMore(!showMore);
-                    }
-                }
-                : articles.map(article => {
-                    if (!article.feedback ||
-                        article.feedback.likes === undefined ||
-                        article.feedback.dislikes === undefined) {
-                        return article;
-                    }
-                    const likesValue = (article.feedback?.likes ?? 0 * 100) / article.feedback.likes +
-                        article.feedback.dislikes;
-                    const disLikeValue = (article.feedback.dislikes ?? 0 * 100) / article.feedback.likes +
-                        article.feedback.dislikes;
-                    return {
-                        ...article,
-                        feedback: {
-                            ...article.feedback,
-                            likes: likesValue,
-                            dislikes: disLikeValue
-                        }
-                    };
-                }),
-            aiSuggestedArticles: args.enableVoiceAISuggestions ? undefined : aiArticles,
-            activeArticle: activeArticleByTab.Suggested
-        }} followed={{
-            count: args.showCount ? followedMock.count : undefined,
-            articles: articles.map(article => {
-                if (!article.feedback ||
-                    article.feedback.likes === undefined ||
-                    article.feedback.dislikes === undefined) {
-                    return article;
-                }
-                const likesValue = (article.feedback?.likes ?? 0 * 100) / article.feedback.likes +
-                    article.feedback.dislikes;
-                const disLikeValue = (article.feedback.dislikes ?? 0 * 100) / article.feedback.likes +
-                    article.feedback.dislikes;
-                return {
-                    ...article,
-                    feedback: {
-                        ...article.feedback,
-                        likes: likesValue,
-                        dislikes: disLikeValue
-                    }
-                };
-            }),
-            searchInput: searchOptions,
-            category: categoryProps,
-            sortBy: sortByProps,
-            onClearClick: handleClearClick,
-            showResults: args.showResults,
-            activeArticle: activeArticleByTab.Followed
-        }} search={args.enableSemanticSearch ? semanticSearchProps : nonSemanticSearch} buddy={{
-            title: 'Ask buddy',
-            content: {
-                query: buddyQuery,
-                onSubmit: getBuddyResults,
-                onClear: () => {
-                    setSearchVal('');
-                },
-                loading: buddyLoader,
-                response: {
-                    title: buddyContent?.title ?? '',
-                    actions: buddyContent?.actions ?? [],
-                    content: buddyContent?.content ? (<HTML content={ArticleBuddyMockData.content}/>) : (buddyContent?.content),
-                    references: buddyContent?.references,
-                    feedback: feedbackParams,
-                    disclaimer: ArticleBuddyMockData.disclaimer
-                }
-            }
-        }} onQuickFilterClick={(quickFilterParam) => {
-            handleTabChange('Search');
-            setQuickFilters([...quickFilters, quickFilterParam]);
-        }} loading={loading} loadingMore={loadingMore} onLoadMore={args.showLoadMore && hasMore ? onLoadMore : undefined}/>
-    </div>);
-};
-ArticleListDemo.args = {
-    isSuggestArticleAction: true,
-    showAction: true,
-    showHeader: true,
-    showHeaderIcon: true,
-    showQuickFilters: true,
-    showCount: true,
-    showResults: true,
-    showLoadMore: false,
-    enableAISuggestions: true,
-    enableSemanticSearch: true,
-    enableVoiceAISuggestions: true
-};
-ArticleListDemo.argTypes = {
-    isSuggestArticleAction: { control: { type: 'boolean' } },
-    showAction: { control: { type: 'boolean' } },
-    showHeader: { control: { type: 'boolean' } },
-    showHeaderIcon: { control: { type: 'boolean' } },
-    showQuickFilters: { control: { type: 'boolean' } },
-    showCount: { control: { type: 'boolean' } },
-    showResults: { control: { type: 'boolean' } },
-    showLoadMore: { control: { type: 'boolean' } },
-    enableAISuggestions: { control: { type: 'boolean' } },
-    enableSemanticSearch: { control: { type: 'boolean' } },
-    enableVoiceAISuggestions: { control: { type: 'boolean' } }
-};
-//# sourceMappingURL=ArticleList.stories.jsx.map