Skip to content

Feature/tonomy login #81

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 5 commits into from
Closed

Feature/tonomy login #81

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f574955
fix: husky install command
theblockstalk Sep 25, 2025
7a429cf
feat: changed fonts and colour scheme
theblockstalk Sep 25, 2025
84c0d9d
feat: using Tonomy logo
theblockstalk Sep 25, 2025
2d3698d
feat: removed unused features
theblockstalk Sep 25, 2025
e8c86a2
feat: changed browser tab title and logo
theblockstalk Sep 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 60 additions & 0 deletions app/components/button.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,3 +81,63 @@
margin-left: 5px;
}
}

.shadow {
box-shadow: var(--card-shadow);
}

.border {
border: var(--border-in-light);
}

.icon-button-icon {
width: 16px;
height: 16px;
display: flex;
justify-content: center;
align-items: center;
}

@media only screen and (max-width: 600px) {
.icon-button {
padding: 16px;
}
}

.icon-button-text {
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

&:not(:first-child) {
margin-left: 5px;
}
}

// Tonomy brand enhancements for buttons
:global(.tonomy-blackmode) .icon-button {
/* Keep regular buttons neutral - only style primary buttons with color */

&.primary {
background: var(--tonomy-purple);
color: var(--tonomy-white);
border: 1px solid var(--tonomy-purple);

&:hover {
background: var(--tonomy-pink);
border-color: var(--tonomy-pink);
}

path {
fill: var(--tonomy-white) !important;
}
}
}

// Tonomy brand typography
:global(.tonomy-blackmode) .icon-button-text {
font-family: 'Host Grotesk', sans-serif;
font-weight: 600;
letter-spacing: 0.02em;
}
59 changes: 59 additions & 0 deletions app/components/chat.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -712,4 +712,63 @@
cursor: pointer;
pointer-events: all;
}
}

// Tonomy brand enhancements for chat messages
:global(.tonomy-blackmode) {

// Chat message bubbles - AI messages (left side)
.chat-message .chat-message-item {
background-color: var(--tonomy-deep-purple);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #E8E8E8; // Ensure text is white/light gray

// Make markdown content white too
* {
color: #E8E8E8;
}
}

// User messages (right side) - slightly different background
.chat-message-user .chat-message-item {
background-color: rgba(88, 51, 188, 0.15); // Subtle purple tint for user messages
border: 1px solid rgba(88, 51, 188, 0.3);
color: #E8E8E8; // Ensure text is white/light gray

// Make markdown content white too
* {
color: #E8E8E8;
}
}

// Chat message status text (typing indicator, etc.)
.chat-message-status {
color: #A0A0A0; // Muted gray for status text
}

// Role names (model names, etc.)
.chat-message-role-name {
color: var(--tonomy-purple); // Only the model name gets brand color
font-family: 'Host Grotesk', sans-serif;
font-weight: 600;
}

// Chat input actions styling
.chat-input-action {
background-color: rgba(88, 51, 188, 0.1);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #E8E8E8;

&.selected {
background-color: rgba(88, 51, 188, 0.2);
border-color: var(--tonomy-purple);
}
}

// Toast/scroll down button
.toast-content {
background-color: var(--tonomy-deep-purple);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #E8E8E8;
}
}
2 changes: 1 addition & 1 deletion app/components/chat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -937,7 +937,7 @@ function _Chat() {
: -1;

const autoFocus = !isMobileScreen; // wont auto focus on mobile screen
const showMaxIcon = !isMobileScreen;
const showMaxIcon = false; //!isMobileScreen;

useCommand({
fill: setUserInput,
Expand Down
4 changes: 2 additions & 2 deletions app/components/emoji.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import EmojiPicker, {

import { Model } from "../store";

import MlcIcon from "../icons/mlc.svg";
import Image from "next/image";

export function getEmojiUrl(unified: string, style: EmojiStyle) {
// Whoever owns this Content Delivery Network (CDN), I am using your CDN to serve emojis
Expand Down Expand Up @@ -35,7 +35,7 @@ export function Avatar(props: { model?: Model; avatar?: string }) {
if (props.model) {
return (
<div className="bot-avatar mlc-icon no-dark">
<MlcIcon />
<Image src="/tonomy-logo.png" alt="Tonomy" width={18} height={18} />
</div>
);
}
Expand Down
81 changes: 81 additions & 0 deletions app/components/home.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,14 @@

width: var(--window-width);
height: var(--window-height);

// Tonomy brand enhancements
:global(.tonomy-blackmode) & {
background: var(--tonomy-deep-purple);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 20px 40px 0 rgba(9, 3, 26, 0.8);
/* Remove explicit text color - let it use default --black (light gray) */
}
}

.container {
Expand Down Expand Up @@ -72,6 +80,12 @@
}
}
}

// Tonomy brand enhancements
:global(.tonomy-blackmode) & {
background: var(--tonomy-deep-blue);
box-shadow: inset -2px 0px 2px 0px rgba(209, 84, 239, 0.1);
}
}

.sidebar-drag {
Expand Down Expand Up @@ -165,12 +179,30 @@
font-size: 20px;
font-weight: bold;
animation: slide-in ease 0.3s;

// Tonomy brand enhancements
:global(.tonomy-blackmode) & {
font-family: 'Host Grotesk', sans-serif;
font-weight: 800; // Extra Bold
line-height: 1.0;
letter-spacing: 0.02em;
color: var(--tonomy-purple); // Use purple instead of pink for main title
}
}

.sidebar-sub-title {
font-size: 12px;
font-weight: 400;
animation: slide-in ease 0.3s;

// Tonomy brand enhancements
:global(.tonomy-blackmode) & {
font-family: 'Host Grotesk', sans-serif;
font-weight: 600; // Semi Bold
line-height: 1.0;
letter-spacing: 0.02em;
/* Keep subtitle neutral - no color */
}
}

.sidebar-body {
Expand All @@ -191,14 +223,33 @@
border: 2px solid transparent;
position: relative;
content-visibility: auto;

// Tonomy brand enhancements
:global(.tonomy-blackmode) & {
background: rgba(88, 51, 188, 0.1);
border: 1px solid transparent;
transition: all 0.3s ease;
}
}

.chat-item:hover {
background-color: var(--hover-color);

// Tonomy brand enhancements
:global(.tonomy-blackmode) & {
background: rgba(88, 51, 188, 0.2);
border-color: var(--tonomy-purple);
}
}

.chat-item-selected {
border-color: var(--primary);

// Tonomy brand enhancements
:global(.tonomy-blackmode) & {
border-color: var(--tonomy-pink);
background: rgba(209, 84, 239, 0.1);
}
}

.chat-item-title {
Expand All @@ -210,6 +261,15 @@
text-overflow: ellipsis;
white-space: nowrap;
animation: slide-in ease 0.3s;

// Tonomy brand enhancements
:global(.tonomy-blackmode) & {
font-family: 'Host Grotesk', sans-serif;
font-weight: 600; // Semi Bold
line-height: 1.3;
letter-spacing: 0;
/* Remove pink color - let it use default text color (light gray) */
}
}

.chat-item-delete {
Expand Down Expand Up @@ -365,6 +425,15 @@
width: 100%;
}
}

// Tonomy brand enhancements
:global(.tonomy-blackmode) & {
background: var(--tonomy-deep-blue);

.loading-content-logo {
width: 80px;
}
}
}


