{leftButtons ? leftButtons : null}
diff --git a/client/src/hooks/ThemeContext.jsx b/client/src/hooks/ThemeContext.jsx
index f575ab911..530f606f0 100644
--- a/client/src/hooks/ThemeContext.jsx
+++ b/client/src/hooks/ThemeContext.jsx
@@ -26,10 +26,14 @@ export const ThemeProvider = ({ initialTheme, children }) => {
const rawSetTheme = (rawTheme) => {
const root = window.document.documentElement;
- const isDark = rawTheme === 'dark';
+ let isDark = rawTheme === 'dark';
+
+ if (rawTheme === 'system') {
+ isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ }
root.classList.remove(isDark ? 'light' : 'dark');
- root.classList.add(rawTheme);
+ root.classList.add(isDark ? 'dark' : 'light');
localStorage.setItem('color-theme', rawTheme);
};
diff --git a/client/src/style.css b/client/src/style.css
index bdbbea2b7..0cff4afb9 100644
--- a/client/src/style.css
+++ b/client/src/style.css
@@ -132,6 +132,24 @@
transition: all 1s ease-in-out;
} */
+select {
+ --tw-shadow: 0 0 transparent;
+ -webkit-appearance: none;
+ appearance: none;
+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%238e8ea0' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
+ background-position: right .5rem center;
+ background-repeat: no-repeat;
+ background-size: 1.5em 1.5em;
+ padding-right: 2.5rem;
+ background-color: #fff;
+ border-color: #8e8ea0;
+ border-radius: 0;
+ border-width: 1px;
+ font-size: 1rem;
+ line-height: 1.5rem;
+ padding: .5rem .75rem;
+}
+
.overflow-y-auto {
overflow-y: overlay;
}
diff --git a/client/src/utils/buildTree.js b/client/src/utils/buildTree.js
index 4b5e0e0dd..b35e5eb3f 100644
--- a/client/src/utils/buildTree.js
+++ b/client/src/utils/buildTree.js
@@ -1,7 +1,7 @@
const even =
'w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 bg-white dark:text-gray-100 group dark:bg-gray-800 hover:bg-gray-100/25 hover:text-gray-700 dark:hover:bg-gray-900 dark:hover:text-gray-200';
const odd =
- 'w-full border-b border-black/10 bg-gray-50 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group bg-gray-100 dark:bg-[#444654] hover:bg-gray-100/40 hover:text-gray-700 dark:hover:bg-[#3b3d49] dark:hover:text-gray-200';
+ 'w-full border-b border-black/10 bg-gray-50 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group bg-gray-100 dark:bg-gray-1000 hover:bg-gray-100/40 hover:text-gray-700 dark:hover:bg-[#3b3d49] dark:hover:text-gray-200';
export default function buildTree(messages, groupAll = false) {
if (messages === null) return null;
diff --git a/client/src/utils/getError.ts b/client/src/utils/getError.ts
new file mode 100644
index 000000000..915aa86ac
--- /dev/null
+++ b/client/src/utils/getError.ts
@@ -0,0 +1,29 @@
+
+const isJson = (str) => {
+ try {
+ JSON.parse(str);
+ } catch (e) {
+ return false;
+ }
+ return true;
+}
+
+const getError = (text) => {
+ const errorMessage = text.length > 512 ? text.slice(0, 512) + '...' : text;
+ const match = text.match(/\{[^{}]*\}/);
+ let json = match ? match[0] : '';
+ if (isJson(json)) {
+ json = JSON.parse(json);
+ if (json.code === 'invalid_api_key') {
+ return 'Invalid API key. Please check your API key and try again. You can do this by clicking on the model logo in the left corner of the textbox and selecting "Set Token" for the current selected endpoint. Thank you for your understanding.';
+ } else if (json.type === 'insufficient_quota') {
+ return 'We apologize for any inconvenience caused. The default API key has reached its limit. To continue using this service, please set up your own API key. You can do this by clicking on the model logo in the left corner of the textbox and selecting "Set Token" for the current selected endpoint. Thank you for your understanding.';
+ } else {
+ return `Oops! Something went wrong. Please try again in a few moments. Here's the specific error message we encountered: ${errorMessage}`;
+ }
+ } else {
+ return `Oops! Something went wrong. Please try again in a few moments. Here's the specific error message we encountered: ${errorMessage}`;
+ }
+};
+
+export default getError;
\ No newline at end of file
diff --git a/client/tailwind.config.cjs b/client/tailwind.config.cjs
index 6e118d2f0..92259f85f 100644
--- a/client/tailwind.config.cjs
+++ b/client/tailwind.config.cjs
@@ -39,7 +39,8 @@ module.exports = {
'600': '#565869',
'700': '#40414f', // Replacing .dark .dark:bg-gray-700 and .dark .dark:hover:bg-gray-700:hover
'800': '#343541', // Replacing .dark .dark:bg-gray-800, .bg-gray-800, and .dark .dark:hover:bg-gray-800\/90
- '900': '#202123' // Replacing .dark .dark:bg-gray-900, .bg-gray-900, and .dark .dark:hover:bg-gray-900:hover
+ '900': '#202123', // Replacing .dark .dark:bg-gray-900, .bg-gray-900, and .dark .dark:hover:bg-gray-900:hover
+ '1000': '#444654'
},
green: {
50: "#f1f9f7",
diff --git a/e2e/specs/landing.spec.js b/e2e/specs/landing.spec.js
index 0b8072d6e..bc88c4e93 100644
--- a/e2e/specs/landing.spec.js
+++ b/e2e/specs/landing.spec.js
@@ -12,7 +12,41 @@ test.describe('Landing suite', () => {
test('Landing title', async () => {
const page = await myBrowser.newPage();
await page.goto('http://localhost:3080/');
- const pageTitle = await page.textContent('#landing-title')
+ const pageTitle = await page.textContent('#landing-title');
expect(pageTitle.length).toBeGreaterThan(0);
});
+
+ test('Create Conversation', async () => {
+ const page = await myBrowser.newPage();
+ await page.goto('http://localhost:3080/');
+
+ async function getItems() {
+ const navDiv = await page.waitForSelector('nav > div');
+ if (!navDiv) {
+ return [];
+ }
+
+ const items = await navDiv.$$('a.group');
+ return items || [];
+ }
+
+ // Wait for the page to load and the SVG loader to disappear
+ await page.waitForSelector('nav > div');
+ await page.waitForSelector('nav > div > div > svg', { state: 'detached' });
+
+ let beforeAdding = (await getItems()).length;
+
+ const input = await page.locator('form').getByRole('textbox');
+ await input.click();
+ await input.fill('Hi!');
+
+ // Send the message
+ await page.locator('form').getByRole('button').nth(1).click();
+
+ // Wait for the message to be sent
+ await page.waitForTimeout(15000);
+ let afterAdding = (await getItems()).length;
+
+ expect(afterAdding).toBeGreaterThan(beforeAdding);
+ });
});
diff --git a/e2e/specs/nav.spec.js b/e2e/specs/nav.spec.js
new file mode 100644
index 000000000..429f0790b
--- /dev/null
+++ b/e2e/specs/nav.spec.js
@@ -0,0 +1,59 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Navigation suite', () => {
+ let myBrowser;
+
+ test.beforeEach(async ({ browser }) => {
+ myBrowser = await browser.newContext({
+ storageState: 'e2e/auth.json',
+ });
+ });
+
+ test('Navigation bar', async () => {
+ const page = await myBrowser.newPage();
+ await page.goto('http://localhost:3080/');
+
+ await page.locator('[id="headlessui-menu-button-\\:r0\\:"]').click();
+ const navBar = await page.locator('[id="headlessui-menu-button-\\:r0\\:"]').isVisible();
+ expect(navBar).toBeTruthy();
+ });
+
+ test('Settings modal', async () => {
+ const page = await myBrowser.newPage();
+ await page.goto('http://localhost:3080/');
+ await page.locator('[id="headlessui-menu-button-\\:r0\\:"]').click();
+ await page.getByText('Settings').click();
+
+ const modal = await page.getByRole('dialog', { name: 'Settings' }).isVisible();
+ expect(modal).toBeTruthy();
+
+ const modalTitle = await page.getByRole('heading', { name: 'Settings' }).textContent();
+ expect(modalTitle.length).toBeGreaterThan(0);
+ expect(modalTitle).toEqual('Settings');
+
+ const modalTabList = await page.getByRole('tablist', { name: 'Settings' }).isVisible();
+ expect(modalTabList).toBeTruthy();
+
+ const generalTabPanel = await page.getByRole('tabpanel', { name: 'General' }).isVisible();
+ expect(generalTabPanel).toBeTruthy();
+
+ const modalClearConvos = await page.getByRole('button', { name: 'Clear' }).isVisible();
+ expect(modalClearConvos).toBeTruthy();
+
+ const modalTheme = await page.getByRole('combobox');
+ expect(modalTheme.isVisible()).toBeTruthy();
+
+ async function changeMode(theme) {
+ // change the value to 'dark' and 'light' and see if the theme changes
+ await modalTheme.selectOption({ label: theme });
+ await page.waitForTimeout(1000);
+
+ // Check if the HTML element has the theme class
+ const html = await page.$eval('html', (element, theme) => element.classList.contains(theme.toLowerCase()), theme);
+ expect(html).toBeTruthy();
+ }
+
+ await changeMode('Dark');
+ await changeMode('Light');
+ });
+});
diff --git a/e2e/specs/popup.spec.js b/e2e/specs/popup.spec.js
new file mode 100644
index 000000000..09158516a
--- /dev/null
+++ b/e2e/specs/popup.spec.js
@@ -0,0 +1,24 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Endpoints Presets suite', () => {
+ let myBrowser;
+
+ test.beforeEach(async ({ browser }) => {
+ myBrowser = await browser.newContext({
+ storageState: 'e2e/auth.json',
+ });
+ });
+
+ test('Endpoints Suite', async () => {
+ const page = await myBrowser.newPage();
+ await page.goto('http://localhost:3080/');
+ await page.getByRole('button', { name: 'New Topic' }).click();
+
+ const endpointItem = await page.getByRole('menuitemradio', { name: 'OpenAI' })
+ await endpointItem.click();
+
+ await page.getByRole('button', { name: 'New Topic' }).click();
+ // Check if the active class is set on the selected endpoint
+ expect(await endpointItem.getAttribute('class')).toContain('active');
+ });
+});