-
-
Notifications
You must be signed in to change notification settings - Fork 36
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
46 changed files
with
3,658 additions
and
1,946 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
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,78 @@ | ||
| import React from "react"; | ||
| import { SendHorizonal } from "lucide-react"; | ||
| import { MentionsInputProps, SuggestionDataItem } from "react-mentions"; | ||
|
|
||
| import { Chat, ChatMemberProfile } from "@/lib/db"; | ||
| import { useProfileStore } from "@/lib/stores/profile"; | ||
| import { useEnterSubmit } from "@/hooks/useEnterSubmit"; | ||
| import { Button } from "@/components/ui/Button"; | ||
| import { ChatInput } from "@/components/ui/chat"; | ||
|
|
||
| import { MobileDrawerControl } from "./MobileDrawerControls"; | ||
|
|
||
| type ChatFormProps = { | ||
| chatInput: string; | ||
| chats: Chat[] | null; | ||
| isChatStreamming: boolean; | ||
| chatMembers: ChatMemberProfile[] | null; | ||
| onSubmit: (e: React.FormEvent<HTMLFormElement>) => void; | ||
| onInputChange: ( | ||
| e: | ||
| | React.ChangeEvent<HTMLInputElement> | ||
| | React.ChangeEvent<HTMLTextAreaElement> | ||
| ) => void; | ||
| }; | ||
|
|
||
| export const ChatForm = ({ | ||
| chats, | ||
| isChatStreamming, | ||
| chatMembers, | ||
| chatInput, | ||
| onSubmit, | ||
| onInputChange, | ||
| }: ChatFormProps) => { | ||
| const { formRef, onKeyDown } = useEnterSubmit(); | ||
| const currentProfile = useProfileStore((state) => state.profile); | ||
|
|
||
| const mentionData: SuggestionDataItem[] = React.useMemo(() => { | ||
| const mentionData = [{ id: "assistant", display: "Assistant" }]; | ||
|
|
||
| if (!chatMembers) return mentionData; | ||
|
|
||
| chatMembers.forEach((member) => { | ||
| if (!member.profiles) return; | ||
| mentionData.push({ | ||
| id: member.profiles.id, | ||
| display: member.profiles.username || "", | ||
| }); | ||
| }); | ||
|
|
||
| return mentionData.filter((mention) => mention.id !== currentProfile?.id); | ||
| }, [chatMembers, currentProfile?.id]); | ||
|
|
||
| const handleOnChange: MentionsInputProps["onChange"] = (e) => { | ||
| onInputChange({ | ||
| target: { value: e.target.value }, | ||
| } as React.ChangeEvent<HTMLTextAreaElement>); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="fixed bottom-0 left-0 w-full bg-background p-4 lg:relative lg:mt-2 lg:bg-transparent lg:py-0"> | ||
| <form onSubmit={onSubmit} className="relative" ref={formRef}> | ||
| <ChatInput | ||
| value={chatInput} | ||
| onKeyDown={onKeyDown} | ||
| onChange={handleOnChange} | ||
| mentionData={mentionData} | ||
| /> | ||
| <MobileDrawerControl chats={chats} /> | ||
| <div className="absolute bottom-[2px] right-1 flex w-1/2 justify-end bg-background px-2 pb-2"> | ||
| <Button size="sm" type="submit" disabled={isChatStreamming}> | ||
| Send | ||
| <SendHorizonal size={14} className="ml-1" /> | ||
| </Button> | ||
| </div> | ||
| </form> | ||
| </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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| import { MainLayout } from "@/components/ui/common/MainLayout"; | ||
|
|
||
| interface ChatLayoutProps { | ||
| children: React.ReactNode; | ||
| leftSidebarElement: React.ReactNode; | ||
| } | ||
|
|
||
| export const ChatLayout = ({ | ||
| children, | ||
| leftSidebarElement, | ||
| }: ChatLayoutProps) => { | ||
| return ( | ||
| <MainLayout> | ||
| <div className="flex h-screen flex-1 flex-row pt-16"> | ||
| <div className="flex flex-1 flex-row"> | ||
| <div className="flex flex-1 flex-col overflow-y-hidden"> | ||
| <div className="relative flex flex-1 bg-background"> | ||
| <div className="flex size-0 flex-col justify-between overflow-x-hidden transition-[width] lg:h-auto lg:max-h-[calc(100vh_-_65px)] lg:w-[300px] lg:border-r"> | ||
| {leftSidebarElement} | ||
| </div> | ||
| {children} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </MainLayout> | ||
| ); | ||
| }; |
Oops, something went wrong.