Skip to content

Commit f9db686

Browse files
mikespraguemikesprague
committed
refactor: update for tailwindcss v4 and daisyui v5
2 parents 64170a8 + 258bd37 commit f9db686

15 files changed

+1316
-2530
lines changed

‎app/components/Footer.tsx

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,25 @@ import { memo, useEffect } from 'react';
44
import { TokenCount } from '@/app/components/TokenCount';
55

66
interface FooterProps {
7-
formRef?: (...args: unknown[]) => unknown | {
8-
current?: object;
9-
};
7+
formRef?: (...args: unknown[]) =>
8+
| unknown
9+
| {
10+
current?: object;
11+
};
1012
handleInputChange(...args: unknown[]): unknown;
1113
handleSubmit(...args: unknown[]): unknown;
1214
input: string;
1315
isLoading: boolean;
14-
systemMessageRef?: (...args: unknown[]) => unknown | {
15-
current?: object;
16-
};
17-
textAreaRef?: (...args: unknown[]) => unknown | {
18-
current?: object;
19-
};
16+
systemMessageRef?: (...args: unknown[]) =>
17+
| unknown
18+
| {
19+
current?: object;
20+
};
21+
textAreaRef?: (...args: unknown[]) =>
22+
| unknown
23+
| {
24+
current?: object;
25+
};
2026
}
2127

