ColdBreeze/ColdBreeze-chat-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update widget setting

Browse Source
This commit is contained in:
Tristan Yang
2023-03-13 18:25:47 +08:00
parent 7fcbfb3693
commit a80c57933d
8 changed files with 71 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/setting/Widget.tsx
+27 -2
View File
@@ -3,6 +3,12 @@
import { useTranslation } from 'react-i18next';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
import { useAppSelector } from '../../app/store';
import Button from '../../common/component/styled/Button';
import Input from '../../common/component/styled/Input';
import useCopy from '../../common/hook/useCopy';
import IconQuestion from '../../assets/icons/question.svg';
const Row = ({ paramKey, paramDefault, remarks }: { paramKey: string, paramDefault: string | number, remarks: string }) => {
return <tr className="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-50 border-b transition duration-300 ease-in-out md:hover:bg-gray-100 dark:md:hover:bg-gray-900">
@@ -18,7 +24,14 @@ const Row = ({ paramKey, paramDefault, remarks }: { paramKey: string, paramDefau
</tr>;
};
export default function Widget() {
const loginUid = useAppSelector(store => store.authData.user?.uid);
const widgetLink = `${location.origin}/widget.html?hostId=${loginUid}`;
const { t } = useTranslation("setting", { keyPrefix: "widget" });
const { t: ct } = useTranslation();
const { copied, copy } = useCopy({ enableToast: false });
const copyLink = () => {
copy(widgetLink);
};
// const disableBtn = !reachLimit;
return (
<div className="flex flex-col justify-start items-start">
@@ -29,7 +42,7 @@ export default function Widget() {
{t('code')}:
</label>
<SyntaxHighlighter id="code" language="html" style={vscDarkPlus} className="rounded">
{`<!-- ${t('code_comment')} -->\n<script \n data-host-id="1" \n data-theme-color="#1fe1f9" \n data-close-width="48" \n data-close-height="48" \n data-open-width="380" \n data-open-height="680" \n src="${location.origin}/widget.js" \n async \n></script>`}
{`<!-- ${t('code_comment')} -->\n<script \n data-host-id="${loginUid}" \n data-theme-color="#1fe1f9" \n data-close-width="48" \n data-close-height="48" \n data-open-width="380" \n data-open-height="680" \n src="${location.origin}/widget.js" \n async \n></script>`}
</SyntaxHighlighter>
<div className="text-gray-500 dark:text-white text-sm mt-5 mb-2">
{t('config')}:
@@ -80,7 +93,19 @@ export default function Widget() {
</tfoot>
</table>
</div>
<div className="mt-8">
<p className="text-sm mb-2 text-gray-500 dark:text-gray-50 flex flex-col md:flex-row gap-4">
{t("share_link")} <a className="text-primary-500 flex gap-1 items-center" href="https://doc.voce.chat/widget" target="_blank" rel="noopener noreferrer">
<IconQuestion /> {t("widget_faq")}
</a>
</p>
<div className="w-full md:w-96 mb-3 relative">
<Input readOnly className={"large !pr-16"} value={widgetLink} />
<Button onClick={copyLink} className="ghost small border_less absolute right-1 top-1/2 -translate-y-1/2 dark:!text-primary-400">
{copied ? "Copied" : ct("action.copy")}
</Button>
</div>
</div>
</div>
);
}
src/widget/Popup/Header.tsx
+1 -3
View File
@@ -1,6 +1,5 @@
import { FC } from 'react';
import { useWidget } from '../WidgetContext';
import { useAppSelector } from '../../app/store';
import IconClose from './close.svg';
type Props = {
@@ -8,8 +7,7 @@ type Props = {
};
const Index: FC<Props> = ({ handleClose }) => {
const { color, fgColor, embed } = useWidget();
const { name, logo } = useAppSelector(store => store.server);
const { color, fgColor, embed, name, logo } = useWidget();
return (
<header className="relative flex justify-between items-center h-14 px-4 py-2" style={{ backgroundColor: color }}>
<div className="relative w-8 h-8">
src/widget/Popup/InviteOnlyTip.tsx
+13
View File
@@ -0,0 +1,13 @@
import React from 'react';
// type Props = {}
const InviteOnlyTip = () => {
return (
<div className='flex-1 dark:text-white flex items-center justify-center'>
Only Invite to SignUp
</div>
);
};
export default InviteOnlyTip;
src/widget/Popup/index.tsx
+13 -10
View File
@@ -8,6 +8,7 @@ import { useAppSelector } from '../../app/store';
import useSSE from '../useSSE';
import { useWidget } from '../WidgetContext';
import clsx from 'clsx';
import InviteOnlyTip from './InviteOnlyTip';
type Props = {
hostId: number,
@@ -15,7 +16,7 @@ type Props = {
}
const Index = ({ handleClose, hostId }: Props) => {
const { embed } = useWidget();
const { embed, inviteOnly } = useWidget();
// 建立SSE连接
useSSE();
const { user: loginUser, token, guest: isGuest } = useAppSelector(store => store.authData);
@@ -25,15 +26,17 @@ const Index = ({ handleClose, hostId }: Props) => {
return (
<aside className={clsx("flex flex-col bg-white dark:bg-gray-700 rounded-md overflow-hidden", embed ? "w-full h-full" : `w-full h-full md:max-w-lg md:h-[calc(100vh_-_20px)] m-auto md:my-2 md:shadow-lg rounded-none md:rounded-md`)}>
<Header handleClose={handleClose} />
{/* message list */}
<main id='MESSAGE_LIST_CONTAINER' className="relative flex-1 overflow-y-auto scroll-smooth">
{/* placeholder */}
<div className="flex-center h-10"></div>
<Welcome needLogin={notLogin} />
{notLogin ? null : <MessageFeed hostId={hostId} />}
</main>
{/* message input */}
{notLogin ? null : <MessageInput from={loginUser?.uid || 0} to={hostId} />}
{inviteOnly ? <InviteOnlyTip /> : <>
{/* message list */}
<main id='MESSAGE_LIST_CONTAINER' className="relative flex-1 overflow-y-auto scroll-smooth">
{/* placeholder */}
<div className="flex-center h-10"></div>
<Welcome needLogin={notLogin} />
{notLogin ? null : <MessageFeed hostId={hostId} />}
</main>
{/* message input */}
{notLogin ? null : <MessageInput from={loginUser?.uid || 0} to={hostId} />}
</>}
<Footer />
</aside>
);
src/widget/WidgetContext.tsx
+9 -2
View File
@@ -1,4 +1,6 @@
import { createContext, useContext, ReactNode } from 'react';
import { useGetLoginConfigQuery, useGetServerQuery } from '../app/services/server';
import { useAppSelector } from '../app/store';
import { getContrastColor } from '../common/utils';
const color = decodeURIComponent(new URLSearchParams(location.search).get("themeColor") || "#1fe1f9");
@@ -6,12 +8,17 @@ const from = decodeURIComponent(new URLSearchParams(location.search).get("from")
const fgColor = getContrastColor(color);
// 判断是否是iframe上下文
const embed = window.location !== window.parent.location;
const WidgetContext = createContext({ color, fgColor, embed, from });
const WidgetContext = createContext({ color, fgColor, embed, from, loading: true, inviteOnly: false, name: "", logo: "" });
function WidgetProvider({ children }: { children: ReactNode }) {
const { isLoading: loadingServerData, isError } = useGetServerQuery();
const { isLoading: loadingConfig, data: loginConfig } = useGetLoginConfigQuery();
const serverData = useAppSelector(store => store.server);
return <WidgetContext.Provider value={{ color, fgColor, embed, from }} >{children}</WidgetContext.Provider>;
const loading = loadingConfig || loadingServerData;
// if(loading) return
return <WidgetContext.Provider value={{ loading, color, fgColor, embed, from, inviteOnly: loginConfig?.who_can_sign_up == "InvitationOnly", name: serverData?.name, logo: serverData.logo }} >{children}</WidgetContext.Provider>;
}
function useWidget() {
src/widget/index.tsx
+2 -3
View File
@@ -1,5 +1,4 @@
import { useState, useEffect } from "react";
import { useGetServerQuery } from "../app/services/server";
import { useWidget } from "./WidgetContext";
import Icon from "./Icon";
import Popup from "./Popup";
@@ -12,7 +11,7 @@ function Widget({ hostId }: Props) {
const { embed } = useWidget();
const { rehydrated } = useCache();
const [visible, setVisible] = useState(!!new URLSearchParams(location.search).get("open"));
const { isLoading, isError } = useGetServerQuery();
const toggleVisible = () => {
// 有无iframe内嵌
const parentWindow = window.parent;
@@ -29,7 +28,7 @@ function Widget({ hostId }: Props) {
}
}, [visible]);
if (isLoading || isError || !rehydrated) return null;
if (!rehydrated) return null;
if (!embed) return <Popup handleClose={toggleVisible} hostId={hostId} />;
return visible ? <Popup handleClose={toggleVisible} hostId={hostId} /> : <Icon handleClick={toggleVisible} />;
}