From c2416889ba69dda8fb698ec4458953414aa8a424 Mon Sep 17 00:00:00 2001 From: Nate Kelley Date: Wed, 1 Oct 2025 09:34:10 -0600 Subject: [PATCH] new suggestions --- .../BusterChatInputBase.stories.tsx | 6 +- .../ShortcutsSuggestions.tsx | 104 +++++++++--------- .../components/ui/typography/Paragraph.tsx | 8 +- 3 files changed, 60 insertions(+), 58 deletions(-) diff --git a/apps/web/src/components/features/input/BusterChatInput/BusterChatInputBase.stories.tsx b/apps/web/src/components/features/input/BusterChatInput/BusterChatInputBase.stories.tsx index 4428d6360..03abdfdf2 100644 --- a/apps/web/src/components/features/input/BusterChatInput/BusterChatInputBase.stories.tsx +++ b/apps/web/src/components/features/input/BusterChatInput/BusterChatInputBase.stories.tsx @@ -53,7 +53,7 @@ type Story = StoryObj; const mockShortcuts: ListShortcutsResponse['shortcuts'] = [ { id: '123e4567-e89b-12d3-a456-426614174000', - name: 'Weekly Sales Report', + name: 'weekly-sales-report', instructions: 'Generate a comprehensive weekly sales report with key metrics and trends', createdBy: '123e4567-e89b-12d3-a456-426614174001', updatedBy: null, @@ -65,7 +65,7 @@ const mockShortcuts: ListShortcutsResponse['shortcuts'] = [ }, { id: '123e4567-e89b-12d3-a456-426614174003', - name: 'Customer Analysis', + name: 'customer-analysis', instructions: 'Analyze customer behavior patterns and provide insights', createdBy: '123e4567-e89b-12d3-a456-426614174001', updatedBy: null, @@ -77,7 +77,7 @@ const mockShortcuts: ListShortcutsResponse['shortcuts'] = [ }, { id: '123e4567-e89b-12d3-a456-426614174004', - name: 'Revenue Forecast', + name: 'revenue-forecast', instructions: 'Create a revenue forecast for the next quarter based on current trends', createdBy: '123e4567-e89b-12d3-a456-426614174001', updatedBy: null, diff --git a/apps/web/src/components/features/input/Mentions/ShortcutsSuggestions/ShortcutsSuggestions.tsx b/apps/web/src/components/features/input/Mentions/ShortcutsSuggestions/ShortcutsSuggestions.tsx index a67295241..5eefe4039 100644 --- a/apps/web/src/components/features/input/Mentions/ShortcutsSuggestions/ShortcutsSuggestions.tsx +++ b/apps/web/src/components/features/input/Mentions/ShortcutsSuggestions/ShortcutsSuggestions.tsx @@ -2,9 +2,8 @@ import type { ListShortcutsResponse, Shortcut } from '@buster/server-shared/shor import { useNavigate } from '@tanstack/react-router'; import type { Editor } from '@tiptap/react'; import { useMemo, useRef } from 'react'; -import { useDeleteShortcut, useGetShortcut } from '@/api/buster_rest/shortcuts/queryRequests'; -import { ErrorCard } from '@/components/ui/error/ErrorCard'; -import { Pencil, Trash } from '@/components/ui/icons'; +import { useDeleteShortcut } from '@/api/buster_rest/shortcuts/queryRequests'; +import { Trash } from '@/components/ui/icons'; import PenWriting from '@/components/ui/icons/NucleoIconOutlined/pen-writing'; import Plus from '@/components/ui/icons/NucleoIconOutlined/plus'; import { @@ -13,10 +12,11 @@ import { type MentionTriggerItem, } from '@/components/ui/inputs/MentionInput'; import type { - MentionInputSuggestionsDropdownItem, MentionInputSuggestionsProps, MentionInputSuggestionsRef, } from '@/components/ui/inputs/MentionInputSuggestions'; +import { Paragraph } from '@/components/ui/typography/Paragraph'; +import { Text } from '@/components/ui/typography/Text'; import { ShortcutPopoverContent } from './ShortcutPopoverContent'; export const SHORTCUT_MENTION_TRIGGER = '/'; @@ -78,48 +78,61 @@ export const useCreateShortcutsMentionsSuggestions = ( }; export const useCreateShortcutForMention = () => { - const navigate = useNavigate(); - const { mutateAsync: deleteShortcut } = useDeleteShortcut(); + // const navigate = useNavigate(); + // const { mutateAsync: deleteShortcut } = useDeleteShortcut(); const createShortcutForMention = ( shortcut: Shortcut, - editor?: Editor + _editor?: Editor ): MentionTriggerItem => { + console.log('shortcut', shortcut); return { value: shortcut.id, - label: shortcut.name, - icon: , - secondaryContent: ( - , - value: 'edit', - onClick: () => { - navigate({ - to: '/app/home/shortcuts', - search: { - shortcut_id: shortcut.id, - }, - }); - }, - }, - { - label: 'Delete', - icon: , - value: 'delete', - onClick: async () => { - await deleteShortcut({ id: shortcut.id }); - //remove the trigger character from the editor - editor?.commands.deleteRange({ - from: editor.state.selection.from - 1, - to: editor.state.selection.from, - }); - }, - }, - ]} - /> + label: ( +
+ {`${SHORTCUT_MENTION_TRIGGER}${shortcut.name}`} + + {shortcut.instructions} + +
), + pillLabel: shortcut.name, + // secondaryContent: ( + // , + // value: 'edit', + // onClick: () => { + // navigate({ + // to: '/app/home/shortcuts', + // search: { + // shortcut_id: shortcut.id, + // }, + // }); + // }, + // }, + // { + // label: 'Delete', + // icon: , + // value: 'delete', + // onClick: async () => { + // await deleteShortcut({ id: shortcut.id }); + // //remove the trigger character from the editor + // editor?.commands.deleteRange({ + // from: editor.state.selection.from - 1, + // to: editor.state.selection.from, + // }); + // }, + // }, + // ]} + // /> + // ), }; }; @@ -130,7 +143,6 @@ export const useShortcutsSuggestions = ( setOpenCreateShortcutModal: (open: boolean) => void, mentionInputSuggestionsRef: React.RefObject ): MentionInputSuggestionsProps['suggestionItems'] => { - const createShortcutForMention = useCreateShortcutForMention(); const navigate = useNavigate(); return useMemo(() => { const shortcutsItems: MentionInputSuggestionsProps['suggestionItems'] = [ @@ -197,13 +209,3 @@ export const useShortcutsSuggestions = ( // ]; }, [setOpenCreateShortcutModal, mentionInputSuggestionsRef]); }; - -const ShortcutSuggestionsPopoverContent = ({ shortcut }: { shortcut: Shortcut }) => { - const { isFetched, isError } = useGetShortcut({ id: shortcut.id }); - - if (!isFetched) return null; - - if (isError) return ; - - return ; -}; diff --git a/apps/web/src/components/ui/typography/Paragraph.tsx b/apps/web/src/components/ui/typography/Paragraph.tsx index f90e7f55c..b44d0ad89 100644 --- a/apps/web/src/components/ui/typography/Paragraph.tsx +++ b/apps/web/src/components/ui/typography/Paragraph.tsx @@ -13,11 +13,11 @@ const paragraphVariants = cva('', { lg: 'text-lg', }, lineHeight: { - none: 'leading-[1]!', + none: 'leading-[1]', sm: 'leading-1.5!', - base: 'leading-1.5!', - md: 'leading-[1.4]!', - lg: 'leading-[1.5]!', + base: 'leading-1.5', + md: 'leading-[1.4]', + lg: 'leading-[1.5]', }, }, });