Skip to content

Commit 1669b93

Browse files
mikespraguemikesprague
committed
revert(6764f59): several million lint suggested updates
1 parent 99664b2 commit 1669b93

12 files changed

+520
-565
lines changed

‎app/components/ChatBubble.tsx

Lines changed: 73 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -37,18 +37,6 @@ interface ChatBubbleProps {
3737
totalMessages?: number;
3838
}
3939

40-
const Pre = memo(
41-
({ children }) => (
42-
<pre className="code-pre">
43-
<CopyToClipboard key={nanoid()} textToCopy={children.props.children} />
44-
{children}
45-
</pre>
46-
),
47-
[]
48-
);
49-
50-
Pre.displayName = 'Pre';
51-
5240
export const ChatBubble = memo(
5341
({
5442
index,
@@ -60,10 +48,23 @@ export const ChatBubble = memo(
6048
model,
6149
reload,
6250
stop,
63-
totalMessages,
51+
totalMessages
6452
}: ChatBubbleProps) => {
6553
const editorTheme = useAtomValue(editorThemeAtom);
66-
const copyToClipBoardKey = useMemo(() => nanoid(), []);
54+
const copyToClipBoardKey = nanoid();
55+
const preCopyToClipBoardKey = nanoid();
56+
57+
const Pre = ({ children }) => {
58+
return (
59+
<pre className="code-pre">
60+
<CopyToClipboard
61+
key={preCopyToClipBoardKey}
62+
textToCopy={children.props.children}
63+
/>
64+
{children}
65+
</pre>
66+
);
67+
};
6768

6869
const rehypePlugins = useMemo(
6970
() => [rehypeKatex, rehypeSanitize, rehypeStringify],
@@ -101,86 +102,29 @@ export const ChatBubble = memo(
101102
);
102103
}, [index, isLoading, isUser, totalMessages]);
103104

104-
const chatClass = useMemo(
105-
() =>
106-
clsx('chat mb-10', {
105+
return (
106+
(<div
107+
className={clsx('chat mb-10', {
107108
'chat-start': isUser,
108109
'chat-end': !isUser,
109-
}),
110-
[isUser]
111-
);
112-
113-
const avatarClass = useMemo(
114-
() =>
115-
clsx('w-12 pt-2 p-1 rounded', {
116-
'bg-primary text-primary-content': isUser,
117-
'bg-secondary text-secondary-content': !isUser,
118-
}),
119-
[isUser]
120-
);
121-
122-
const chatBubbleClass = useMemo(
123-
() =>
124-
clsx('prose relative chat-bubble', {
125-
'chat-bubble-primary': isUser,
126-
'chat-bubble-secondary bot': !isUser,
127-
}),
128-
[isUser]
129-
);
130-
131-
const chatFooterClass = useMemo(
132-
() =>
133-
clsx('chat-footer', {
134-
bot: !isUser,
135-
}),
136-
[isUser]
137-
);
138-
139-
const markdownComponents = useMemo(
140-
() => ({
141-
pre: Pre,
142-
code(props) {
143-
const { children, className = 'code-pre', node, ...rest } = props;
144-
const match = /language-(\w+)/.exec(className || '');
145-
return match ? (
146-
<SyntaxHighlighter
147-
{...rest}
148-
style={editorTheme}
149-
language={match[1]}
150-
PreTag="div"
151-
showLineNumbers={true}
152-
>
153-
{String(children).replace(/\n$/, '')}
154-
</SyntaxHighlighter>
155-
) : (
156-
<code {...rest} className={className}>
157-
{children}
158-
</code>
159-
);
160-
},
161-
}),
162-
[editorTheme]
163-
);
164-
165-
const renderedMarkdown = useMemo(
166-
() => (
167-
<Markdown
168-
rehypePlugins={rehypePlugins}
169-
remarkPlugins={remarkPlugins}
170-
components={markdownComponents}
171-
>
172-
{messageContent.replace(/\n/g, ' \n')}
173-
</Markdown>
174-
),
175-
[rehypePlugins, remarkPlugins, markdownComponents, messageContent]
176-
);
177-
178-
return (
179-
<div className={chatClass}>
110+
})}
111+
>
180112
<div className="chat-image avatar">
181-
<div className={avatarClass}>{chatBubbleUserIcon}</div>
113+
<div
114+
className={clsx('w-12 pt-2 p-1 rounded', {
115+
'bg-primary text-primary-content': isUser,
116+
'bg-secondary text-secondary-content': !isUser,
117+
})}
118+
>
119+
{chatBubbleUserIcon}
120+
</div>
182121
</div>
183-
<div className={chatBubbleClass}>
122+
<div
123+
className={clsx('prose relative chat-bubble', {
124+
'chat-bubble-primary': isUser,
125+
'chat-bubble-secondary bot': !isUser,
126+
})}
127+
>
184128
{(isUser || !isLoading || index !== totalMessages) && (
185129
<>
186130
<CopyToClipboard
@@ -198,9 +142,45 @@ export const ChatBubble = memo(
198142
) : null}
199143
</>
200144
)}
201-
{renderedMarkdown}
145+
<Markdown
146+
rehypePlugins={rehypePlugins}
147+
remarkPlugins={remarkPlugins}
148+
components={{
149+
pre: Pre,
150+
code(props) {
151+
const {
152+
children,
153+
className = 'code-pre',
154+
node,
155+
...rest
156+
} = props;
157+
const match = /language-(\w+)/.exec(className || '');
158+
return match ? (
159+
<SyntaxHighlighter
160+
{...rest}
161+
style={editorTheme}
162+
language={match[1]}
163+
PreTag="div"
164+
showLineNumbers={true}
165+
>
166+
{String(children).replace(/\n$/, '')}
167+
</SyntaxHighlighter>
168+
) : (
169+
<code {...rest} className={className}>
170+
{children}
171+
</code>
172+
);
173+
},
174+
}}
175+
>
176+
{messageContent.replace(/\n/g, ' \n')}
177+
</Markdown>
202178
</div>
203-
<div className={chatFooterClass}>
179+
<div
180+
className={clsx('chat-footer', {
181+
'bot': !isUser,
182+
})}
183+
>
204184
<ChatMeta
205185
index={index}
206186
isLoading={isLoading}
@@ -211,7 +191,7 @@ export const ChatBubble = memo(
211191
totalMessages={totalMessages}
212192
/>
213193
</div>
214-
</div>
194+
</div>)
215195
);
216196
}
217197
);

‎app/components/ChatMeta.tsx

Lines changed: 11 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import dayjs from 'dayjs';
55
import isToday from 'dayjs/plugin/isToday';
66
import relativeTime from 'dayjs/plugin/relativeTime';
77
import { atom, useAtom, useAtomValue } from 'jotai';
8-
import { memo, useEffect, useMemo } from 'react';
8+
import { memo, useEffect } from 'react';
99

1010
import { parametersAtom } from '@/app/components/Parameters';
1111
import { userMetaAtom } from '@/app/components/UserAvatar';
@@ -33,7 +33,7 @@ export const ChatMeta = memo(
3333
messageCreatedAt,
3434
model,
3535
stop,
36-
totalMessages,
36+
totalMessages
3737
}: ChatMetaProps) => {
3838
const lastUpdatedStringAtom = atom('');
3939
const modelAtom = atom(model);
@@ -69,25 +69,6 @@ export const ChatMeta = memo(
6969
return () => clearInterval(clockInterval);
7070
}, [messageCreatedAt, setLastUpdatedString]);
7171

