7x31/ChatGPT-Next-Web
1
0
Fork 0
mirror of https://github.com/Yidadaa/ChatGPT-Next-Web.git synced 2025-09-08 01:06:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: bugfix

Browse Source
This commit is contained in:
butterfly
2024-04-30 19:11:59 +08:00
parent cadd2558fd
commit 3d99965a8f
21 changed files with 313 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/containers/Chat/ChatPanel.tsx
View File

@@ -259,7 +259,7 @@ function _Chat() {
className={`
relative flex flex-col overflow-hidden bg-chat-panel
max-md:absolute max-md:h-[100vh] max-md:w-[100%]
md:h-[calc(100%-1.25rem)] md:my-2.5 md:mr-2.5 md:rounded-md
md:h-[100%] md:mr-2.5 md:rounded-md
`}
key={session.id}
>

10
app/containers/Chat/components/ChatActions.tsx
View File

@@ -30,6 +30,7 @@ export interface Action {
render?: (key: string) => JSX.Element;
icon?: JSX.Element;
placement: "left" | "right";
className?: string;
}
export function ChatActions(props: {
@@ -220,7 +221,11 @@ export function ChatActions(props: {
.filter((v) => v.placement === "left" && v.isShow)
.map((act, ind) => {
if (act.render) {
return act.render(act.text);
return (
<div className={`${act.className ?? ""}`} key={act.text}>
{act.render(act.text)}
</div>
);
}
return (
<Popover
@@ -228,9 +233,10 @@ export function ChatActions(props: {
content={act.text}
popoverClassName={`${popoverClassName}`}
placement={ind ? "t" : "lt"}
className={`${act.className ?? ""}`}
>
<div
className=" cursor-pointer h-[32px] w-[32px] flex items-center justify-center hover:bg-chat-actions-btn-hovered hover:rounded-action-btn"
className={` cursor-pointer h-[32px] w-[32px] flex items-center justify-center hover:bg-chat-actions-btn-hovered hover:rounded-action-btn`}
onClick={act.onClick}
>
{act.icon}

3
app/containers/Chat/components/ChatHeader.tsx
View File

@@ -6,7 +6,6 @@ import { DEFAULT_TOPIC, useChatStore } from "@/app/store/chat";
import LogIcon from "@/app/icons/logIcon.svg";
import GobackIcon from "@/app/icons/goback.svg";
import ShareIcon from "@/app/icons/shareIcon.svg";
import BottomArrow from "@/app/icons/bottomArrow.svg";
import ModelSelect from "./ModelSelect";
export interface ChatHeaderProps {
@@ -79,7 +78,7 @@ export default function ChatHeader(props: ChatHeaderProps) {
</div>
<div
className=" cursor-pointer"
className=" cursor-pointer hover:bg-hovered-btn p-1.5 rounded-action-btn"
onClick={() => {
setShowExport(true);
}}

2
app/containers/Chat/components/ChatInputPanel.tsx
View File

@@ -250,7 +250,7 @@ export default forwardRef<ChatInputPanelInstance, ChatInputPanelProps>(
<label
className={`
cursor-text flex flex-col bg-chat-panel-input-hood border border-chat-input-hood
sm:focus-within:border-chat-input-hood-focus sm:focus-within:shadow-chat-input-hood-focus-shadow
focus-within:border-chat-input-hood-focus sm:focus-within:shadow-chat-input-hood-focus-shadow
rounded-chat-input p-3 gap-3 max-md:flex-1
md:rounded-md md:p-4 md:gap-4
`}

4
app/containers/Chat/components/ChatMessagePanel.tsx
View File

@@ -180,7 +180,7 @@ export default function ChatMessagePanel(props: ChatMessagePanelProps) {
)}
</div>
<div
className={`group relative flex flex ${
className={`group relative flex ${
isUser ? "flex-row-reverse" : ""
}`}
>
@@ -218,7 +218,7 @@ export default function ChatMessagePanel(props: ChatMessagePanelProps) {
fontSize={fontSize}
parentRef={scrollRef}
defaultShow={i >= messages.length - 6}
className={`max-w-message-width ${
className={`leading-6 max-w-message-width ${
isUser
? " text-text-chat-message-markdown-user"
: "text-text-chat-message-markdown-bot"

8
app/containers/Chat/components/ModelSelect.tsx
View File

@@ -63,7 +63,9 @@ const ModelSelect = () => {
};
const content: TriggerProps["content"] = ({ close }) => (
<div className={`flex flex-col gap-1 overflow-x-hidden relative`}>
<div
className={`flex flex-col gap-1 overflow-x-hidden relative text-sm-title`}
>
{models?.map((o) => (
<div
key={o.displayName}
@@ -125,7 +127,7 @@ const ModelSelect = () => {
placement={
position?.poi.relativePosition[1] !== Orientation.bottom ? "lb" : "lt"
}
popoverClassName="border border-select-popover rounded-lg shadow-select-popover-shadow w-actions-popover bg-select-popover-panel max-h-chat-actions-select-model-popover !py-0"
popoverClassName="border border-select-popover rounded-lg shadow-select-popover-shadow w-actions-popover bg-select-popover-panel max-h-chat-actions-select-model-popover w-[280px]"
onShow={(e) => {
if (e) {
autoScrollToSelectedModal();
@@ -135,7 +137,7 @@ const ModelSelect = () => {
getPopoverPanelRef={(ref) => (contentRef.current = ref.current)}
>
<div
className="flex items-center justify-center gap-1 cursor-pointer rounded-chat-model-select pl-3 pr-2.5 py-2 font-common leading-4 bg-chat-actions-select-model hover:bg-chat-actions-select-model-hover"
className="flex items-center justify-center gap-1 cursor-pointer rounded-chat-model-select pl-3 pr-2.5 py-2 font-common leading-4 bg-chat-actions-select-model hover:bg-chat-actions-select-model-hover"
ref={rootRef}
>
<div className="line-clamp-1 max-w-chat-actions-select-model text-sm-title">

116
app/containers/Chat/components/SessionItem.tsx
View File

@@ -13,6 +13,7 @@ import DeleteIcon from "@/app/icons/deleteIcon.svg";
import LogIcon from "@/app/icons/logIcon.svg";
import HoverPopover from "@/app/components/HoverPopover";
import Popover from "@/app/components/Popover";
export default function SessionItem(props: {
onClick?: () => void;
@@ -45,12 +46,16 @@ export default function SessionItem(props: {
className={`
group/chat-menu-list relative flex p-3 items-center gap-2 self-stretch rounded-md mb-2
border
bg-chat-menu-session-unselected border-chat-menu-session-unselected cursor-pointer
bg-chat-menu-session-unselected-mobile border-chat-menu-session-unselected-mobile
md:bg-chat-menu-session-unselected md:border-chat-menu-session-unselected
${
props.selected &&
(currentPath === Path.Chat || currentPath === Path.Home)
? `!bg-chat-menu-session-selected !border-chat-menu-session-selected`
: `hover:bg-chat-menu-session-hovered hover:chat-menu-session-hovered`
? `
md:!bg-chat-menu-session-selected md:!border-chat-menu-session-selected
!bg-chat-menu-session-selected-mobile !border-chat-menu-session-selected-mobile
`
: `md:hover:bg-chat-menu-session-hovered md:hover:chat-menu-session-hovered`
}
`}
onClick={props.onClick}
@@ -75,7 +80,7 @@ export default function SessionItem(props: {
{props.title}
</div>
<div
className={`text-text-chat-menu-item-time text-sm group-hover/chat-menu-list:opacity-0 pl-3`}
className={`text-text-chat-menu-item-time text-sm group-hover/chat-menu-list:opacity-0 pl-3 hidden md:block`}
>
{getTime(props.time)}
</div>
@@ -84,39 +89,82 @@ export default function SessionItem(props: {
{Locale.ChatItem.ChatItemCount(props.count)}
</div>
</div>
<HoverPopover
content={
<div
className={`flex items-center gap-3 p-3 rounded-action-btn leading-6 cursor-pointer`}
onClickCapture={(e) => {
props.onDelete?.();
e.preventDefault();
e.stopPropagation();
}}
>
<DeleteChatIcon />
<div className="flex-1 font-common text-actions-popover-menu-item">
{Locale.Chat.Actions.Delete}
</div>
</div>
}
popoverClassName={`
px-2 py-1 border-delete-chat-popover bg-delete-chat-popover-panel rounded-md shadow-delete-chat-popover-shadow
`}
noArrow
align={props.isMobileScreen ? "end" : "start"}
<div
className={`text-text-chat-menu-item-time text-sm pl-3 block md:hidden`}
>
<div
className={`
!absolute top-[50%] translate-y-[-50%] right-3 pointer-events-none opacity-0
group-hover/chat-menu-list:pointer-events-auto
group-hover/chat-menu-list:opacity-100
hover:bg-select-hover rounded-chat-img
{getTime(props.time)}
</div>
{props.isMobileScreen ? (
<Popover
content={
<div
className={`flex items-center gap-3 p-3 rounded-action-btn leading-6 cursor-pointer`}
onClickCapture={(e) => {
props.onDelete?.();
}}
>
<DeleteChatIcon />
<div className="flex-1 font-common text-actions-popover-menu-item text-text-chat-menu-item-delete">
{Locale.Chat.Actions.Delete}
</div>
</div>
}
popoverClassName={`
px-2 py-1 border-delete-chat-popover bg-delete-chat-popover-panel rounded-md shadow-delete-chat-popover-shadow
`}
noArrow
placement="r"
>
<DeleteIcon />
</div>
</HoverPopover>
<div
className={`
cursor-pointer rounded-chat-img
md:!absolute md:top-[50%] md:translate-y-[-50%] md:right-3 md:pointer-events-none md:opacity-0
md:group-hover/chat-menu-list:pointer-events-auto
md:group-hover/chat-menu-list:opacity-100
md:hover:bg-select-hover
follow-parent-svg
text-text-chat-menu-item-time
`}
>
<DeleteIcon />
</div>
</Popover>
) : (
<HoverPopover
content={
<div
className={`flex items-center gap-3 p-3 rounded-action-btn leading-6 cursor-pointer`}
onClickCapture={(e) => {
props.onDelete?.();
e.preventDefault();
e.stopPropagation();
}}
>
<DeleteChatIcon />
<div className="flex-1 font-common text-actions-popover-menu-item text-text-chat-menu-item-delete">
{Locale.Chat.Actions.Delete}
</div>
</div>
}
popoverClassName={`
px-2 py-1 border-delete-chat-popover bg-delete-chat-popover-panel rounded-md shadow-delete-chat-popover-shadow
`}
noArrow
align="start"
>
<div
className={`
cursor-pointer rounded-chat-img
md:!absolute md:top-[50%] md:translate-y-[-50%] md:right-3 md:pointer-events-none md:opacity-0
md:group-hover/chat-menu-list:pointer-events-auto
md:group-hover/chat-menu-list:opacity-100
md:hover:bg-select-hover
`}
>
<DeleteIcon />
</div>
</HoverPopover>
)}
</div>
)}
</Draggable>