2228
export const Footer = memo(
@@ -27,7 +33,7 @@ export const Footer = memo(
2733
input,
2834
isLoading,
2935
systemMessageRef,
30-
textAreaRef
36+
textAreaRef,
3137
}: FooterProps) => {
3238
useEffect(() => {
3339
if (document?.activeElement !== systemMessageRef?.current && !isLoading) {
@@ -46,7 +52,7 @@ export const Footer = memo(
4652
<textarea
4753
autoFocus={true}
4854
className={clsx(
49-
'w-full max-w-6xl p-2 overflow-x-hidden overflow-y-auto text-sm border border-gray-300 rounded shadow-xl min-h-14 h-14 lg:text-base lg:h-20 lg:min-h-20 max-h-75',
55+
'bg-base-100 w-full max-w-6xl p-2 overflow-x-hidden overflow-y-auto text-sm border border-gray-300 rounded shadow-xl min-h-14 h-14 lg:text-base lg:h-20 lg:min-h-20 max-h-75',
5056
{
5157
'skeleton': isLoading,
5258
}

‎app/components/Header.tsx

Lines changed: 79 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -33,43 +33,84 @@ interface HeaderProps {
3333
systemMessageRef: object;
3434
}
3535

36-
export const Header = memo(({
37-
input,
38-
isLoading,
39-
systemMessageRef
40-
}: HeaderProps) => {
41-
useEffect(() => {
42-
const details = [...document.querySelectorAll('.menu details')];
43-
document.addEventListener('click', (event) => {
44-
if (!details.some((el) => el.contains(event.target))) {
45-
for (const el of details) {
46-
el.removeAttribute('open');
36+
export const Header = memo(
37+
({ input, isLoading, systemMessageRef }: HeaderProps) => {
38+
useEffect(() => {
39+
const details = [...document.querySelectorAll('.menu details')];
40+
document.addEventListener('click', (event) => {
41+
if (!details.some((el) => el.contains(event.target))) {
42+
for (const el of details) {
43+
el.removeAttribute('open');
44+
}
45+
} else {
46+
for (const el of details) {
47+
!el.contains(event.target) ? el.removeAttribute('open') : '';
48+
}
4749
}
48-
} else {
49-
for (const el of details) {
50-
!el.contains(event.target) ? el.removeAttribute('open') : '';
51-
}
52-
}
53-
});
54-
}, []);
50+
});
51+
}, []);
5552

56-
return (
57-
<div className="fixed top-0 z-50 navbar bg-base-300">
58-
<div className="navbar-start">
59-
<div className="dropdown">
60-
{/* biome-ignore lint/a11y/noLabelWithoutControl: <explanation> */}
61-
<label tabIndex={0} className="btn btn-ghost lg:hidden">
62-
<Suspense fallback={<div>Loading...</div>}>
63-
<FontAwesomeIcon icon={faBars} />
64-
</Suspense>
65-
</label>
66-
<ul
67-
tabIndex={0}
68-
className="p-2 mt-3 shadow menu menu-sm dropdown-content z-1 bg-base-200 rounded-box"
53+
return (
54+
<div className="fixed top-0 z-50 navbar bg-base-300">
55+
<div className="navbar-start">
56+
<div className="dropdown">
57+
{/* biome-ignore lint/a11y/noLabelWithoutControl: <explanation> */}
58+
<label tabIndex={0} className="btn btn-ghost lg:hidden">
59+
<Suspense fallback={<div>Loading...</div>}>
60+
<FontAwesomeIcon icon={faBars} />
61+
</Suspense>
62+
</label>
63+
<ul
64+
tabIndex={0}
65+
className="p-2 w-52 mt-3 shadow menu menu-sm dropdown-content z-1 bg-base-200 rounded-box"
66+
>
67+
<li>
68+
<details className="system-message-dropdown">
69+
<summary className="whitespace-nowrap">
70+
<Suspense fallback={<div>Loading...</div>}>
71+
<FontAwesomeIcon icon={faRobot} />
72+
</Suspense>
73+
System
74+
</summary>
75+
<ul className="bg-base-200">
76+
<li>
77+
<SystemMessage
78+
input={input}
79+
systemMessageRef={systemMessageRef}
80+
/>
81+
</li>
82+
</ul>
83+
</details>
84+
</li>
85+
<li>
86+
<Parameters />
87+
</li>
88+
<li>
89+
<ClearChatButton buttonText="Clear" isLoading={isLoading} />
90+
</li>
91+
<li>
92+
<ExportChatButton buttonText="Export" isLoading={isLoading} />
93+
</li>
94+
<li>
95+
<ThemeChanger />
96+
</li>
97+
</ul>
98+
</div>
99+
<a
100+
className="text-sm leading-4 normal-case lg:text-xl"
101+
href="https://github.com/cu-cit-cloud-team/azure-openai-gpt4-chat"
102+
target="_blank"
103+
rel="noreferrer noopener"
69104
>
105+
Cloud Team GPT Chat v{pkg.version}
106+
</a>
107+
<UpdateCheck />
108+
</div>
109+
<div className="hidden navbar-center lg:flex">
110+
<ul className="menu menu-horizontal">
70111
<li>
71112
<details className="system-message-dropdown">
72-
<summary className="whitespace-nowrap">
113+
<summary>
73114
<Suspense fallback={<div>Loading...</div>}>
74115
<FontAwesomeIcon icon={faRobot} />
75116
</Suspense>
@@ -99,56 +140,13 @@ export const Header = memo(({
99140
</li>
100141
</ul>
101142
</div>
102-
<a
103-
className="text-sm leading-4 normal-case lg:text-xl"
104-
href="https://github.com/cu-cit-cloud-team/azure-openai-gpt4-chat"
105-
target="_blank"
106-
rel="noreferrer noopener"
107-
>
108-
Cloud Team GPT Chat v{pkg.version}
109-
</a>
110-
<UpdateCheck />
111-
</div>
112-
<div className="hidden navbar-center lg:flex">
113-
<ul className="menu menu-horizontal">
114-
<li>
115-
<details className="system-message-dropdown">
116-
<summary>
117-
<Suspense fallback={<div>Loading...</div>}>
118-
<FontAwesomeIcon icon={faRobot} />
119-
</Suspense>
120-
System
121-
</summary>
122-
<ul className="w-fit bg-base-200">
123-
<li>
124-
<SystemMessage
125-
input={input}
126-
systemMessageRef={systemMessageRef}
127-
/>
128-
</li>
129-
</ul>
130-
</details>
131-
</li>
132-
<li>
133-
<Parameters />
134-
</li>
135-
<li>
136-
<ClearChatButton buttonText="Clear" isLoading={isLoading} />
137-
</li>
138-
<li>
139-
<ExportChatButton buttonText="Export" isLoading={isLoading} />
140-
</li>
141-
<li>
142-
<ThemeChanger />
143-
</li>
144-
</ul>
145-
</div>
146-
<div className="navbar-end">
147-
<UserAvatar />
143+
<div className="navbar-end">
144+
<UserAvatar />
145+
</div>
148146
</div>
149-
</div>
150-
);
151-
});
147+
);
148+
}
149+
);
152150

153151
Header.displayName = 'Header';
154152

0 commit comments

Comments
 (0)