72-
const MemoizedStopIcon = useMemo(
73-
() => (
74-
<div
75-
className="cursor-pointer tooltip tooltip-secondary tooltip-left"
76-
data-tip={'Stop loading response'}
77-
onClick={stop}
78-
onKeyDown={stop}
79-
>
80-
<FontAwesomeIcon icon={faStop} />
81-
</div>
82-
),
83-
[stop]
84-
);
85-
86-
const MemoizedSpinnerIcon = useMemo(
87-
() => <FontAwesomeIcon icon={faSpinner} />,
88-
[]
89-
);
90-
9172
return (
9273
<>
9374
<div
@@ -104,8 +85,15 @@ export const ChatMeta = memo(
10485
>
10586
{!isUser && index === totalMessages && isLoading ? (
10687
<>
107-
{MemoizedStopIcon}
108-
{MemoizedSpinnerIcon}
88+
<div
89+
className="cursor-pointer tooltip tooltip-secondary tooltip-left"
90+
data-tip={'Stop loading response'}
91+
onClick={stop}
92+
onKeyDown={stop}
93+
>
94+
<FontAwesomeIcon icon={faStop} className="mr-2" />
95+
</div>
96+
<FontAwesomeIcon icon={faSpinner} spinPulse className="mr-2" />
10997
</>
11098
) : null}
11199
{isUser ? `${userMeta?.name ?? 'User'}` : `${modelInfo}`}

‎app/components/ClearChatButton.tsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { faEraser } from '@fortawesome/free-solid-svg-icons';
22
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
3-
import { memo, useCallback, useMemo } from 'react';
3+
import { memo, useCallback } from 'react';
44

55
import { database } from '@/app/database/database.config';
66

@@ -10,7 +10,10 @@ interface ClearChatButtonProps {
1010
}
1111

1212
export const ClearChatButton = memo(
13-
({ buttonText = 'Clear Chat', isLoading }: ClearChatButtonProps) => {
13+
({
14+
buttonText = 'Clear Chat',
15+
isLoading
16+
}: ClearChatButtonProps) => {
1417
const clearHistory = useCallback(async (doConfirm = true) => {
1518
const clearMessages = async () => {
1619
try {
@@ -29,8 +32,6 @@ export const ClearChatButton = memo(
2932
}
3033
}, []);
3134

32-
const memoizedIcon = useMemo(() => <FontAwesomeIcon icon={faEraser} />, []);
33-
3435
return (
3536
<>
3637
<button
@@ -39,7 +40,7 @@ export const ClearChatButton = memo(
3940
disabled={isLoading}
4041
className={isLoading ? 'btn-disabled' : ''}
4142
>
42-
{memoizedIcon}
43+
<FontAwesomeIcon icon={faEraser} />
4344
{buttonText}
4445
</button>
4546
</>

0 commit comments

Comments
 (0)