-
Notifications
You must be signed in to change notification settings - Fork 1.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: separate aifilter into subcomponents and make it nicer (#28607)
Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Peter Kirkham <[email protected]>
- Loading branch information
3 people
authored
Feb 14, 2025
1 parent
aedb73a
commit 75a2b82
Showing
9 changed files
with
234 additions
and
137 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
69 changes: 69 additions & 0 deletions
69
frontend/src/scenes/session-recordings/components/AiFilter/AiFilterInput.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| import { IconArrowRight, IconRewind } from '@posthog/icons' | ||
| import { LemonButton, LemonTextArea } from '@posthog/lemon-ui' | ||
| import { useActions, useMountedLogic, useValues } from 'kea' | ||
| import { maxGlobalLogic } from 'scenes/max/maxGlobalLogic' | ||
| import { sessionRecordingsPlaylistLogic } from 'scenes/session-recordings/playlist/sessionRecordingsPlaylistLogic' | ||
|
|
||
| import { AiConsentPopover } from '../AiConsentPopover' | ||
| import { aiFilterLogic } from './aiFilterLogic' | ||
|
|
||
| export function AiFilterInput(): JSX.Element { | ||
| const mountedLogic = useMountedLogic(sessionRecordingsPlaylistLogic) | ||
| const { setFilters, resetFilters } = useActions(mountedLogic) | ||
| const filterLogic = aiFilterLogic({ setFilters, resetFilters }) | ||
| const { messages, input, isLoading } = useValues(filterLogic) | ||
| const { setInput, handleSend, handleReset } = useActions(filterLogic) | ||
| const { dataProcessingAccepted } = useValues(maxGlobalLogic) | ||
|
|
||
| return ( | ||
| <> | ||
| <div className="w-[min(44rem,100%)] relative"> | ||
| <LemonTextArea | ||
| value={input} | ||
| onChange={(value) => setInput(value)} | ||
| placeholder={ | ||
| isLoading | ||
| ? 'Thinking…' | ||
| : messages.length === 0 | ||
| ? 'Show me recordings of people who ...' | ||
| : 'Ask follow-up' | ||
| } | ||
| onPressEnter={() => { | ||
| if (input) { | ||
| handleSend() | ||
| } | ||
| }} | ||
| minRows={1} | ||
| maxRows={10} | ||
| className="p-3" | ||
| autoFocus | ||
| disabled={isLoading} | ||
| /> | ||
| <div className="absolute top-0 bottom-0 flex items-center right-2"> | ||
| <LemonButton | ||
| type={messages.length === 0 ? 'primary' : 'secondary'} | ||
| onClick={handleSend} | ||
| tooltip="Let's go!" | ||
| disabled={isLoading || input.length === 0 || !dataProcessingAccepted} | ||
| size="small" | ||
| icon={<IconArrowRight />} | ||
| /> | ||
| </div> | ||
| </div> | ||
| {messages.length > 0 && ( | ||
| <div> | ||
| <LemonButton | ||
| icon={<IconRewind />} | ||
| onClick={handleReset} | ||
| disabled={isLoading} | ||
| type="tertiary" | ||
| size="xsmall" | ||
| > | ||
| Start over | ||
| </LemonButton> | ||
| </div> | ||
| )} | ||
| <AiConsentPopover /> | ||
| </> | ||
| ) | ||
| } |
33 changes: 33 additions & 0 deletions
33
frontend/src/scenes/session-recordings/components/AiFilter/AiFilterSuggestions.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import { IconArrowUpRight } from '@posthog/icons' | ||
| import { LemonButton } from '@posthog/lemon-ui' | ||
| import { useActions } from 'kea' | ||
|
|
||
| import { aiFilterLogic } from './aiFilterLogic' | ||
|
|
||
| export function AiFilterSuggestions(): JSX.Element { | ||
| const filterLogic = aiFilterLogic() | ||
| const { setInput } = useActions(filterLogic) | ||
|
|
||
| const suggestions = [ | ||
| 'Show me recordings of people who visited sign up page in the last 24 hours', | ||
| 'Show me recordings of people who are frustrated', | ||
| 'Show me recordings of people who are facing bugs', | ||
| ] | ||
|
|
||
| return ( | ||
| <div className="flex items-center justify-center flex-wrap gap-x-2 gap-y-1.5 w-[min(48rem,100%)]"> | ||
| {suggestions.map((suggestion) => ( | ||
| <LemonButton | ||
| key={suggestion} | ||
| className="mb-1" | ||
| type="secondary" | ||
| size="xsmall" | ||
| sideIcon={<IconArrowUpRight />} | ||
| onClick={() => setInput(suggestion)} | ||
| > | ||
| {suggestion} | ||
| </LemonButton> | ||
| ))} | ||
| </div> | ||
| ) | ||
| } |
85 changes: 85 additions & 0 deletions
85
frontend/src/scenes/session-recordings/components/AiFilter/AiFilterThread.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| import { ProfilePicture, Spinner, Tooltip } from '@posthog/lemon-ui' | ||
| import { useActions, useMountedLogic, useValues } from 'kea' | ||
| import { LemonMarkdown } from 'lib/lemon-ui/LemonMarkdown' | ||
| import { sessionRecordingsPlaylistLogic } from 'scenes/session-recordings/playlist/sessionRecordingsPlaylistLogic' | ||
| import { userLogic } from 'scenes/userLogic' | ||
|
|
||
| import { aiFilterLogic } from './aiFilterLogic' | ||
|
|
||
| export function AiFilterThread(): JSX.Element { | ||
| const mountedLogic = useMountedLogic(sessionRecordingsPlaylistLogic) | ||
| const { setFilters, resetFilters } = useActions(mountedLogic) | ||
| const filterLogic = aiFilterLogic({ setFilters, resetFilters }) | ||
| const { messages, isLoading } = useValues(filterLogic) | ||
| const { user } = useValues(userLogic) | ||
|
|
||
| return ( | ||
| <> | ||
| {(messages.length > 0 || isLoading) && ( | ||
| <div className="w-[min(44rem,100%)] relative"> | ||
| {messages | ||
| .filter((message) => message.role !== 'system') | ||
| .map((message, index) => ( | ||
| <div key={index} className=" my-2"> | ||
| {message.role === 'user' ? ( | ||
| <> | ||
| <div className="relative flex gap-2 flex-row-reverse ml-10 items-center"> | ||
| <Tooltip placement="right" title="You"> | ||
| <ProfilePicture | ||
| user={{ ...user, hedgehog_config: undefined }} | ||
| size="lg" | ||
| className="mt-1 border" | ||
| /> | ||
| </Tooltip> | ||
| <div className="border py-2 px-3 rounded-lg bg-surface-primary font-medium"> | ||
| <LemonMarkdown>{message.content}</LemonMarkdown> | ||
| </div> | ||
| </div> | ||
| </> | ||
| ) : ( | ||
| <> | ||
| <div className="relative flex gap-2 mr-10 items-center"> | ||
| <Tooltip placement="left" title="Max"> | ||
| <ProfilePicture | ||
| user={{ | ||
| hedgehog_config: { | ||
| ...user?.hedgehog_config, | ||
| use_as_profile: true, | ||
| }, | ||
| }} | ||
| size="lg" | ||
| className="mt-1 border" | ||
| /> | ||
| </Tooltip> | ||
| <div className="border py-2 px-3 rounded-lg bg-surface-primary font-medium"> | ||
| <LemonMarkdown> | ||
| {message.content.length > 0 && message.content[0] === '{' | ||
| ? 'Done! Filters have been updated' | ||
| : message.content} | ||
| </LemonMarkdown> | ||
| </div> | ||
| </div> | ||
| </> | ||
| )} | ||
| </div> | ||
| ))} | ||
| {isLoading && ( | ||
| <div className="relative flex gap-2 mr-10 items-center"> | ||
| <Tooltip placement="left" title="Max"> | ||
| <ProfilePicture | ||
| user={{ hedgehog_config: { ...user?.hedgehog_config, use_as_profile: true } }} | ||
| size="lg" | ||
| className="mt-1 border" | ||
| /> | ||
| </Tooltip> | ||
| <div className="border py-2 px-3 rounded-lg bg-surface-primary font-medium"> | ||
| Thinking... | ||
| <Spinner /> | ||
| </div> | ||
| </div> | ||
| )} | ||
| </div> | ||
| )} | ||
| </> | ||
| ) | ||
| } |
Oops, something went wrong.