From b06ae009cc86d274310581e2f31e9dd13b1c744a Mon Sep 17 00:00:00 2001 From: rathi Date: Sun, 8 Dec 2024 13:36:20 -0500 Subject: [PATCH] settings ui no functionality --- package-lock.json | 115 ++++++++++++++++++++++++- package.json | 7 +- src/components/ui/input.tsx | 24 ++++++ src/components/ui/label.tsx | 20 +++++ src/components/ui/select.tsx | 91 ++++++++++++++++++++ src/components/ui/slider.tsx | 25 ++++++ src/components/ui/switch.tsx | 26 ++++++ src/components/ui/tabs.tsx | 52 ++++++++++++ src/pages/dashboard/Settings.tsx | 141 ++++++++++++++++++++++++++++++- src/pages/dashboard/upload.tsx | 7 +- 10 files changed, 500 insertions(+), 8 deletions(-) create mode 100644 src/components/ui/input.tsx create mode 100644 src/components/ui/label.tsx create mode 100644 src/components/ui/select.tsx create mode 100644 src/components/ui/slider.tsx create mode 100644 src/components/ui/switch.tsx create mode 100644 src/components/ui/tabs.tsx diff --git a/package-lock.json b/package-lock.json index cf4ed8d..6b21fff 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,12 +11,15 @@ "@radix-ui/react-avatar": "^1.0.4", "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-dropdown-menu": "^2.0.6", - "@radix-ui/react-label": "^2.0.2", + "@radix-ui/react-label": "^2.1.0", "@radix-ui/react-navigation-menu": "^1.1.4", "@radix-ui/react-scroll-area": "^1.0.5", + "@radix-ui/react-select": "^2.1.2", "@radix-ui/react-separator": "^1.0.3", + "@radix-ui/react-slider": "^1.2.1", "@radix-ui/react-slot": "^1.0.2", - "@radix-ui/react-tabs": "^1.0.4", + "@radix-ui/react-switch": "^1.1.1", + "@radix-ui/react-tabs": "^1.1.1", "@radix-ui/react-tooltip": "^1.0.7", "@supabase/supabase-js": "^2.47.0", "class-variance-authority": "^0.7.0", @@ -1347,6 +1350,7 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.0.tgz", "integrity": "sha512-peLblDlFw/ngk3UWq0VnYaOLy6agTZZ+MUO/WhVfm14vJGML+xH4FAl2XQGLqdefjNb7ApRg6Yn7U42ZhmYXdw==", + "license": "MIT", "dependencies": { "@radix-ui/react-primitive": "2.0.0" }, @@ -1626,6 +1630,49 @@ } } }, + "node_modules/@radix-ui/react-select": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.1.2.tgz", + "integrity": "sha512-rZJtWmorC7dFRi0owDmoijm6nSJH1tVw64QGiNIZ9PNLyBDtG+iAq+XGsya052At4BfarzY/Dhv9wrrUr6IMZA==", + "license": "MIT", + "dependencies": { + "@radix-ui/number": "1.1.0", + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-collection": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.1", + "@radix-ui/react-direction": "1.1.0", + "@radix-ui/react-dismissable-layer": "1.1.1", + "@radix-ui/react-focus-guards": "1.1.1", + "@radix-ui/react-focus-scope": "1.1.0", + "@radix-ui/react-id": "1.1.0", + "@radix-ui/react-popper": "1.2.0", + "@radix-ui/react-portal": "1.1.2", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-slot": "1.1.0", + "@radix-ui/react-use-callback-ref": "1.1.0", + "@radix-ui/react-use-controllable-state": "1.1.0", + "@radix-ui/react-use-layout-effect": "1.1.0", + "@radix-ui/react-use-previous": "1.1.0", + "@radix-ui/react-visually-hidden": "1.1.0", + "aria-hidden": "^1.1.1", + "react-remove-scroll": "2.6.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-separator": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.0.tgz", @@ -1648,6 +1695,39 @@ } } }, + "node_modules/@radix-ui/react-slider": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.2.1.tgz", + "integrity": "sha512-bEzQoDW0XP+h/oGbutF5VMWJPAl/UU8IJjr7h02SOHDIIIxq+cep8nItVNoBV+OMmahCdqdF38FTpmXoqQUGvw==", + "license": "MIT", + "dependencies": { + "@radix-ui/number": "1.1.0", + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-collection": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.1", + "@radix-ui/react-direction": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-use-controllable-state": "1.1.0", + "@radix-ui/react-use-layout-effect": "1.1.0", + "@radix-ui/react-use-previous": "1.1.0", + "@radix-ui/react-use-size": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-slot": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz", @@ -1665,10 +1745,40 @@ } } }, + "node_modules/@radix-ui/react-switch": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.1.1.tgz", + "integrity": "sha512-diPqDDoBcZPSicYoMWdWx+bCPuTRH4QSp9J+65IvtdS0Kuzt67bI6n32vCj8q6NZmYW/ah+2orOtMwcX5eQwIg==", + "license": "MIT", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.1", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-use-controllable-state": "1.1.0", + "@radix-ui/react-use-previous": "1.1.0", + "@radix-ui/react-use-size": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-tabs": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.1.tgz", "integrity": "sha512-3GBUDmP2DvzmtYLMsHmpA1GtR46ZDZ+OreXM/N+kkQJOPIgytFWWTfDQmBQKBvaFS0Vno0FktdbVzN28KGrMdw==", + "license": "MIT", "dependencies": { "@radix-ui/primitive": "1.1.0", "@radix-ui/react-context": "1.1.1", @@ -4251,6 +4361,7 @@ "version": "0.344.0", "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.344.0.tgz", "integrity": "sha512-6YyBnn91GB45VuVT96bYCOKElbJzUHqp65vX8cDcu55MQL9T969v4dhGClpljamuI/+KMO9P6w9Acq1CVQGvIQ==", + "license": "ISC", "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0" } diff --git a/package.json b/package.json index f3e7d45..413dd2c 100644 --- a/package.json +++ b/package.json @@ -13,12 +13,15 @@ "@radix-ui/react-avatar": "^1.0.4", "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-dropdown-menu": "^2.0.6", - "@radix-ui/react-label": "^2.0.2", + "@radix-ui/react-label": "^2.1.0", "@radix-ui/react-navigation-menu": "^1.1.4", "@radix-ui/react-scroll-area": "^1.0.5", + "@radix-ui/react-select": "^2.1.2", "@radix-ui/react-separator": "^1.0.3", + "@radix-ui/react-slider": "^1.2.1", "@radix-ui/react-slot": "^1.0.2", - "@radix-ui/react-tabs": "^1.0.4", + "@radix-ui/react-switch": "^1.1.1", + "@radix-ui/react-tabs": "^1.1.1", "@radix-ui/react-tooltip": "^1.0.7", "@supabase/supabase-js": "^2.47.0", "class-variance-authority": "^0.7.0", diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx new file mode 100644 index 0000000..b15be1f --- /dev/null +++ b/src/components/ui/input.tsx @@ -0,0 +1,24 @@ +import * as React from "react" +import { cn } from "../../lib/utils" + +export interface InputProps + extends React.InputHTMLAttributes {} + +const Input = React.forwardRef( + ({ className, type, ...props }, ref) => { + return ( + + ) + } +) +Input.displayName = "Input" + +export { Input } diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx new file mode 100644 index 0000000..3200f07 --- /dev/null +++ b/src/components/ui/label.tsx @@ -0,0 +1,20 @@ +import * as React from "react" +import * as LabelPrimitive from "@radix-ui/react-label" +import { cn } from "../../lib/utils" + +const Label = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +Label.displayName = LabelPrimitive.Root.displayName + +export { Label } diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx new file mode 100644 index 0000000..eb8bb39 --- /dev/null +++ b/src/components/ui/select.tsx @@ -0,0 +1,91 @@ +import * as React from "react" +import * as SelectPrimitive from "@radix-ui/react-select" +import { Check, ChevronDown } from "lucide-react" +import { cn } from "../../lib/utils" + +const Select = SelectPrimitive.Root + +const SelectGroup = SelectPrimitive.Group + +const SelectValue = SelectPrimitive.Value + +const SelectTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + {children} + + + + +)) +SelectTrigger.displayName = SelectPrimitive.Trigger.displayName + +const SelectContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, position = "popper", ...props }, ref) => ( + + + + {children} + + + +)) +SelectContent.displayName = SelectPrimitive.Content.displayName + +const SelectItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + + + + + {children} + +)) +SelectItem.displayName = SelectPrimitive.Item.displayName + +export { + Select, + SelectGroup, + SelectValue, + SelectTrigger, + SelectContent, + SelectItem, +} diff --git a/src/components/ui/slider.tsx b/src/components/ui/slider.tsx new file mode 100644 index 0000000..5f2d164 --- /dev/null +++ b/src/components/ui/slider.tsx @@ -0,0 +1,25 @@ +import * as React from "react" +import * as SliderPrimitive from "@radix-ui/react-slider" +import { cn } from "../../lib/utils" + +const Slider = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + + + +)) +Slider.displayName = SliderPrimitive.Root.displayName + +export { Slider } diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx new file mode 100644 index 0000000..ad66191 --- /dev/null +++ b/src/components/ui/switch.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import * as SwitchPrimitives from "@radix-ui/react-switch" +import { cn } from "../../lib/utils" + +const Switch = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + +)) +Switch.displayName = SwitchPrimitives.Root.displayName + +export { Switch } diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx new file mode 100644 index 0000000..dcbeed9 --- /dev/null +++ b/src/components/ui/tabs.tsx @@ -0,0 +1,52 @@ +import * as React from "react" +import * as TabsPrimitive from "@radix-ui/react-tabs" +import { cn } from "../../lib/utils" + +const Tabs = TabsPrimitive.Root + +const TabsList = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +TabsList.displayName = TabsPrimitive.List.displayName + +const TabsTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +TabsTrigger.displayName = TabsPrimitive.Trigger.displayName + +const TabsContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +TabsContent.displayName = TabsPrimitive.Content.displayName + +export { Tabs, TabsList, TabsTrigger, TabsContent } diff --git a/src/pages/dashboard/Settings.tsx b/src/pages/dashboard/Settings.tsx index d9780f3..cb5786c 100644 --- a/src/pages/dashboard/Settings.tsx +++ b/src/pages/dashboard/Settings.tsx @@ -1,13 +1,148 @@ -import React from 'react'; +import React, { useState } from 'react'; import { Button } from '../../components/ui/Button'; import { Card } from '../../components/ui/card'; +import { Label } from '../../components/ui/label'; +import { Switch } from '../../components/ui/switch'; +import { Slider } from '../../components/ui/slider'; +import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../components/ui/tabs'; function Settings() { + // Chat & RAG Settings + const [retainContext, setRetainContext] = useState(true); + const [contextWindowSize, setContextWindowSize] = useState(10); + const [showSourceAttribution, setShowSourceAttribution] = useState(true); + const [relevanceThreshold, setRelevanceThreshold] = useState(0.8); + + // UI Settings + const [darkMode, setDarkMode] = useState(false); + const [compactView, setCompactView] = useState(false); + const [messageGrouping, setMessageGrouping] = useState(true); + + // Privacy Settings + const [saveHistory, setSaveHistory] = useState(true); + const [anonymizeData, setAnonymizeData] = useState(false); + const [shareAnalytics, setShareAnalytics] = useState(true); + + const handleSliderChange = (values: number[]): number => { + return values[0]; + }; + return ( -
+

