mirror of
https://github.com/hexastack/hexabot
synced 2025-02-22 12:28:26 +00:00
feat: hexabot logo in the widget header
This commit is contained in:
Mohamed Marrouchi
parent
7b275c40f4
commit
79842f5f46
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).
|
||||
*/
|
||||
|
||||
import ChatIcon from "@mui/icons-material/Chat";
|
||||
import { Box, Typography } from "@mui/material";
|
||||
|
||||
import { useTranslate } from "@/hooks/useTranslate";
|
||||
|
||||
import HexabotLogoRound from "../logos/HexabotLogoRound";
|
||||
|
||||
export const ChatWidgetHeader = () => {
|
||||
const { t } = useTranslate();
|
||||
|
||||
return (
|
||||
<Box display="flex" alignItems="center" ml={2}>
|
||||
<ChatIcon />
|
||||
<Typography component="h2" fontSize="1.5rem" ml={2}>
|
||||
<HexabotLogoRound width={32} height={32} />
|
||||
<Typography component="h2" fontSize="1.25rem" ml={2}>
|
||||
{t("title.live_chat_tester")}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.sc-header {
|
||||
min-height: 75px;
|
||||
min-height: 64px;
|
||||
border-top-left-radius: 9px;
|
||||
border-top-right-radius: 9px;
|
||||
padding: 10px;
|
||||
@ -20,10 +20,9 @@
|
||||
|
||||
.sc-header--title {
|
||||
align-self: center;
|
||||
padding: 10px;
|
||||
flex: 1;
|
||||
user-select: none;
|
||||
font-size: 20px;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.sc-header--title.enabled {
|
||||
|
||||
@ -12,8 +12,9 @@ import { useColors } from '../providers/ColorProvider';
|
||||
import { useSettings } from '../providers/SettingsProvider';
|
||||
import { useWidget } from '../providers/WidgetProvider';
|
||||
|
||||
import CloseIcon from './icons/CloseIcon';
|
||||
import './ChatHeader.scss';
|
||||
import CloseIcon from './icons/CloseIcon';
|
||||
import OpenIcon from './icons/OpenIcon';
|
||||
|
||||
type ChatHeaderProps = PropsWithChildren;
|
||||
|
||||
@ -31,13 +32,14 @@ const ChatHeader: FC<ChatHeaderProps> = ({ children }) => {
|
||||
children
|
||||
) : (
|
||||
<>
|
||||
{settings.titleImageUrl && (
|
||||
<img
|
||||
className="sc-header--img"
|
||||
src={settings.titleImageUrl}
|
||||
alt=""
|
||||
/>
|
||||
)}
|
||||
<a
|
||||
href="https://hexabot.ai"
|
||||
target="_blank"
|
||||
title="Powered By Hexabot.ai"
|
||||
className="sc-header--img"
|
||||
>
|
||||
<OpenIcon width={32} height={32} />
|
||||
</a>
|
||||
<div className="sc-header--title">{settings.title}</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
@ -67,7 +67,7 @@ const defaultSettings: ChatSettings = {
|
||||
alwaysScrollToBottom: true,
|
||||
focusOnOpen: true,
|
||||
title: 'Hexabot :)',
|
||||
titleImageUrl: 'https://i.pravatar.cc/300',
|
||||
titleImageUrl: '',
|
||||
inputDisabled: false,
|
||||
placeholder: 'Write something...',
|
||||
menu: [],
|
||||
|
||||
Loading…
Reference in New Issue
Block a user