mirror of
https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web.git
synced 2025-10-09 19:46:37 +08:00
sidebar
This commit is contained in:
DirkSchlossmacher
parent
6a6a2490ed
commit
14795c50c0
@ -149,138 +149,144 @@ export function SideBar(props: { className?: string }) {
|
|||||||
[isMobileScreen],
|
[isMobileScreen],
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const usageStatsComponent = showUsageStats && <UsageStats onClose={() => setShowUsageStats(false)} />;
|
||||||
|
|
||||||
useHotKey();
|
useHotKey();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<>
|
||||||
className={`${styles.sidebar} ${props.className} ${
|
{usageStatsComponent} {/* This is where the UsageStats component gets rendered */}
|
||||||
shouldNarrow && styles["narrow-sidebar"]
|
|
||||||
}`}
|
|
||||||
style={{
|
|
||||||
// #3016 disable transition on ios mobile screen
|
|
||||||
transition: isMobileScreen && isIOSMobile ? "none" : undefined,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className={styles["sidebar-header"]} data-tauri-drag-region>
|
|
||||||
<div className={styles["sidebar-title"]} data-tauri-drag-region>
|
|
||||||
AdEx<b>GPT</b> - via API
|
|
||||||
</div>
|
|
||||||
<div className={styles["sidebar-sub-title"]}>
|
|
||||||
secure local UI for
|
|
||||||
<span
|
|
||||||
className={styles["api-link"]} // You might need to define this style
|
|
||||||
onClick={toggleUsageStats}
|
|
||||||
role="button" // Accessibility improvement
|
|
||||||
tabIndex={0} // Accessibility improvement
|
|
||||||
>
|
|
||||||
OpenAI API
|
|
||||||
</span>
|
|
||||||
<br />
|
|
||||||
<a href="https://adexpartners.sharepoint.com/sites/AdExGPT/SitePages/AdExGPT.aspx">
|
|
||||||
FAQ & Support
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div className={styles["sidebar-logo"] + " no-dark"}>
|
|
||||||
{/* Replace img with Image component and add an alt attribute */}
|
|
||||||
<img
|
|
||||||
src="https://assets.cdn.personio.de/logos/85756/default/fc91989a7a2e899e3655593e271461aa.jpg"
|
|
||||||
width="60"
|
|
||||||
height="60" // You need to add the height property as well
|
|
||||||
alt="AdEx Logo" // Provide a meaningful alt text or an empty string if the image is decorative
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={styles["sidebar-header-bar"]}>
|
|
||||||
<IconButton
|
|
||||||
icon={<MaskIcon />}
|
|
||||||
text={shouldNarrow ? undefined : Locale.Mask.Name}
|
|
||||||
className={styles["sidebar-bar-button"]}
|
|
||||||
onClick={() => {
|
|
||||||
if (config.dontShowMaskSplashScreen !== true) {
|
|
||||||
navigate(Path.NewChat, { state: { fromHome: true } });
|
|
||||||
} else {
|
|
||||||
navigate(Path.Masks, { state: { fromHome: true } });
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
shadow
|
|
||||||
/>
|
|
||||||
<IconButton
|
|
||||||
icon={<PluginIcon />}
|
|
||||||
text={shouldNarrow ? undefined : Locale.Plugin.Name}
|
|
||||||
className={styles["sidebar-bar-button"]}
|
|
||||||
onClick={() => showToast(Locale.WIP)}
|
|
||||||
shadow
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
<div
|
||||||
className={styles["sidebar-body"]}
|
className={`${styles.sidebar} ${props.className} ${
|
||||||
onClick={(e) => {
|
shouldNarrow && styles["narrow-sidebar"]
|
||||||
if (e.target === e.currentTarget) {
|
}`}
|
||||||
navigate(Path.Home);
|
style={{
|
||||||
}
|
// #3016 disable transition on ios mobile screen
|
||||||
|
transition: isMobileScreen && isIOSMobile ? "none" : undefined,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<ChatList narrow={shouldNarrow} />
|
<div className={styles["sidebar-header"]} data-tauri-drag-region>
|
||||||
</div>
|
<div className={styles["sidebar-title"]} data-tauri-drag-region>
|
||||||
|
AdEx<b>GPT</b> - via API
|
||||||
<div className={styles["sidebar-tail"]}>
|
|
||||||
<div className={styles["sidebar-actions"]}>
|
|
||||||
<div className={styles["sidebar-action"] + " " + styles.mobile}>
|
|
||||||
<IconButton
|
|
||||||
icon={<CloseIcon />}
|
|
||||||
onClick={async () => {
|
|
||||||
if (await showConfirm(Locale.Home.DeleteChat)) {
|
|
||||||
chatStore.deleteSession(chatStore.currentSessionIndex);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div className={styles["sidebar-sub-title"]}>
|
||||||
<div className={styles["sidebar-action"]}>
|
secure local UI for
|
||||||
<Link to={Path.Settings}>
|
<span
|
||||||
<IconButton icon={<SettingsIcon />} shadow />
|
className={styles["api-link"]} // You might need to define this style
|
||||||
</Link>
|
onClick={toggleUsageStats}
|
||||||
</div>
|
role="button" // Accessibility improvement
|
||||||
|
tabIndex={0} // Accessibility improvement
|
||||||
<div className={styles["sidebar-action"]}>
|
>
|
||||||
<a href={REPO_URL} target="_blank" rel="noopener noreferrer">
|
OpenAI API
|
||||||
<IconButton icon={<GithubIcon />} shadow />
|
</span>
|
||||||
|
<br />
|
||||||
|
<a href="https://adexpartners.sharepoint.com/sites/AdExGPT/SitePages/AdExGPT.aspx">
|
||||||
|
FAQ & Support
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
<div className={styles["sidebar-logo"] + " no-dark"}>
|
||||||
<div className={styles["sidebar-action"]}>
|
{/* Replace img with Image component and add an alt attribute */}
|
||||||
<IconButton
|
<img
|
||||||
icon={<SignoutIcon />}
|
src="https://assets.cdn.personio.de/logos/85756/default/fc91989a7a2e899e3655593e271461aa.jpg"
|
||||||
shadow
|
width="60"
|
||||||
onClick={() => signOut()}
|
height="60" // You need to add the height property as well
|
||||||
|
alt="AdEx Logo" // Provide a meaningful alt text or an empty string if the image is decorative
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
|
||||||
|
<div className={styles["sidebar-header-bar"]}>
|
||||||
<IconButton
|
<IconButton
|
||||||
icon={<AddIcon />}
|
icon={<MaskIcon />}
|
||||||
text={shouldNarrow ? undefined : Locale.Home.NewChat}
|
text={shouldNarrow ? undefined : Locale.Mask.Name}
|
||||||
|
className={styles["sidebar-bar-button"]}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
if (config.dontShowMaskSplashScreen) {
|
if (config.dontShowMaskSplashScreen !== true) {
|
||||||
chatStore.newSession();
|
navigate(Path.NewChat, { state: { fromHome: true } });
|
||||||
navigate(Path.Chat);
|
|
||||||
} else {
|
} else {
|
||||||
navigate(Path.NewChat);
|
navigate(Path.Masks, { state: { fromHome: true } });
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
shadow
|
shadow
|
||||||
/>
|
/>
|
||||||
|
<IconButton
|
||||||
|
icon={<PluginIcon />}
|
||||||
|
text={shouldNarrow ? undefined : Locale.Plugin.Name}
|
||||||
|
className={styles["sidebar-bar-button"]}
|
||||||
|
onClick={() => showToast(Locale.WIP)}
|
||||||
|
shadow
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className={styles["sidebar-body"]}
|
||||||
|
onClick={(e) => {
|
||||||
|
if (e.target === e.currentTarget) {
|
||||||
|
navigate(Path.Home);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ChatList narrow={shouldNarrow} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles["sidebar-tail"]}>
|
||||||
|
<div className={styles["sidebar-actions"]}>
|
||||||
|
<div className={styles["sidebar-action"] + " " + styles.mobile}>
|
||||||
|
<IconButton
|
||||||
|
icon={<CloseIcon />}
|
||||||
|
onClick={async () => {
|
||||||
|
if (await showConfirm(Locale.Home.DeleteChat)) {
|
||||||
|
chatStore.deleteSession(chatStore.currentSessionIndex);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles["sidebar-action"]}>
|
||||||
|
<Link to={Path.Settings}>
|
||||||
|
<IconButton icon={<SettingsIcon />} shadow />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles["sidebar-action"]}>
|
||||||
|
<a href={REPO_URL} target="_blank" rel="noopener noreferrer">
|
||||||
|
<IconButton icon={<GithubIcon />} shadow />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles["sidebar-action"]}>
|
||||||
|
<IconButton
|
||||||
|
icon={<SignoutIcon />}
|
||||||
|
shadow
|
||||||
|
onClick={() => signOut()}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<IconButton
|
||||||
|
icon={<AddIcon />}
|
||||||
|
text={shouldNarrow ? undefined : Locale.Home.NewChat}
|
||||||
|
onClick={() => {
|
||||||
|
if (config.dontShowMaskSplashScreen) {
|
||||||
|
chatStore.newSession();
|
||||||
|
navigate(Path.Chat);
|
||||||
|
} else {
|
||||||
|
navigate(Path.NewChat);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
shadow
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className={styles["sidebar-drag"]}
|
||||||
|
onPointerDown={(e) => onDragStart(e as any)}
|
||||||
|
>
|
||||||
|
<DragIcon />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</>
|
||||||
<div
|
|
||||||
className={styles["sidebar-drag"]}
|
|
||||||
onPointerDown={(e) => onDragStart(e as any)}
|
|
||||||
>
|
|
||||||
<DragIcon />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user