mirror of
https://github.com/hexastack/hexabot
synced 2025-06-11 00:46:37 +00:00
Merge pull request #262 from Hexastack/feat/widget-icon
feat: hexabot logo in the widget header
This commit is contained in:
commit
4cf5c57053
64
frontend/src/app-components/logos/HexabotLogoRound.tsx
Normal file
64
frontend/src/app-components/logos/HexabotLogoRound.tsx
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
/*
|
||||||
|
* Copyright © 2024 Hexastack. All rights reserved.
|
||||||
|
*
|
||||||
|
* Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
|
||||||
|
* 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
|
||||||
|
* 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { FC, SVGProps } from "react";
|
||||||
|
|
||||||
|
const HexabotLogoRound: FC<SVGProps<SVGSVGElement>> = ({
|
||||||
|
width = "18",
|
||||||
|
height = "18",
|
||||||
|
...rest
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 42.555282 47.2949"
|
||||||
|
width={width}
|
||||||
|
height={height}
|
||||||
|
{...rest}
|
||||||
|
>
|
||||||
|
<g fillOpacity={1} strokeDasharray="none">
|
||||||
|
<path
|
||||||
|
d="M32.756 170.872l-4.26 7.482-2.786-7.494-8.211-.017a4.405 4.405 0 01-3.8-2.191l-6.443-11.087a4.215 4.215 0 01-.011-4.216l6.213-10.833a4.96 4.96 0 014.288-2.492l12.2-.034a4.715 4.715 0 014.09 2.347l6.16 10.602a4.864 4.864 0 01.02 4.855z"
|
||||||
|
fill="none"
|
||||||
|
stroke="#fff"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeOpacity={1}
|
||||||
|
strokeWidth={4.4649702399999995}
|
||||||
|
paintOrder="normal"
|
||||||
|
style={{
|
||||||
|
mixBlendMode: "normal",
|
||||||
|
}}
|
||||||
|
transform="translate(-58.835 -133.808) translate(53.705 -18.313) scale(1.10427)"
|
||||||
|
/>
|
||||||
|
<g
|
||||||
|
fill="#fff"
|
||||||
|
fillRule="nonzero"
|
||||||
|
stroke="none"
|
||||||
|
strokeWidth={0.662}
|
||||||
|
fillOpacity={1}
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M-532.348 630.303a6.253 6.253 0 11-12.506.023 6.253 6.253 0 0112.506-.023"
|
||||||
|
transform="translate(-58.835 -133.808) translate(53.705 -18.313) scale(1.10427) matrix(.25113 0 0 .25263 -27.6 133.42) matrix(1.51171 0 0 1.50275 1044.41 -860.854)"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M-532.348 630.303a6.253 6.253 0 11-12.506.023 6.253 6.253 0 0112.506-.023"
|
||||||
|
transform="translate(-58.835 -133.808) translate(53.705 -18.313) scale(1.10427) matrix(.25113 0 0 .25263 -27.6 133.42) matrix(1.51171 0 0 1.50275 992.8 -860.854)"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M-532.348 630.303a6.253 6.253 0 11-12.506.023 6.253 6.253 0 0112.506-.023"
|
||||||
|
transform="translate(-58.835 -133.808) translate(53.705 -18.313) scale(1.10427) matrix(.25113 0 0 .25263 -27.6 133.42) matrix(1.51171 0 0 1.50275 1018.605 -860.854)"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HexabotLogoRound;
|
@ -6,18 +6,19 @@
|
|||||||
* 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
|
* 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import ChatIcon from "@mui/icons-material/Chat";
|
|
||||||
import { Box, Typography } from "@mui/material";
|
import { Box, Typography } from "@mui/material";
|
||||||
|
|
||||||
import { useTranslate } from "@/hooks/useTranslate";
|
import { useTranslate } from "@/hooks/useTranslate";
|
||||||
|
|
||||||
|
import HexabotLogoRound from "../logos/HexabotLogoRound";
|
||||||
|
|
||||||
export const ChatWidgetHeader = () => {
|
export const ChatWidgetHeader = () => {
|
||||||
const { t } = useTranslate();
|
const { t } = useTranslate();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box display="flex" alignItems="center" ml={2}>
|
<Box display="flex" alignItems="center" ml={2}>
|
||||||
<ChatIcon />
|
<HexabotLogoRound width={32} height={32} />
|
||||||
<Typography component="h2" fontSize="1.5rem" ml={2}>
|
<Typography component="h2" fontSize="1.25rem" ml={2}>
|
||||||
{t("title.live_chat_tester")}
|
{t("title.live_chat_tester")}
|
||||||
</Typography>
|
</Typography>
|
||||||
</Box>
|
</Box>
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
.sc-header {
|
.sc-header {
|
||||||
min-height: 75px;
|
min-height: 64px;
|
||||||
border-top-left-radius: 9px;
|
border-top-left-radius: 9px;
|
||||||
border-top-right-radius: 9px;
|
border-top-right-radius: 9px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
@ -20,10 +20,9 @@
|
|||||||
|
|
||||||
.sc-header--title {
|
.sc-header--title {
|
||||||
align-self: center;
|
align-self: center;
|
||||||
padding: 10px;
|
|
||||||
flex: 1;
|
flex: 1;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
font-size: 20px;
|
font-size: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sc-header--title.enabled {
|
.sc-header--title.enabled {
|
||||||
|
@ -12,8 +12,9 @@ import { useColors } from '../providers/ColorProvider';
|
|||||||
import { useSettings } from '../providers/SettingsProvider';
|
import { useSettings } from '../providers/SettingsProvider';
|
||||||
import { useWidget } from '../providers/WidgetProvider';
|
import { useWidget } from '../providers/WidgetProvider';
|
||||||
|
|
||||||
import CloseIcon from './icons/CloseIcon';
|
|
||||||
import './ChatHeader.scss';
|
import './ChatHeader.scss';
|
||||||
|
import CloseIcon from './icons/CloseIcon';
|
||||||
|
import OpenIcon from './icons/OpenIcon';
|
||||||
|
|
||||||
type ChatHeaderProps = PropsWithChildren;
|
type ChatHeaderProps = PropsWithChildren;
|
||||||
|
|
||||||
@ -31,13 +32,14 @@ const ChatHeader: FC<ChatHeaderProps> = ({ children }) => {
|
|||||||
children
|
children
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
{settings.titleImageUrl && (
|
<a
|
||||||
<img
|
href="https://hexabot.ai"
|
||||||
className="sc-header--img"
|
target="_blank"
|
||||||
src={settings.titleImageUrl}
|
title="Powered By Hexabot.ai"
|
||||||
alt=""
|
className="sc-header--img"
|
||||||
/>
|
>
|
||||||
)}
|
<OpenIcon width={32} height={32} />
|
||||||
|
</a>
|
||||||
<div className="sc-header--title">{settings.title}</div>
|
<div className="sc-header--title">{settings.title}</div>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
@ -67,7 +67,7 @@ const defaultSettings: ChatSettings = {
|
|||||||
alwaysScrollToBottom: true,
|
alwaysScrollToBottom: true,
|
||||||
focusOnOpen: true,
|
focusOnOpen: true,
|
||||||
title: 'Hexabot :)',
|
title: 'Hexabot :)',
|
||||||
titleImageUrl: 'https://i.pravatar.cc/300',
|
titleImageUrl: '',
|
||||||
inputDisabled: false,
|
inputDisabled: false,
|
||||||
placeholder: 'Write something...',
|
placeholder: 'Write something...',
|
||||||
menu: [],
|
menu: [],
|
||||||
|
Loading…
Reference in New Issue
Block a user