37 |
59 |
39 |
58 |
45 |
46 | }/>
47 | }/>
48 | }/>
49 | // Use the wrapper for new routes
50 | }/>
51 | }/>
52 | }/>
53 | }/>
54 |
56 |
57 |
86 |
138 | );
139 | };
140 |
141 | export default AvatarFieldEditor;
142 |
--------------------------------------------------------------------------------
/src/components/Button.css:
--------------------------------------------------------------------------------
1 | .chat-action-button:hover svg path,
2 | .chat-action-button:hover span {
3 | color: black;
4 | stroke: black;
5 | }
6 |
7 | .dark .chat-action-button:hover svg path,
8 | .dark .chat-action-button:hover span {
9 | color: white;
10 | stroke: white;
11 | }
12 |
13 | .chat-action-button.active svg path,
14 | .chat-action-button.active span {
15 | color: black;
16 | stroke: black;
17 | }
18 |
19 | .dark .chat-action-button.active svg path,
20 | .dark .chat-action-button.active span {
21 | color: white;
22 | stroke: white;
23 | }
--------------------------------------------------------------------------------
/src/components/Button.tsx:
--------------------------------------------------------------------------------
1 | // Button.tsx
2 | import React, {FC} from 'react';
3 |
4 | interface ButtonProps {
5 | onClick: () => void;
6 | children: React.ReactNode;
7 | variant?: 'primary' | 'secondary' | 'critical';
8 | className?: string;
9 | disabled?: boolean;
10 | }
11 |
12 | const Button: FC
88 | {imageSrc.data ? (
89 | 
94 | ) : (
95 |
137 |
106 |
119 |
120 | )}
121 | {!readOnly && ( // Conditionally render the input based on readOnly status
122 |
135 | )}
136 |
95 |
144 | );
145 | };
146 |
147 | export default Chat;
148 |
--------------------------------------------------------------------------------
/src/components/ChatBlock.tsx:
--------------------------------------------------------------------------------
1 | import React, {ChangeEvent, KeyboardEvent, useContext, useEffect, useRef, useState} from 'react';
2 | import {SparklesIcon, UserCircleIcon} from "@heroicons/react/24/outline";
3 | import MarkdownBlock from './MarkdownBlock';
4 | import CopyButton, {CopyButtonMode} from "./CopyButton";
5 | import {ChatMessage, MessageType} from "../models/ChatCompletion";
6 | import UserContentBlock from "./UserContentBlock";
7 | import { UserContext } from "../UserContext";
8 | import TextToSpeechButton from "./TextToSpeechButton";
9 |
10 | interface Props {
11 | block: ChatMessage;
12 | loading: boolean;
13 | isLastBlock: boolean;
14 | }
15 |
16 | const ChatBlock: React.FC
96 |
143 |
98 |
135 | {chatBlocks.map((block, index) => (
136 |
99 | {!conversation ? '' : (
100 |
103 |
104 |
105 |
106 |
107 | )}
108 |
109 | {t('model')}
110 | {conversation && (
111 |
112 |
113 | {conversation.model}
114 |
115 |
116 | {formatContextWindow(findModelById(conversation.model)?.context_window)}
117 |
118 |
119 |
120 |
121 | {findModelById(conversation.model)?.knowledge_cutoff}
122 |
123 |
124 |
125 | )
126 | }
127 |
128 | {!conversation && (
129 |
130 |
131 |
132 | )}
133 |
134 |
81 |
149 | );
150 | };
151 |
152 | export default ChatBlock;
153 |
--------------------------------------------------------------------------------
/src/components/ChatSettingsForm.tsx:
--------------------------------------------------------------------------------
1 | import React, {ChangeEvent, useEffect, useState} from 'react';
2 | import AvatarFieldEditor, {ImageSource} from "./AvatarFieldEditor";
3 | import 'rc-slider/assets/index.css';
4 | import ModelSelect from './ModelSelect';
5 | import TemperatureSlider from './TemperatureSlider';
6 | import TopPSlider from './TopPSlider';
7 | import {ChatSettings} from '../models/ChatSettings';
8 | import {EditableField} from './EditableField';
9 | import {useTranslation} from 'react-i18next';
10 | import {NotificationService} from "../service/NotificationService";
11 | import FormLabel from "./FormLabel";
12 | import {DEFAULT_MODEL} from "../constants/appConstants";
13 |
14 | interface ChatSettingsFormProps {
15 | chatSettings?: ChatSettings;
16 | readOnly?: boolean;
17 | onChange?: (updatedChatSettings: ChatSettings) => void;
18 | }
19 |
20 | const DUMMY_CHAT_SETTINGS: ChatSettings = {
21 | id: Date.now(),
22 | author: 'user',
23 | icon: null,
24 | name: '',
25 | description: '',
26 | instructions: 'You are a helpful assistant.',
27 | model: null,
28 | seed: null,
29 | temperature: null,
30 | top_p: null
31 | };
32 |
33 | const ChatSettingsForm: React.FC
83 |
148 |
84 |
125 | {!(isLastBlock && loading) && (
126 |
85 |
93 |
86 | {block.role === 'user' ? (
87 |
88 | ) : block.role === 'assistant' ? (
89 |
90 | ) : null}
91 |
92 |
94 |
124 |
96 |
123 |
98 | {isEdit ? (
99 |
109 | )
110 | : (
111 |
122 |
113 | {block.role === 'user' ? (
114 |
118 | )}
119 |
)}
120 |
121 |
127 | {block.role === 'assistant' && (
128 |
129 | )}
130 |
146 | )}
147 |
131 |
132 |
133 | {/* {block.role === 'assistant' && (
134 |
135 |
138 |
139 | )}
140 |
141 |
144 |
*/}
145 |
69 |
172 |
173 | );
174 | };
175 |
176 | export default ChatSettingsForm;
177 |
--------------------------------------------------------------------------------
/src/components/ChatSettingsList.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {useNavigate} from 'react-router-dom';
3 | import {ChatSettings} from '../models/ChatSettings';
4 | import CubeIcon from '@heroicons/react/24/outline/CubeIcon';
5 | import './ExploreCustomChats.css'
6 | import ChatSettingDropdownMenu from './ChatSettingDropdownMenu';
7 |
8 | interface ChatSettingsListProps {
9 | chatSettings: ChatSettings[];
10 | }
11 |
12 | const ChatSettingsList: React.FC
21 | {chatSettings.map((setting) => (
22 |
49 | );
50 | };
51 | export default ChatSettingsList;
52 |
--------------------------------------------------------------------------------
/src/components/ChatShortcuts.tsx:
--------------------------------------------------------------------------------
1 | import React, {useEffect, useState} from 'react';
2 | import {Link} from 'react-router-dom';
3 | import chatSettingsDB, {chatSettingsEmitter} from '../service/ChatSettingsDB';
4 | import {ChatSettings} from '../models/ChatSettings';
5 | import CubeIcon from '@heroicons/react/24/outline/CubeIcon';
6 |
7 | const ChatShortcuts: React.FC = () => {
8 | const [chatSettings, setChatSettings] = useState navigateToChatSetting(setting.id)}
25 | className="flex items-center gap-4 cursor-pointer p-3 bg-gray-100 hover:bg-gray-200 rounded-lg dark:bg-gray-700 dark:hover:bg-gray-600 relative"
26 | >
27 |
47 | ))}
48 |
28 |
31 |
32 |
40 |
33 | {(setting.icon && setting.icon.data) ? (
34 | 
35 | ) : (
36 |
39 |
41 | {setting.name}
43 | {setting.description}
45 |
46 |
31 | {chatSettings.map((setting) => (
32 |
34 |
49 | );
50 | };
51 |
52 | export default ChatShortcuts;
53 |
--------------------------------------------------------------------------------
/src/components/ConfirmDialog.tsx:
--------------------------------------------------------------------------------
1 | import React, {useCallback, useState} from 'react';
2 | import Button from './Button';
3 | import ReactDOM from 'react-dom';
4 |
5 | interface DialogOptions {
6 | message: string;
7 | confirmText?: string;
8 | onConfirm: () => void;
9 | onCancel?: () => void;
10 | confirmButtonVariant?: 'primary' | 'secondary' | 'critical';
11 | }
12 |
13 | interface ConfirmDialogProps {
14 | isOpen: boolean;
15 | message: string;
16 | confirmText: string;
17 | onConfirm: () => void;
18 | onCancel: () => void;
19 | confirmButtonVariant?: 'primary' | 'secondary' | 'critical';
20 | }
21 |
22 | type UseDialogOptions = Omit
35 | {setting.icon?.data ? (
36 |
38 | ) : (
39 |
42 |
44 | {setting.name}
45 |
46 |
47 | ))}
48 |
39 |
59 | ),
60 | document.getElementById('modal-root')!
61 | );
62 | };
63 |
64 | export const useConfirmDialog = () => {
65 | const [isOpen, setIsOpen] = useState(false);
66 | const [dialogProps, setDialogProps] = useState
40 |
58 |
41 |
57 | {message}
42 |
43 |
49 |
55 |
56 |
103 |
171 |
107 | setEditedTitle(e.target.value)}
112 | onKeyDown={(e) => handleTitleInputKeyPress(e, convo)}
113 | autoFocus={true}
114 | maxLength={MAX_TITLE_LENGTH}
115 | style={{width: "10em"}}
116 | onBlur={(e) => {
117 | if (isEditingTitle) {
118 | handleInputBlur(e, convo);
119 | }
120 | }}
121 | />
122 |
123 | ) : (
124 |
126 | {convo.title}
127 |
128 | )}
129 |
131 | {isEditingTitle ? (
132 | <>
133 |
143 |
152 |
153 | ) : (
154 | <>
155 |
161 |
167 |
168 | )}
169 |
170 |
66 |
67 |
84 | );
85 | };
86 |
87 | export default CustomChatEditor;
88 |
--------------------------------------------------------------------------------
/src/components/CustomChatSplash.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {ChatSettings} from '../models/ChatSettings';
3 | import CubeIcon from "@heroicons/react/24/outline/CubeIcon";
4 |
5 | interface CustomChatSplashProps {
6 | chatSettings: ChatSettings;
7 | className?: string;
8 | }
9 |
10 | const CustomChatSplash: React.FC
68 |
75 |
82 |
83 |
14 |
31 | );
32 | };
33 |
34 | export default CustomChatSplash;
35 |
--------------------------------------------------------------------------------
/src/components/EditableField.tsx:
--------------------------------------------------------------------------------
1 | import React, {ReactElement, useState} from 'react';
2 | import FormLabel from "./FormLabel";
3 | import {useTranslation} from 'react-i18next';
4 |
5 | export type EditorComponentProps
15 |
25 |
16 |
24 |
17 | {(chatSettings.icon && chatSettings.icon.data) ? (
18 | 
19 | ) : (
20 |
23 |
26 |
30 | {chatSettings.name}
27 | {chatSettings.description}
29 |
71 |
73 | {!isEditing ? (
74 |
87 |
100 | );
101 | }
102 |
--------------------------------------------------------------------------------
/src/components/EditableInstructions.tsx:
--------------------------------------------------------------------------------
1 | import React, {forwardRef, useEffect, useImperativeHandle, useRef, useState} from 'react';
2 | import {ArrowsPointingOutIcon} from "@heroicons/react/24/outline";
3 | import {iconProps} from "../svg";
4 | import Button from './Button';
5 | import {useTranslation} from 'react-i18next';
6 |
7 | interface EditableInstructionsProps {
8 | initialValue: string;
9 | placeholder: string;
10 | className?: string;
11 | onChange?: (value: string) => void;
12 | }
13 |
14 | // Use forwardRef to wrap your component
15 | const EditableInstructions = forwardRef(({
16 | initialValue,
17 | placeholder,
18 | className = '',
19 | onChange,
20 | }: EditableInstructionsProps, ref) => {
21 | const {t} = useTranslation();
22 | const textarea1Ref = useRef
75 |
76 | {isValueSet() ? toStringRepresentation(effectiveValue) : `${defaultValueLabel} ${t('default-label')}`}
77 |
78 | {!readOnly && (
79 |
82 | )}
83 |
84 | ) : (
85 | <>
86 |
88 |
91 | {!readOnly && (
92 |
95 | )}
96 |
97 |
98 | )}
99 |
84 |
96 |
103 |
104 | {isModalOpen && (
105 |
129 | );
130 | });
131 |
132 | export default EditableInstructions;
133 |
--------------------------------------------------------------------------------
/src/components/ExploreCustomChats.css:
--------------------------------------------------------------------------------
1 | .chat-settings-grid {
2 | display: grid;
3 | grid-column-gap: 15px;
4 | grid-row-gap: 15px;
5 | grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
6 | }
7 |
--------------------------------------------------------------------------------
/src/components/ExploreCustomChats.tsx:
--------------------------------------------------------------------------------
1 | import React, {useEffect, useState} from 'react';
2 | import {useNavigate} from 'react-router-dom';
3 | import {PlusIcon} from '@heroicons/react/24/outline';
4 | import ChatSettingsList from './ChatSettingsList';
5 | import chatSettingsDB, {ChatSettingsChangeEvent, chatSettingsEmitter} from '../service/ChatSettingsDB';
6 | import {ChatSettings} from '../models/ChatSettings';
7 | import {useTranslation} from 'react-i18next';
8 |
9 | const ExploreCustomChats: React.FC = () => {
10 | const [exampleChats, setExampleChats] = useState
106 |
127 | )}
128 |
107 |
116 |
126 |
117 |
124 |
125 |
62 |
84 | );
85 | };
86 |
87 | export default ExploreCustomChats;
88 |
--------------------------------------------------------------------------------
/src/components/FileDataPreview.css:
--------------------------------------------------------------------------------
1 | .file-data-tile .remove-file-button {
2 | opacity: 0;
3 | transition: opacity 0.2s;
4 | }
5 |
6 | .file-data-tile:hover .remove-file-button {
7 | opacity: 1;
8 | }
9 |
--------------------------------------------------------------------------------
/src/components/FileDataPreview.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useCallback, useEffect } from 'react';
2 | import {createPortal} from 'react-dom';
3 | import { NoSymbolIcon,XMarkIcon, ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
4 | import { FileDataRef } from '../models/FileData';
5 | import {useTranslation} from "react-i18next";
6 | import Tooltip from './Tooltip';
7 | import './FileDataPreview.css';
8 | import {IMAGE_MAX_ZOOM} from "../constants/appConstants";
9 |
10 | interface Props {
11 | fileDataRef: FileDataRef[];
12 | removeFileData?: (index: number, file: FileDataRef) => void;
13 | readOnly?: boolean;
14 | allowImageAttachment?: boolean
15 | }
16 |
17 | const FileDataPreview: React.FC
63 |
65 |
82 |
83 | {t('example-chats')}
64 |{t('my-chats')}
66 | 81 |
95 |
126 |
133 |
134 | )}
135 |
136 | );
137 |
138 | const renderFullViewFile = () => viewedFileIndex !== null && createPortal(
139 |
96 |
124 | {!readOnly && (
125 |
97 |
122 |
123 | setViewedFileIndex(null)}
142 | style={{backgroundColor: 'rgba(0, 0, 0, 0.5)'}}
143 | >
144 |
,
181 | document.body
182 | );
183 |
184 | return (
185 |
145 | {viewedFileIndex > 0 && (
146 |
156 | )}
157 | 
determineAndSetImageStyle(e.currentTarget)}
160 | style={{
161 | ...imageStyle,
162 | boxShadow: '0 4px 6px rgba(0, 0, 0, 0.5)'
163 | }}
164 | alt="Full view"
165 | />
166 | {viewedFileIndex < fileDataRef.length - 1 && (
167 |
177 |
178 | )}
179 |
180 |
186 | {fileDataRef.map(renderFileData)}
187 | {renderFullViewFile()}
188 |
189 | );
190 | };
191 |
192 | export default FileDataPreview;
193 |
--------------------------------------------------------------------------------
/src/components/FoldableTextSection.css:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | display: flex;
3 | position: relative;
4 | padding-left: 0.5em;
5 | }
6 |
7 | .line::before {
8 | content: '';
9 | position: absolute;
10 | left: -4px;
11 | top: 0;
12 | bottom: 0;
13 | width: 10px;
14 | background-color: transparent;
15 | cursor: pointer;
16 | box-sizing: border-box;
17 | }
18 |
19 | .line::before {
20 | background: linear-gradient(to right, transparent 4px, #E4E4E4 4px, #E4E4E4 6px, transparent 6px);
21 | }
22 |
23 | .line:hover::before {
24 | background: linear-gradient(to right, transparent 4px, #434343 4px, #434343 6px, transparent 6px);
25 | }
26 |
27 | .dark .line::before {
28 | background: linear-gradient(to right, transparent 4px, #404040 4px, #303030 6px, transparent 6px);
29 | }
30 |
31 | .dark .line:hover::before {
32 | background: linear-gradient(to right, transparent 4px, #ACACAC 4px, #ACACAC 6px, transparent 6px);
33 | }
34 |
--------------------------------------------------------------------------------
/src/components/FoldableTextSection.tsx:
--------------------------------------------------------------------------------
1 | import React, {CSSProperties, useRef, useState} from "react";
2 | import {useTranslation} from "react-i18next";
3 | import {ChevronDownIcon, ChevronUpIcon} from "@heroicons/react/24/outline";
4 | import "./FoldableTextSection.css"; // Make sure this is correctly imported
5 |
6 | interface FoldableTextSectionProps {
7 | content: string;
8 | }
9 |
10 | const FoldableTextSection: React.FC
65 |
84 | );
85 | };
86 |
87 | export default FoldableTextSection;
88 |
--------------------------------------------------------------------------------
/src/components/FormLabel.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | interface FormLabelProps {
4 | readOnly?: boolean;
5 | label: string;
6 | htmlFor?: string;
7 | value?: any;
8 | isModalLabel?: boolean;
9 | isEditing?: boolean;
10 | }
11 |
12 | const FormLabel: React.FC
66 |
67 | {/* Always render the line */}
68 |
70 |
83 | {content}
69 |
43 | {value}
44 |
45 | );
46 | }
47 |
48 | function codeBlock({node, className, children, ...props}: any) {
49 | if (!children) {
50 | return null;
51 | }
52 | const value = String(children).replace(/\n$/, '');
53 | if (!value) {
54 | return null;
55 | }
56 | // Note: OpenAI does not always annotate the Markdown code block with the language
57 | // Note: In this case, we will fall back to plaintext
58 | const match = /language-(\w+)/.exec(className || '');
59 | let language: string = match ? match[1] : 'plaintext';
60 | const isInline = node.properties.dataInline;
61 |
62 | return isInline ? (
63 | inlineCodeBlock({value: value, language})
64 | ) : (
65 |
66 |
92 | );
93 | }
94 |
95 | function customPre({children, className, ...props}: any) {
96 | return (
97 |
68 | {language}
69 |
70 |
71 |
75 |
72 |
73 |
74 |
76 |
85 | {value}
86 |
87 | {/*
91 |
88 | {children}
89 | */}
90 |
102 | {children}
103 |
104 | );
105 | }
106 |
107 | const renderers = {
108 | code: codeBlock,
109 | pre: customPre,
110 | };
111 |
112 | return (
113 |
114 |
119 | {markdown}
120 |
121 | {loading && •••}
122 |
123 | );
124 | };
125 |
126 | export default MarkdownBlock;
127 |
--------------------------------------------------------------------------------
/src/components/ModelSelect.css:
--------------------------------------------------------------------------------
1 | .model-toggle {
2 | min-width: 20em;
3 | }
--------------------------------------------------------------------------------
/src/components/ScrollToBottomButton.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {ArrowDownIcon} from '@heroicons/react/24/outline';
3 |
4 | interface ScrollToBottomButtonProps {
5 | onClick: () => void;
6 | }
7 |
8 | export const ScrollToBottomButton: React.FC
36 | {isSidebarCollapsed && (
37 |
106 | );
107 | }
108 |
109 | export default Sidebar;
110 |
--------------------------------------------------------------------------------
/src/components/SpeechSpeedSlider.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Slider from 'rc-slider';
3 | import 'rc-slider/assets/index.css';
4 | import {useTranslation} from 'react-i18next';
5 |
6 | interface SpeechSpeedSliderProps {
7 | id: string;
8 | value: number | null;
9 | onValueChange: (value: number | null) => void;
10 | }
11 |
12 | const speechSpeedMarks = {
13 | 0.25: '0.25x',
14 | 1: '1x',
15 | 2: '2x',
16 | 3: '3x',
17 | 4: {
18 | label: 4x,
19 | },
20 | };
21 |
22 | const SpeechSpeedSlider: React.FC
38 |
39 |
46 |
47 |
48 | )}
49 |
56 |
105 |
57 |
104 |
58 |
103 |
59 |
102 | Chat history
60 | 101 |
37 |
56 | );
57 | };
58 |
59 | export default SpeechSpeedSlider;
60 |
--------------------------------------------------------------------------------
/src/components/SubmitButton.css:
--------------------------------------------------------------------------------
1 | /* SubmitButton.module.css */
2 | @keyframes ellipsis-pulse {
3 | 0%, 100% {
4 | transform: translateY(0);
5 | }
6 | 25% {
7 | transform: translateY(-4px);
8 | }
9 | 75% {
10 | transform: translateY(4px);
11 | }
12 | }
13 |
14 | .animate-ellipsis-pulse {
15 | animation: ellipsis-pulse 1s linear infinite;
16 | }
17 |
--------------------------------------------------------------------------------
/src/components/SubmitButton.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {EllipsisHorizontalIcon, PaperAirplaneIcon} from '@heroicons/react/24/outline';
3 | import './SubmitButton.css';
4 | import Tooltip from "./Tooltip";
5 | import {useTranslation} from 'react-i18next';
6 |
7 | interface SubmitButtonProps {
8 | loading: boolean;
9 | disabled: boolean;
10 | name?: string;
11 | }
12 |
13 | export const SubmitButton: React.FCAdjust the speech speed to your preference. Lower values will slow down the speech, 38 | while higher values will speed it up.
39 |
40 | {t('slower-label')}
42 | {t('faster-label')}
44 |
45 |
44 |
64 | );
65 | };
66 |
67 | export default TemperatureSlider;
68 |
--------------------------------------------------------------------------------
/src/components/TextToSpeechButton.tsx:
--------------------------------------------------------------------------------
1 | import React, {useContext, useEffect, useRef, useState} from 'react';
2 | import {SpeakerWaveIcon, StopCircleIcon} from '@heroicons/react/24/outline';
3 | import {SpeechSettings} from '../models/SpeechSettings';
4 | import {SpeechService} from '../service/SpeechService';
5 | import {RotatingLines} from 'react-loader-spinner';
6 | import {UserContext} from '../UserContext';
7 | import {iconProps} from "../svg";
8 | import {useTranslation} from "react-i18next";
9 | import "./Button.css";
10 | import Tooltip from './Tooltip';
11 |
12 | interface TextToSpeechButtonProps {
13 | content: string;
14 | }
15 |
16 | const simpleChecksum = (s: string) => {
17 | let checksum = 0;
18 | for (let i = 0; i < s.length; i++) {
19 | checksum = (checksum + s.charCodeAt(i) * (i + 1)) % 65535;
20 | }
21 | return checksum;
22 | };
23 |
24 | const generateIdentifier = (content: string, settings: SpeechSettings) => {
25 | return `${simpleChecksum(content)}-${settings.id}-${settings.voice}-${settings.speed}`;
26 | };
27 |
28 | const TextToSpeechButton: React.FCHigher values like 0.8 will make the output more random, while lower values like 0.2 45 | will make it more focused and deterministic. 46 | We recommend altering this or top_p but not both.
47 |
48 | {t('deterministic-label')}
50 | {t('creative-label')}
52 |
53 |
42 |
61 | );
62 | };
63 |
64 | export default TopPSlider;
65 |
--------------------------------------------------------------------------------
/src/components/UserContentBlock.tsx:
--------------------------------------------------------------------------------
1 | import React, { type JSX } from 'react';
2 | import {SNIPPET_MARKERS} from "../constants/appConstants";
3 | import FoldableTextSection from './FoldableTextSection';
4 | import { FileData, FileDataRef } from '../models/FileData';
5 | import FileDataPreview from './FileDataPreview';
6 |
7 | interface UserContentBlockProps {
8 | text: string;
9 | fileDataRef: FileDataRef[];
10 | }
11 |
12 | const UserContentBlock: React.FC43 | An alternative to sampling with temperature, called nucleus sampling, where the model considers the 44 | results of 45 | the tokens with top_p probability mass. So 0.1 means only the tokens comprising the top 10% probability 46 | mass are 47 | considered. 48 | We generally recommend altering this or temperature but not both. 49 |
50 |{section}
);
23 | return;
24 | }
25 |
26 | const endSnippetIndex = section.indexOf(SNIPPET_MARKERS.end);
27 | if (endSnippetIndex !== -1) {
28 | const snippet = section.substring(0, endSnippetIndex);
29 | sections.push(
30 | {remainingText}
);
37 | }
38 | } else {
39 | sections.push({section}
);
40 | }
41 | });
42 |
43 | return sections;
44 | };
45 |
46 | const content = processText(text);
47 |
48 | return (
49 |
50 | {fileDataRef && fileDataRef.length > 0 &&
51 |
54 | );
55 | };
56 |
57 | export default UserContentBlock;
58 |
--------------------------------------------------------------------------------
/src/components/UserSettingsModal.css:
--------------------------------------------------------------------------------
1 | .setting-panel {
2 | padding: 10px;
3 | margin-bottom: 15px;
4 | border-bottom: 1px solid #eee;
5 | }
6 |
7 | .setting-panel:last-child {
8 | border-bottom: none;
9 | }
10 |
--------------------------------------------------------------------------------
/src/config.ts:
--------------------------------------------------------------------------------
1 | import env from './local.env.json';
2 |
3 | export const OPENAI_API_KEY = (env as any).openapi_key;
4 | export const OPENAI_DEFAULT_MODEL: string = (env as any).default_model;
5 | export const OPENAI_DEFAULT_SYSTEM_PROMPT: string = (env as any).default_system_prompt;
6 |
--------------------------------------------------------------------------------
/src/constants/apiEndpoints.ts:
--------------------------------------------------------------------------------
1 | export const OPENAI_ENDPOINT = 'https://api.openai.com';
2 | export const TTS_ENDPOINT = `${OPENAI_ENDPOINT}/v1/audio/speech`;
3 | export const CHAT_COMPLETIONS_ENDPOINT = `${OPENAI_ENDPOINT}/v1/chat/completions`;
4 | export const MODELS_ENDPOINT = `${OPENAI_ENDPOINT}/v1/models`;
5 |
--------------------------------------------------------------------------------
/src/constants/appConstants.ts:
--------------------------------------------------------------------------------
1 | export const SNIPPET_MARKERS = {
2 | begin: '----BEGIN-SNIPPET----',
3 | end: '----END-SNIPPET----',
4 | };
5 |
6 | export const MAX_ROWS = 20;
7 | export const MAX_TITLE_LENGTH = 128;
8 |
9 | export const CHAT_STREAM_DEBOUNCE_TIME = 250;
10 | export const DEFAULT_MODEL = 'gpt-4o';
11 | export const DEFAULT_INSTRUCTIONS = 'You are a helpful assistant.';
12 |
13 |
14 | export const CONVERSATION_NOT_FOUND = 'conversation-not-found';
15 |
16 | export const IMAGE_MAX_ZOOM = 2; // 200%
17 | export const MAX_IMAGE_ATTACHMENTS_PER_MESSAGE = 10;
18 | export const IMAGE_MIME_TYPES = [
19 | 'image/jpeg',
20 | 'image/png',
21 | 'image/gif',
22 | 'image/webp',
23 | 'image/svg+xml'
24 | ];
25 |
26 | export const TEXT_MIME_TYPES = [
27 | 'text/plain',
28 | 'text/csv',
29 | 'text/html',
30 | 'text/css',
31 | 'text/javascript',
32 | 'text/xml',
33 | 'application/json',
34 | 'text/markdown'
35 | ];
36 |
--------------------------------------------------------------------------------
/src/env.json:
--------------------------------------------------------------------------------
1 | {
2 | "openapi_key": "your-api-key-here",
3 | "default_model": "gpt-3.5-turbo",
4 | "default_system_prompt": "You are a helpful assistant."
5 | }
6 |
--------------------------------------------------------------------------------
/src/globalStyles.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --primary: #10a37f;
3 | --primary-50: #ebfaeb;
4 | --primary-100: #d2f4d3;
5 | --primary-200: #b9eebc;
6 | --primary-300: #93e69c;
7 | --primary-400: #68de7a;
8 | --primary-500: #19c37d;
9 | --primary-600: #10a37f;
10 | --primary-700: #1a7f64;
11 | --primary-800: #1b5d4a;
12 | --primary-900: #183d31;
13 | --primary-50a: rgba(16, 163, 127, .2);
14 | --primary-100a: rgba(16, 163, 127, .3);
15 | --secondary: #5436da;
16 | --secondary-50: #ecebf9;
17 | --secondary-100: #d2cff2;
18 | --secondary-200: #b9b4ec;
19 | --secondary-300: #a198e6;
20 | --secondary-400: #897ce2;
21 | --secondary-500: #715fde;
22 | --secondary-600: #5436da;
23 | --secondary-700: #482da8;
24 | --secondary-800: #3b2479;
25 | --secondary-900: #281852;
26 | --secondary-100a: rgba(84, 54, 218, .3);
27 | --green-50: #ebfaeb;
28 | --green-100: #d2f4d3;
29 | --green-200: #b9eebc;
30 | --green-300: #93e69c;
31 | --green-400: #68de7a;
32 | --green-500: #19c37d;
33 | --green-600: #10a37f;
34 | --green-700: #1a7f64;
35 | --green-800: #1b5d4a;
36 | --green-900: #183d31;
37 | --green-100a: rgba(16, 163, 127, .3);
38 | --red-50: #fdebeb;
39 | --red-100: #f9cfcf;
40 | --red-200: #f6b2b3;
41 | --red-300: #f49394;
42 | --red-400: #f17173;
43 | --red-500: #ef4146;
44 | --red-600: #c23539;
45 | --red-700: #9d2b2e;
46 | --red-800: #7b2124;
47 | --red-900: #59181a;
48 | --red-100a: rgba(239, 65, 70, .3);
49 | --gray-50: #f7f7f8;
50 | --gray-100: #ececf1;
51 | --gray-200: #d9d9e3;
52 | --gray-300: #c5c5d2;
53 | --gray-400: #acacbe;
54 | --gray-500: #8e8ea0;
55 | --gray-600: #6e6e80;
56 | --gray-700: #565869;
57 | --gray-800: #353740;
58 | --gray-900: #202123;
59 | --medium-wash: #eff7f8;
60 | --bg-color: #fff;
61 | --text-primary: #202123;
62 | --text-default: #353740;
63 | --text-secondary: #6e6e80;
64 | --text-disabled: #acacbe;
65 | --text-error: #ef4146;
66 | --font-size-small: 16px;
67 | --input-border: var(--gray-300);
68 | --input-border-focus: var(--primary-600);
69 | --input-focus-ring: 0px 0px 0px 1px #10a37f;
70 | --icon-warning-color: #f4ac36;
71 | --heading-margin-top: 30px;
72 | --heading-margin-bottom: 16px;
73 | --content-width: 760px;
74 | --content-v-padding: 40px;
75 | --content-h-padding: 56px;
76 | --border-radius: 4px;
77 | --sans-serif: "ColfaxAI", helvetica, sans-serif;
78 | --monospace: "Roboto Mono", sfmono-regular, consolas, liberation mono, menlo, courier, monospace;
79 | }
80 |
--------------------------------------------------------------------------------
/src/i18n.ts:
--------------------------------------------------------------------------------
1 | import i18n from 'i18next';
2 | import {initReactI18next} from 'react-i18next';
3 | import Backend from 'i18next-http-backend';
4 | import LanguageDetector from 'i18next-browser-languagedetector';
5 |
6 | i18n
7 | .use(Backend)
8 | .use(initReactI18next)
9 | .use(LanguageDetector)
10 | .init({
11 | fallbackLng: 'en',
12 | detection: {
13 | order: ['navigator', 'querystring', 'cookie', 'localStorage', 'htmlTag', 'path'],
14 | },
15 | //debug: true,
16 | interpolation: {
17 | escapeValue: false,
18 | },
19 | backend: {
20 | loadPath: '/locales/{{lng}}/{{ns}}.json',
21 | },
22 | react: {
23 | useSuspense: false,
24 | },
25 | });
26 |
27 | export default i18n;
28 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @import 'tailwindcss';
2 |
3 | @config '../tailwind.config.js';
4 |
5 | /*
6 | The default border color has changed to `currentColor` in Tailwind CSS v4,
7 | so we've added these compatibility styles to make sure everything still
8 | looks the same as it did with Tailwind CSS v3.
9 |
10 | If we ever want to remove these styles, we need to add an explicit border
11 | color utility to any element that depends on these defaults.
12 | */
13 | @layer base {
14 | *,
15 | ::after,
16 | ::before,
17 | ::backdrop,
18 | ::file-selector-button {
19 | border-color: var(--color-gray-200, currentColor);
20 | }
21 | }
22 |
23 | html, body, #root {
24 | height: 100%;
25 | }
26 |
27 | .bg-custom-gray {
28 | background-color: rgb(247, 247, 248);
29 | }
30 |
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom/client';
3 | import './tailwind.css';
4 | import './globalStyles.css';
5 | import 'react-toastify/dist/ReactToastify.css';
6 | import {UserProvider} from "./UserContext";
7 | import App from "./App";
8 | import './i18n'; // sideEffects: true
9 |
10 | const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
11 |
12 | root.render(
13 | {content}
53 |