iod/page-assist
10
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Introduce temporary chat mode

Browse Source 
Adds a new "Temporary Chat" mode for quick, non-persistent conversations. The new mode is available in the header bar and will trigger a visually distinct chat experience with a temporary background color. Temporary chats do not save to the chat history and are meant for short, one-off interactions. This feature enhances flexibility and provides a more convenient option for users who need to quickly interact with the AI without committing the conversation to their history.
This commit is contained in:
n4ze3m
2024-11-09 19:10:34 +05:30
parent 8fbdfc35d3
commit f8791a0707
21 changed files with 167 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/Layouts/Header.tsx
View File

@@ -21,6 +21,7 @@ import { Select, Tooltip } from "antd"
import { getAllPrompts } from "@/db"
import { ShareBtn } from "~/components/Common/ShareBtn"
import { ProviderIcons } from "../Common/ProviderIcon"
import { NewChat } from "./NewChat"
type Props = {
setSidebarOpen: (open: boolean) => void
setOpenModelSettings: (open: boolean) => void
@@ -45,12 +46,12 @@ export const Header: React.FC<Props> = ({
setSelectedSystemPrompt,
messages,
streaming,
historyId
historyId,
temporaryChat
} = useMessageOption()
const {
data: models,
isLoading: isModelsLoading,
isFetching: isModelsFetching
} = useQuery({
queryKey: ["fetchModel"],
queryFn: () => fetchChatModels({ returnEmpty: true }),
@@ -86,7 +87,9 @@ export const Header: React.FC<Props> = ({
}
return (
<div className="sticky top-0 z-[999] flex h-16 p-3 bg-gray-50 border-b dark:bg-[#171717] dark:border-gray-600">
<div className={`sticky top-0 z-[999] flex h-16 p-3 bg-gray-50 border-b dark:bg-[#171717] dark:border-gray-600 ${
temporaryChat && "!bg-gray-200 dark:!bg-black"
}`}>
<div className="flex gap-2 items-center">
{pathname !== "/" && (
<div>
@@ -104,14 +107,9 @@ export const Header: React.FC<Props> = ({
<PanelLeftIcon className="w-6 h-6" />
</button>
</div>
<div>
<button
onClick={clearChat}
className="inline-flex dark:bg-transparent bg-white items-center rounded-lg border dark:border-gray-700 bg-transparent px-3 py-2.5 text-xs lg:text-sm font-medium leading-4 text-gray-800 dark:text-white disabled:opacity-50 ease-in-out transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white">
<SquarePen className="h-5 w-5 " />
<span className=" truncate ml-3">{t("newChat")}</span>
</button>
</div>
<NewChat
clearChat={clearChat}
/>
<span className="text-lg font-thin text-zinc-300 dark:text-zinc-600">
{"/"}
</span>

57
src/components/Layouts/NewChat.tsx Normal file
View File

@@ -0,0 +1,57 @@
import { SquarePen, MoreHorizontal, TimerReset } from "lucide-react"
import { useTranslation } from "react-i18next"
import { Dropdown, Switch } from "antd"
import type { MenuProps } from "antd"
import { useMessageOption } from "@/hooks/useMessageOption"
type Props = {
clearChat: () => void
}
export const NewChat: React.FC<Props> = ({ clearChat }) => {
const { t } = useTranslation(["option", "common"])
const { temporaryChat, setTemporaryChat, messages } = useMessageOption()
const items: MenuProps["items"] = [
{
key: "1",
label: (
<label className="flex items-center gap-6 justify-between px-1 py-0.5 cursor-pointer w-full">
<div className="flex items-center gap-2">
<TimerReset className="h-4 w-4 text-gray-600" />
<span>
{t("temporaryChat")}
</span>
</div>
<Switch
checked={temporaryChat}
onChange={(checked) => {
setTemporaryChat(checked)
// just like chatgpt
if (messages.length > 0) {
clearChat()
}
}}
size="small"
/>
</label>
)
}
]
return (
<div className="flex items-center justify-between">
<button
onClick={clearChat}
className="inline-flex dark:bg-transparent bg-white items-center rounded-r-none rounded-lg border dark:border-gray-700 bg-transparent px-3 py-2.5 pr-6 text-xs lg:text-sm font-medium leading-4 text-gray-800 dark:text-white disabled:opacity-50 ease-in-out transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white">
<SquarePen className="h-5 w-5" />
<span className="truncate ml-3">{t("newChat")}</span>
</button>
<Dropdown menu={{ items }} trigger={["click"]}>
<button className="inline-flex dark:bg-transparent bg-white items-center rounded-lg border-l-0 rounded-l-none border dark:border-gray-700 bg-transparent px-3 py-2.5 text-xs lg:text-sm font-medium leading-4 text-gray-800 dark:text-white disabled:opacity-50 ease-in-out transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white">
<MoreHorizontal className="h-5 w-5 text-gray-600 dark:text-gray-400" />
</button>
</Dropdown>
</div>
)
}

21
src/components/Option/Playground/PlaygroundForm.tsx
View File

@@ -36,7 +36,8 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
selectedQuickPrompt,
textareaRef,
setSelectedQuickPrompt,
selectedKnowledge
selectedKnowledge,
temporaryChat
} = useMessageOption()
const isMobile = () => {
@@ -190,7 +191,10 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
}
return (
<div className="px-3 pt-3 md:px-4 md:pt-4 bg-gray-100 dark:bg-[#262626] border rounded-t-xl dark:border-gray-600">
<div
className={`px-3 pt-3 md:px-4 md:pt-4 bg-gray-100 dark:bg-[#262626] border rounded-t-xl dark:border-gray-600
${temporaryChat && "!bg-gray-300 dark:!bg-black "}
`}>
<div
className={`h-full rounded-md shadow relative ${
form.values.image.length === 0 ? "hidden" : "block"
@@ -213,7 +217,9 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
</div>
</div>
<div>
<div className="flex rounded-t-xl bg-white dark:bg-transparent">
<div className={`flex rounded-t-xl bg-white dark:bg-transparent ${
temporaryChat && "!bg-gray-300 dark:!bg-black"
}`}>
<form
onSubmit={form.onSubmit(async (value) => {
stopListening()
@@ -228,7 +234,10 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
return
}
}
if (value.message.trim().length === 0 && value.image.length === 0) {
if (
value.message.trim().length === 0 &&
value.image.length === 0
) {
return
}
form.reset()
@@ -288,8 +297,6 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
)}
</div>
<div className="flex !justify-end gap-3">
{!selectedKnowledge && (
<Tooltip title={t("tooltip.uploadImage")}>
<button
@@ -411,4 +418,4 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
</div>
</div>
)
}
}

7
src/components/Option/Sidebar.tsx
View File

@@ -34,7 +34,8 @@ export const Sidebar = ({ onClose }: Props) => {
setHistoryId,
historyId,
clearChat,
setSelectedModel
setSelectedModel,
temporaryChat
} = useMessageOption()
const { t } = useTranslation(["option", "common"])
const client = useQueryClient()
@@ -126,7 +127,7 @@ export const Sidebar = ({ onClose }: Props) => {
})
return (
<div className="overflow-y-auto z-99">
<div className={`overflow-y-auto z-99 ${temporaryChat ? 'pointer-events-none opacity-50' : ''}`}>
{status === "success" && chatHistories.length === 0 && (
<div className="flex justify-center items-center mt-20 overflow-hidden">
<Empty description={t("common:noHistory")} />
@@ -244,4 +245,4 @@ export const Sidebar = ({ onClose }: Props) => {
)}
</div>
)
}
}