Expand All @@ -378,6 +447,18 @@

padding: 4rem;
text-align: center;

// Tonomy brand enhancements
:global(.tonomy-blackmode) & {
background: var(--tonomy-deep-blue);

p {
font-family: 'Host Grotesk', sans-serif;
font-weight: 400;
line-height: 1.3;
letter-spacing: 0;
}
}
}

.rtl-screen {
Expand Down
25 changes: 21 additions & 4 deletions app/components/home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import { ServiceWorkerMLCEngine } from "@mlc-ai/web-llm";

import MlcIcon from "../icons/mlc.svg";
import LoadingIcon from "../icons/three-dots.svg";
import Image from "next/image";

import Locale from "../locales";
import { getCSSVar, useMobileScreen } from "../utils";
Expand All @@ -34,8 +35,15 @@ export function Loading(props: { noLogo?: boolean }) {
return (
<div className={styles["loading-content"] + " no-dark"}>
{!props.noLogo && (
<div className={styles["loading-content-logo"] + " no-dark mlc-icon"}>
<MlcIcon />
<div
className={styles["loading-content-logo"] + " no-dark tonomy-icon"}
>
<Image
src="/tonomy-logo.png"
alt="Tonomy Logo"
width={80}
height={80}
/>
</div>
)}
<LoadingIcon />
Expand Down Expand Up @@ -72,11 +80,17 @@ export function useSwitchTheme() {
useEffect(() => {
document.body.classList.remove("light");
document.body.classList.remove("dark");
document.body.classList.remove("tonomy-blackmode");

if (config.theme === "dark") {
document.body.classList.add("dark");
} else if (config.theme === "light") {
document.body.classList.add("light");
} else if (config.theme === "tonomy-blackmode") {
document.body.classList.add("tonomy-blackmode");
} else {
// Default to Tonomy blackmode theme for auto and any other case
document.body.classList.add("tonomy-blackmode");
}

const metaDescriptionDark = document.querySelector(
Expand All @@ -87,8 +101,11 @@ export function useSwitchTheme() {
);

if (config.theme === "auto") {
metaDescriptionDark?.setAttribute("content", "#151515");
metaDescriptionLight?.setAttribute("content", "#fafafa");
metaDescriptionDark?.setAttribute("content", "#09031A");
metaDescriptionLight?.setAttribute("content", "#1F1A2D");
} else if (config.theme === "tonomy-blackmode") {
metaDescriptionDark?.setAttribute("content", "#09031A");
metaDescriptionLight?.setAttribute("content", "#09031A");
} else {
const themeColor = getCSSVar("--theme-color");
metaDescriptionDark?.setAttribute("content", themeColor);
Expand Down
Loading
Loading