Settings

- + + + Chat & RAG + UI + Privacy + + + + +
+
+ +

Keep conversation context for more relevant responses

+
+ +
+ +
+ +

Number of previous messages to consider (1-20)

+ setContextWindowSize(handleSliderChange(values))} + max={20} + min={1} + step={1} + /> +
+ +
+
+ +

Show source documents for responses

+
+ +
+ +
+ +

Minimum relevance score for document retrieval (0-1)

+ setRelevanceThreshold(handleSliderChange(values))} + max={1} + min={0} + step={0.1} + /> +
+ + + + + +
+
+ +

Enable dark color theme

+
+ +
+ +
+
+ +

Reduce spacing in chat interface

+
+ +
+ +
+
+ +

Group consecutive messages from the same source

+
+ +
+ + + + + +
+
+ +

Store conversation history locally

+
+ +
+ +
+
+ +

Remove personal information from logs

+
+ +
+ +
+
+ +

Help improve the app by sharing usage data

+
+ +
+ + + + +
+ + +
); } diff --git a/src/pages/dashboard/upload.tsx b/src/pages/dashboard/upload.tsx index 7075cd0..84bf267 100644 --- a/src/pages/dashboard/upload.tsx +++ b/src/pages/dashboard/upload.tsx @@ -15,7 +15,12 @@ function UploadMaterials() { or click to browse from your computer

- +