diff --git a/app/components/Imgs/index.tsx b/app/components/Imgs/index.tsx new file mode 100644 index 000000000..bf09df795 --- /dev/null +++ b/app/components/Imgs/index.tsx @@ -0,0 +1,52 @@ +import { CSSProperties } from "react"; +import { getMessageImages } from "@/app/utils"; +import { RequestMessage } from "@/app/client/api"; + +interface ImgsProps { + message: RequestMessage; + isMobileScreen?: boolean; +} + +export default function Imgs(props: ImgsProps) { + const { message, isMobileScreen } = props; + const imgSrcs = getMessageImages(message); + + if (imgSrcs.length < 1) { + return <>; + } + + let imgVars = { + "--imgs-width": `calc(var(--max-message-width) - ${ + imgSrcs.length - 1 + }*0.25rem)`, + "--img-width": `calc(var(--imgs-width)/ ${imgSrcs.length})`, + }; + + if (isMobileScreen) { + imgVars = { + "--imgs-width": `calc(var(--max-message-width) - ${ + imgSrcs.length - 1 + }*0.25rem)`, + "--img-width": `calc(var(--imgs-width)/ ${imgSrcs.length})`, + }; + } + + return ( +
+ {imgSrcs.map((image, index) => { + return ( +
+ ); + })} +
+ ); +} diff --git a/app/components/Screen/index.tsx b/app/components/Screen/index.tsx index 847a26446..c1ec1ca9f 100644 --- a/app/components/Screen/index.tsx +++ b/app/components/Screen/index.tsx @@ -1,6 +1,6 @@ import { useLocation } from "react-router-dom"; import { useMemo, ReactNode } from "react"; -import { Path, SlotID } from "@/app/constant"; +import { Path, SIDEBAR_ID, SlotID } from "@/app/constant"; import { getLang } from "@/app/locales"; import useMobileScreen from "@/app/hooks/useMobileScreen"; @@ -47,7 +47,9 @@ export default function Screen(props: ScreenProps) { props.noAuth ) : ( <> -
{props.sidebar}
+
+ {props.sidebar} +
)}
-
+
getRelativePosition(e.currentTarget, message.id) } @@ -221,22 +226,11 @@ export default function ChatMessagePanel(props: ChatMessagePanelProps) { fontSize={fontSize} parentRef={scrollRef} defaultShow={i >= messages.length - 6} - className={isUser ? " text-white" : "text-black"} + className={`max-w-message-width ${ + isUser ? " text-white" : "text-black" + }`} /> - {getMessageImages(message).length > 0 && ( -
- {getMessageImages(message).map((image, index) => { - return ( - - ); - })} -
- )} +
@@ -35,9 +36,11 @@ export default function useDragSideBar() { const d = e.clientX - startX.current; const nextWidth = limit(startDragWidth.current + d); + const { menuWidth } = updateGlobalCSSVars(nextWidth); + document.documentElement.style.setProperty( - "--sidebar-width", - `${nextWidth}px`, + "--menu-width", + `${menuWidth}px`, ); config.update((config) => { config.sidebarWidth = nextWidth; @@ -62,7 +65,7 @@ export default function useDragSideBar() { // useLayoutEffect(() => { // const barWidth = limit(config.sidebarWidth ?? DEFAULT_SIDEBAR_WIDTH); - // document.documentElement.style.setProperty("--sidebar-width", `${barWidth}px`); + // document.documentElement.style.setProperty("--menu-width", `${barWidth}px`); // }, [config.sidebarWidth]); return { diff --git a/app/hooks/useListenWinResize.ts b/app/hooks/useListenWinResize.ts index d0ea816d0..cb3b2d3ce 100644 --- a/app/hooks/useListenWinResize.ts +++ b/app/hooks/useListenWinResize.ts @@ -8,8 +8,10 @@ import { DEFAULT_SIDEBAR_WIDTH, MAX_SIDEBAR_WIDTH, MIN_SIDEBAR_WIDTH, + SIDEBAR_ID, } from "@/app/constant"; -import { useAppConfig } from "../store/config"; +import { useAppConfig } from "@/app/store/config"; +import { updateGlobalCSSVars } from "@/app/utils/client"; export const MOBILE_MAX_WIDTH = 768; @@ -42,16 +44,10 @@ export default function useListenWinResize() { } } - nextSidebar = Math.max( - MIN_SIDEBAR_WIDTH, - Math.min(MAX_SIDEBAR_WIDTH, nextSidebar), - ); - document.documentElement.style.setProperty( - "--sidebar-width", - `${nextSidebar}px`, - ); + const { menuWidth } = updateGlobalCSSVars(nextSidebar); + config.update((config) => { - config.sidebarWidth = nextSidebar; + config.sidebarWidth = menuWidth; }); }); } diff --git a/app/styles/globals.css b/app/styles/globals.css index 037008e28..504098751 100644 --- a/app/styles/globals.css +++ b/app/styles/globals.css @@ -28,4 +28,5 @@ body { --tip-popover-color: #434360; --chat-panel-bg: rgb(249, 250, 251, 1); --siderbar-mobile-height: 3.125rem; + --max-message-width: calc(var(--chat-panel-max-width) * 0.6); } diff --git a/app/styles/globals.scss b/app/styles/globals.scss index f7fb0c143..aa22b7d4f 100644 --- a/app/styles/globals.scss +++ b/app/styles/globals.scss @@ -61,7 +61,7 @@ --window-width: 90vw; --window-height: 90vh; - // --sidebar-width: 300px; + --sidebar-width: 300px; --window-content-width: calc(100% - var(--sidebar-width)); --message-max-width: 80%; --full-height: 100%; @@ -71,7 +71,7 @@ :root { --window-width: 100vw; --window-height: var(--full-height); - // --sidebar-width: 100vw; + --sidebar-width: 100vw; --window-content-width: var(--window-width); --message-max-width: 100%; } diff --git a/app/utils/client.ts b/app/utils/client.ts new file mode 100644 index 000000000..91d3fbccf --- /dev/null +++ b/app/utils/client.ts @@ -0,0 +1,34 @@ +import { + MAX_SIDEBAR_WIDTH, + MIN_SIDEBAR_WIDTH, + SIDEBAR_ID, + WINDOW_WIDTH_MD, +} from "@/app/constant"; + +export function updateGlobalCSSVars(nextSidebar: number) { + const windowSize = window.innerWidth; + const inMobile = windowSize <= WINDOW_WIDTH_MD; + + nextSidebar = Math.max( + MIN_SIDEBAR_WIDTH, + Math.min(MAX_SIDEBAR_WIDTH, nextSidebar), + ); + + const menuWidth = inMobile ? 0 : nextSidebar; + const navigateBarWidth = inMobile + ? 0 + : document.querySelector(`#${SIDEBAR_ID}`)?.clientWidth ?? 0; + const chatPanelWidth = windowSize - navigateBarWidth - menuWidth; + + document.documentElement.style.setProperty("--menu-width", `${menuWidth}px`); + document.documentElement.style.setProperty( + "--navigate-bar-width", + `${navigateBarWidth}px`, + ); + document.documentElement.style.setProperty( + "--chat-panel-max-width", + `${chatPanelWidth}px`, + ); + + return { menuWidth }; +} diff --git a/tailwind.config.js b/tailwind.config.js index fee11f297..4baae1ba4 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -37,7 +37,7 @@ module.exports = { 'md': '15rem', 'lg': '21.25rem', '2xl': '27.5rem', - 'page': 'calc(100% - var(--sidebar-width))', + 'page': 'calc(100% - var(--menu-width))', 'thumbnail': '5rem', 'actions-popover': '203px', }, @@ -52,12 +52,14 @@ module.exports = { 'setting-panel-mobile': 'calc(100vh - var(--siderbar-mobile-height))', }, flexBasis: { - 'sidebar': 'var(--sidebar-width)', - 'page': 'calc(100% - var(--sidebar-width))', + 'sidebar': 'var(--menu-width)', + 'page': 'calc(100% - var(--menu-width))', + 'message-width': 'var(--max-message-width)', }, spacing: { 'chat-header-gap': '0.625rem', - 'chat-panel-mobile': 'var(--siderbar-mobile-height)' + 'chat-panel-mobile': 'var(--siderbar-mobile-height)', + 'message-img': 'calc((100%- var(--img-gap-count)*0.25rem)/var(--img-count))', }, backgroundImage: { 'message-bg': 'linear-gradient(259deg, #9786FF 8.42%, #4A5CFF 90.13%)', @@ -67,8 +69,9 @@ module.exports = { 'time': 'all ease 0.6s', 'message': 'all ease 0.3s', }, + maxHeight: {}, maxWidth: { - 'message-width': 'var(--max-message-width, 80%)' + 'message-width': 'var(--max-message-width)', }, backgroundColor: { 'select-btn': 'rgba(0, 0, 0, 0.05)',