-
Notifications
You must be signed in to change notification settings - Fork 399
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #578 from openchatai/ui/sessions-can-review-the-re…
…sponse UI/Let users up&down vote the copilot response
- Loading branch information
Showing
15 changed files
with
520 additions
and
141 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
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
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,29 @@ | ||
| import { useDownvote, useUpvote } from '@lib/hooks/useVote'; | ||
| import cn from '@lib/utils/cn'; | ||
| import { | ||
| ThumbsUp, | ||
| ThumbsDown, | ||
| } from 'lucide-react'; | ||
|
|
||
| const SIZE = 26; | ||
|
|
||
| export function Vote({ messageId }: { messageId: number }) { | ||
| const [asyncUpvoteState, asyncUpvote] = useUpvote(String(messageId)); | ||
| const [asyncDownvoteState, asyncDownvote] = useDownvote(String(messageId)); | ||
| const isUpvoted = !!asyncUpvoteState.value?.data.message; | ||
| const isDownvoted = !!asyncDownvoteState.value?.data.message; | ||
| const userVoted = isUpvoted || isDownvoted; | ||
| return ( | ||
| <div className='opencopilot-flex opencopilot-items-center opencopilot-justify-end opencopilot-w-full opencopilot-gap-px [&>button]:opencopilot-p-1'> | ||
| { | ||
| userVoted ? <span className='opencopilot-text-xs text-blur-out opencopilot-text-emerald-500'>thank you</span> : <><button onClick={asyncUpvote} className={cn('opencopilot-transition-all opencopilot-rounded-lg', isUpvoted ? '*:opencopilot-fill-emerald-500' : 'active:*:opencopilot-scale-105')}> | ||
| <ThumbsUp size={SIZE} className='opencopilot-transition-all opencopilot-stroke-emerald-500' /> | ||
| </button> | ||
| <button onClick={asyncDownvote} className={cn('opencopilot-transition-all opencopilot-rounded-lg', isDownvoted ? '*:opencopilot-fill-rose-500' : 'active:*:opencopilot-scale-105')}> | ||
| <ThumbsDown size={SIZE} className='opencopilot-transition-all opencopilot-stroke-rose-500' /> | ||
| </button></> | ||
| } | ||
|
|
||
| </div> | ||
| ) | ||
| } |
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
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
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,71 @@ | ||
| // https://github.com/streamich/react-use/blob/master/src/useAsyncFn.ts | ||
| import { DependencyList, useCallback, useRef, useState } from "react"; | ||
| import useMountedState from "./useMountedState"; | ||
| import { FunctionReturningPromise, PromiseType } from "@lib/types/helpers"; | ||
|
|
||
| export type AsyncState<T> = | ||
| | { | ||
| loading: boolean; | ||
| error?: undefined; | ||
| value?: undefined; | ||
| } | ||
| | { | ||
| loading: true; | ||
| error?: Error | undefined; | ||
| value?: T; | ||
| } | ||
| | { | ||
| loading: false; | ||
| error: Error; | ||
| value?: undefined; | ||
| } | ||
| | { | ||
| loading: false; | ||
| error?: undefined; | ||
| value: T; | ||
| }; | ||
|
|
||
| type StateFromFunctionReturningPromise<T extends FunctionReturningPromise> = | ||
| AsyncState<PromiseType<ReturnType<T>>>; | ||
|
|
||
| export type AsyncFnReturn< | ||
| T extends FunctionReturningPromise = FunctionReturningPromise | ||
| > = [StateFromFunctionReturningPromise<T>, T]; | ||
|
|
||
| export default function useAsyncFn<T extends FunctionReturningPromise>( | ||
| fn: T, | ||
| deps: DependencyList = [], | ||
| initialState: StateFromFunctionReturningPromise<T> = { loading: false } | ||
| ): AsyncFnReturn<T> { | ||
| const lastCallId = useRef(0); | ||
| const isMounted = useMountedState(); | ||
| const [state, set] = | ||
| useState<StateFromFunctionReturningPromise<T>>(initialState); | ||
|
|
||
| const callback = useCallback((...args: Parameters<T>): ReturnType<T> => { | ||
| const callId = ++lastCallId.current; | ||
|
|
||
| if (!state.loading) { | ||
| set((prevState) => ({ ...prevState, loading: true })); | ||
| } | ||
|
|
||
| return fn(...args).then( | ||
| (value) => { | ||
| isMounted() && | ||
| callId === lastCallId.current && | ||
| set({ value, loading: false }); | ||
|
|
||
| return value; | ||
| }, | ||
| (error) => { | ||
| isMounted() && | ||
| callId === lastCallId.current && | ||
| set({ error, loading: false }); | ||
|
|
||
| return error; | ||
| } | ||
| ) as ReturnType<T>; | ||
| }, deps); | ||
|
|
||
| return [state, callback as unknown as T]; | ||
| } |
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,16 @@ | ||
| import { useCallback, useEffect, useRef } from "react"; | ||
|
|
||
| export default function useMountedState(): () => boolean { | ||
| const mountedRef = useRef<boolean>(false); | ||
| const get = useCallback(() => mountedRef.current, []); | ||
|
|
||
| useEffect(() => { | ||
| mountedRef.current = true; | ||
|
|
||
| return () => { | ||
| mountedRef.current = false; | ||
| }; | ||
| }, []); | ||
|
|
||
| return get; | ||
| } |
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,26 @@ | ||
| import { useAxiosInstance } from "@lib/contexts/axiosInstance"; | ||
| import useAsyncFn from "./useAsyncFn"; | ||
|
|
||
| function useUpvote(id: string, onSuccess?: () => void) { | ||
| const axios = useAxiosInstance(); | ||
| return useAsyncFn( | ||
| async () => | ||
| axios.axiosInstance.post<{ | ||
| message: string; | ||
| }>(`/chat/vote/${id}`), | ||
| [axios, id, onSuccess] | ||
| ); | ||
| } | ||
|
|
||
| function useDownvote(id: string, onSuccess?: () => void) { | ||
| const axios = useAxiosInstance(); | ||
| return useAsyncFn( | ||
| async () => | ||
| axios.axiosInstance.delete<{ | ||
| message: string; | ||
| }>(`/chat/vote/${id}`), | ||
| [axios, id, onSuccess] | ||
| ); | ||
| } | ||
|
|
||
| export { useUpvote, useDownvote }; |
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,5 @@ | ||
| export type PromiseType<P extends Promise<any>> = P extends Promise<infer T> | ||
| ? T | ||
| : never; | ||
|
|
||
| export type FunctionReturningPromise = (...args: any[]) => Promise<any>; |
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
Oops, something went wrong.