-
-
- );
-}
-
-interface IconButtonProps extends ButtonHTMLAttributes
-
+
)}
diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx
new file mode 100644
index 0000000..f769569
--- /dev/null
+++ b/src/components/Icon.tsx
@@ -0,0 +1,68 @@
+import { cva, VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { IconBaseProps } from 'react-icons';
+import * as LucideIcons from 'react-icons/lu';
+import { cn } from '../utils';
+
+type IconNames = keyof Omit
{/* close sidebar button */}
-
-
+
+
{/* scrollable conversation list */}
@@ -133,8 +132,10 @@ const ConversationGroup = memo(
{/* group name (by date) */}
{/* we use btn class here to make sure that the padding/margin are aligned with the other items */}
-
-
-
- {group.conversations.map((conv) => (
-
);
}
@@ -214,7 +221,7 @@ const ConversationItem = memo(
};
return (
- -
+ {group.conversations.map((conv) => (
+
-
+
);
}
);
diff --git a/src/components/Textarea.tsx b/src/components/Textarea.tsx
new file mode 100644
index 0000000..81bcab6
--- /dev/null
+++ b/src/components/Textarea.tsx
@@ -0,0 +1,39 @@
+import { cva, VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { cn } from '../utils';
+
+const variants = cva('textarea min-h-auto resize-none', {
+ variants: {
+ variant: {
+ default: 'focus:outline-1 focus:outline-offset-0',
+ code: 'font-mono',
+ transparent:
+ 'bg-transparent border-none outline-none ring-0 focus:outline-none focus:ring-0',
+ },
+ size: {
+ default: 'h-24',
+ full: 'w-full',
+ },
+ },
+ defaultVariants: {
+ variant: 'default',
+ size: 'default',
+ },
+});
+
+export type TextareaProps = React.TextareaHTMLAttributes
-
{/* dropdown menu */}
- - - +
- - +
- - +
-
-
+
+
+
![]()
- prevSibling && onChangeSibling(prevSibling)}
disabled={!prevSibling}
- icon={LuChevronLeft}
- t={t}
- titleKey="chatScreen.titles.previous"
- ariaLabelKey="chatScreen.ariaLabels.switchToPrevious"
- />
+ title={t('chatScreen.titles.previous')}
+ aria-label={t('chatScreen.ariaLabels.switchToPrevious')}
+ >
+ nextSibling && onChangeSibling(nextSibling)}
disabled={!nextSibling}
- icon={LuChevronRight}
- t={t}
- titleKey="chatScreen.titles.next"
- ariaLabelKey="chatScreen.ariaLabels.switchToNext"
- />
+ title={t('chatScreen.titles.next')}
+ aria-label={t('chatScreen.ariaLabels.switchToNext')}
+ >
+
)}
{/* re-generate assistant message */}
{isAssistant && (
-
+ (showThoughtInProgress);
if (!content) return null;
return (
- ,
diff --git a/src/components/settings/ImportExportComponent.tsx b/src/pages/Settings/components/ImportExportComponent.tsx
similarity index 79%
rename from src/components/settings/ImportExportComponent.tsx
rename to src/pages/Settings/components/ImportExportComponent.tsx
index 24d87ac..94c47ca 100644
--- a/src/components/settings/ImportExportComponent.tsx
+++ b/src/pages/Settings/components/ImportExportComponent.tsx
@@ -1,10 +1,10 @@
import { useTranslation } from 'react-i18next';
-import { LuEye, LuMessageCircleMore } from 'react-icons/lu';
import { TbDatabaseExport, TbDatabaseImport } from 'react-icons/tb';
import { DelimeterComponent, SettingsSectionLabel } from '.';
-import { useAppContext } from '../../context/app';
-import { normalizeUrl } from '../../utils';
-import { downloadAsFile } from '../common';
+import { Button, Icon, Label } from '../../../components';
+import { useAppContext } from '../../../store/app';
+import { normalizeUrl } from '../../../utils';
+import { downloadAsFile } from '../../../utils/downloadAsFile';
export function ImportExportComponent({ onClose }: { onClose: () => void }) {
const { t } = useTranslation();
@@ -37,15 +37,15 @@ export function ImportExportComponent({ onClose }: { onClose: () => void }) {
return (
<>
-
-
-
);
}
diff --git a/src/components/settings/PresetManager.tsx b/src/pages/Settings/components/PresetManager.tsx
similarity index 80%
rename from src/components/settings/PresetManager.tsx
rename to src/pages/Settings/components/PresetManager.tsx
index 09aaeaf..872be2e 100644
--- a/src/components/settings/PresetManager.tsx
+++ b/src/pages/Settings/components/PresetManager.tsx
@@ -1,16 +1,10 @@
import { Trans, useTranslation } from 'react-i18next';
-import {
- LuCirclePlay,
- LuEllipsisVertical,
- LuPencil,
- LuSave,
- LuTrash,
-} from 'react-icons/lu';
import { SettingsSectionLabel } from '.';
-import { CONFIG_DEFAULT } from '../../config';
-import { useModals } from '../../context/modal';
-import { Configuration, ConfigurationPreset } from '../../types';
-import { dateFormatter } from '../../utils';
+import { Button, Icon } from '../../../components';
+import { CONFIG_DEFAULT } from '../../../config';
+import { useModals } from '../../../store/modal';
+import { Configuration, ConfigurationPreset } from '../../../types';
+import { dateFormatter } from '../../../utils';
export function PresetManager({
config,
@@ -95,15 +89,16 @@ export function PresetManager({
@@ -132,24 +127,26 @@ export function PresetManager({
{t('codeRunner.canvasPyInterpreter.title')}
- setCanvasData(null)}
- />
+ >
+
-
-
diff --git a/src/components/ChatInput.tsx b/src/pages/Chat/components/ChatInput.tsx
similarity index 76%
rename from src/components/ChatInput.tsx
rename to src/pages/Chat/components/ChatInput.tsx
index 1141f67..9ddd76a 100644
--- a/src/components/ChatInput.tsx
+++ b/src/pages/Chat/components/ChatInput.tsx
@@ -1,24 +1,21 @@
import { memo, useCallback, useEffect, useMemo } from 'react';
import toast from 'react-hot-toast';
import { useTranslation } from 'react-i18next';
-import {
- LuArrowUp,
- LuCircleStop,
- LuMic,
- LuPaperclip,
- LuSquare,
-} from 'react-icons/lu';
import { TbAdjustmentsHorizontal } from 'react-icons/tb';
import { useNavigate } from 'react-router';
-import { useChatContext } from '../context/chat';
-import { ChatTextareaApi, useChatTextarea } from '../hooks/useChatTextarea';
-import { useFileUpload } from '../hooks/useFileUpload';
+import { Button, Icon, Label, Textarea } from '../../../components';
+import {
+ ChatTextareaApi,
+ useChatTextarea,
+} from '../../../hooks/useChatTextarea';
+import { useFileUpload } from '../../../hooks/useFileUpload';
import SpeechToText, {
IS_SPEECH_RECOGNITION_SUPPORTED,
SpeechRecordCallback,
-} from '../hooks/useSpeechToText';
-import { MessageExtra } from '../types';
-import { classNames, cleanCurrentUrl } from '../utils';
+} from '../../../hooks/useSpeechToText';
+import { useChatContext } from '../../../store/chat';
+import { MessageExtra } from '../../../types';
+import { cleanCurrentUrl } from '../../../utils';
import { DropzoneArea } from './DropzoneArea';
/**
@@ -112,10 +109,12 @@ export const ChatInput = memo(
disabled={isPending}
>
+ />
+
-
+
- {t('codeRunner.canvasPyInterpreter.links.reportBug')}
+ {t('codeRunner.links.reportBug')}
-
+ />
-
+ />
{/* buttons area */}
diff --git a/src/components/ChatInputExtraContextItem.tsx b/src/pages/Chat/components/ChatInputExtraContextItem.tsx
similarity index 82%
rename from src/components/ChatInputExtraContextItem.tsx
rename to src/pages/Chat/components/ChatInputExtraContextItem.tsx
index ffa3ed0..72194ab 100644
--- a/src/components/ChatInputExtraContextItem.tsx
+++ b/src/pages/Chat/components/ChatInputExtraContextItem.tsx
@@ -1,8 +1,8 @@
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
-import { LuFileText, LuVolume2, LuX } from 'react-icons/lu';
-import { MessageExtra } from '../types';
-import { classNames } from '../utils';
+import { Button, Icon } from '../../../components';
+import { MessageExtra } from '../../../types';
+import { classNames } from '../../../utils';
export default function ChatInputExtraContextItem({
items,
@@ -40,13 +40,14 @@ export default function ChatInputExtraContextItem({
>
{removeItem && (
@@ -96,12 +105,13 @@ export default function ChatInputExtraContextItem({
-
+
@@ -165,24 +164,28 @@ export const ChatInput = memo(
{({ isRecording, startRecording, stopRecording }) => (
<>
{!isRecording && (
-
+
-
+
)}
@@ -71,9 +72,17 @@ export default function ChatInputExtraContextItem({
aria-description={t('chatInput.ariaLabels.documentIcon')}
>
{item.type === 'audioFile' ? (
-
{showingItem.name ?? t('chatInput.item.extraContentName')}
-
+ setShow(-1)} />
+
{showingItem.type === 'imageFile' ? (
{msg.role === 'user' && (
<>
-
+
@@ -492,36 +491,40 @@ const ThinkingSection = memo(function ThinkingSection({
const {
config: { showThoughtInProgress, showRawAssistantMessage },
} = useAppContext();
+ const [open, setOpen] = useState
-
-
+
+
);
});
@@ -561,26 +564,30 @@ const PlayButton = memo(function PlayButton({
{({ isPlaying, play, stop }) => (
<>
{!isPlaying && (
-
-
-
- {isThinking && (
- <>
-
-
+ {isThinking && (
+ <>
+
-
@@ -531,8 +534,8 @@ const ThinkingSection = memo(function ThinkingSection({
-
{canRunCode && (
-
);
}
diff --git a/src/components/MermaidChart.tsx b/src/pages/Chat/components/MermaidChart.tsx
similarity index 98%
rename from src/components/MermaidChart.tsx
rename to src/pages/Chat/components/MermaidChart.tsx
index 66da42d..b701f6d 100644
--- a/src/components/MermaidChart.tsx
+++ b/src/pages/Chat/components/MermaidChart.tsx
@@ -1,5 +1,5 @@
import { useEffect, useMemo, useRef, useState } from 'react';
-import { isDev } from '../config';
+import { isDev } from '../../../config';
declare global {
interface Window {
diff --git a/src/pages/Chat/components/OpenInNewTab.tsx b/src/pages/Chat/components/OpenInNewTab.tsx
new file mode 100644
index 0000000..74bad41
--- /dev/null
+++ b/src/pages/Chat/components/OpenInNewTab.tsx
@@ -0,0 +1,22 @@
+/**
+ * Renders a link that opens in a new tab with proper security and accessibility attributes.
+ *
+ * @param href - URL to visit in new tab
+ * @param children - Visible link text
+ */
+export const OpenInNewTab = ({
+ href,
+ children,
+}: {
+ href: string;
+ children: string;
+}) => (
+
+ {children}
+
+);
diff --git a/src/pages/ChatScreen.tsx b/src/pages/Chat/index.tsx
similarity index 93%
rename from src/pages/ChatScreen.tsx
rename to src/pages/Chat/index.tsx
index f607159..e057892 100644
--- a/src/pages/ChatScreen.tsx
+++ b/src/pages/Chat/index.tsx
@@ -1,19 +1,19 @@
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import CanvasPyInterpreter from '../components/CanvasPyInterpreter';
-import { ChatInput } from '../components/ChatInput';
-import ChatMessage from '../components/ChatMessage';
-import { useAppContext } from '../context/app';
-import { CallbackGeneratedChunk, useChatContext } from '../context/chat';
-import IndexedDB from '../database/indexedDB';
-import { useChatScroll } from '../hooks/useChatScroll';
+import IndexedDB from '../../database/indexedDB';
+import { useChatScroll } from '../../hooks/useChatScroll';
+import { useAppContext } from '../../store/app';
+import { CallbackGeneratedChunk, useChatContext } from '../../store/chat';
import {
CanvasType,
Conversation,
Message,
MessageDisplay,
MessageExtra,
-} from '../types';
-import { classNames } from '../utils';
+} from '../../types';
+import { classNames } from '../../utils';
+import CanvasPyInterpreter from './components/CanvasPyInterpreter';
+import { ChatInput } from './components/ChatInput';
+import ChatMessage from './components/ChatMessage';
function getListMessageDisplay(
msgs: Readonly
-
void }) {
onInput={onImport}
hidden
/>
-
+
-
+
{({ label, note }) => (
-
-
+
diff --git a/src/components/settings/ThemeController.tsx b/src/pages/Settings/components/ThemeController.tsx
similarity index 90%
rename from src/components/settings/ThemeController.tsx
rename to src/pages/Settings/components/ThemeController.tsx
index 8288b94..b07bcef 100644
--- a/src/components/settings/ThemeController.tsx
+++ b/src/pages/Settings/components/ThemeController.tsx
@@ -1,8 +1,8 @@
import { useMemo } from 'react';
import { Trans } from 'react-i18next';
-import { SYNTAX_THEMES, THEMES } from '../../config';
-import { useAppContext } from '../../context/app';
-import { Dropdown, DropdownOption } from '../common';
+import { Dropdown, DropdownOption, Label } from '../../../components';
+import { SYNTAX_THEMES, THEMES } from '../../../config';
+import { useAppContext } from '../../../store/app';
export function ThemeController() {
const dataThemes = ['auto', ...THEMES].map((theme) => ({
@@ -57,7 +57,7 @@ export function ThemeController() {
- - +
- - +