Mirrors/coco-app
1
0
Fork 0
mirror of https://github.com/infinilabs/coco-app.git synced 2025-12-16 11:37:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

style: add system theme and UI theme style adjustments

Browse Source
This commit is contained in:
rain
2024-11-21 08:26:29 +08:00
committed by Medcl
parent 40758dd093
commit 0402d4aca3
22 changed files with 188 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src-tauri/capabilities/default.json
View File

@@ -26,6 +26,7 @@
"core:window:allow-start-dragging",
"core:window:allow-set-size",
"core:window:allow-get-all-windows",
"core:app:allow-set-app-theme",
"shell:allow-open",
"http:default",
"http:allow-fetch",

2
src-tauri/tauri.conf.json
View File

@@ -40,7 +40,7 @@
"resizable": false,
"shadow": true,
"skipTaskbar": false,
"theme": "Light",
"theme": null,
"title": "Coco AI",
"transparent": true,
"url": "/ui",

BIN
src/assets/chat_bg_dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 244 KiB

BIN
src/assets/chat_bg_light.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 130 KiB

BIN
src/assets/inputbox_bg_dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 71 KiB

BIN
src/assets/inputbox_bg_light.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

1
src/assets/react.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 4.0 KiB

BIN
src/assets/search_bg_dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 192 KiB

BIN
src/assets/search_bg_light.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 121 KiB

2
src/components/ChatAI/AutoResizeTextarea.tsx
View File

@@ -24,7 +24,7 @@ const AutoResizeTextarea: React.FC<AutoResizeTextareaProps> = ({
return (
<textarea
ref={textareaRef}
className="text-3 flex-1 outline-none min-w-[200px] text-[#999] dark:text-gray-200 placeholder-text-3 placeholder-[#999] dark:placeholder-gray-500 bg-transparent"
className="text-xs flex-1 outline-none min-w-[200px] text-[#333] dark:text-[#d8d8d8] placeholder-text-xs placeholder-[#999] dark:placeholder-gray-500 bg-transparent"
placeholder="Ask whatever you want....."
value={input}
onChange={(e) => setInput(e.target.value)}

30
src/components/ChatAI/Chat.tsx
View File

@@ -128,7 +128,7 @@ export default function ChatAI({ changeMode, inputValue }: ChatAIProps) {
setActiveChat(newChat);
setIsSidebarOpen(false);
//
console.log(1111, activeChat, inputValue)
console.log(1111, activeChat, inputValue);
if (inputValue) {
setTimeout(() => {
handleSendMessage(inputValue);
@@ -284,9 +284,7 @@ export default function ChatAI({ changeMode, inputValue }: ChatAIProps) {
{/* Main content */}
<div
className={`flex-1 flex flex-col rounded-xl overflow-hidden ${
theme === "dark" ? "bg-gray-900" : "bg-white"
}`}
className={`flex-1 flex flex-col rounded-xl overflow-hidden bg-chat_bg_light dark:bg-chat_bg_dark bg-center`}
>
<motion.div
initial={{ opacity: 0, y: -20 }}
@@ -294,18 +292,10 @@ export default function ChatAI({ changeMode, inputValue }: ChatAIProps) {
exit={{ opacity: 0, y: -20 }}
transition={{ delay: 0.2 }}
>
<header
className={`flex items-center justify-between p-2 ${
theme === "dark" ? "border-gray-800" : "border-gray-200"
}`}
>
<header className={`flex items-center justify-between py-2 px-1`}>
<button
onClick={() => openChatAI()}
className={`p-2 rounded-lg transition-colors ${
theme === "dark"
? "hover:bg-gray-800 text-gray-300"
: "hover:bg-gray-100 text-[#101010]"
}`}
className={`p-2 rounded-lg transition-colors text-[#333] dark:text-[#d8d8d8]`}
>
<PanelLeft className="h-4 w-4" />
</button>
@@ -314,11 +304,7 @@ export default function ChatAI({ changeMode, inputValue }: ChatAIProps) {
<button
onClick={() => createNewChat()}
className={`p-2 rounded-lg transition-colors ${
theme === "dark"
? "hover:bg-gray-800 text-gray-300"
: "hover:bg-gray-100 text-[#101010]"
}`}
className={`p-2 rounded-lg transition-colors text-[#333] dark:text-[#d8d8d8]`}
>
<MessageSquarePlus className="h-4 w-4" />
</button>
@@ -331,7 +317,7 @@ export default function ChatAI({ changeMode, inputValue }: ChatAIProps) {
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ delay: 0.3 }}
className="flex-1 overflow-y-auto border-t custom-scrollbar"
className="flex-1 overflow-y-auto border-t border-[rgba(0,0,0,0.1)] dark:border-[rgba(255,255,255,0.15)] custom-scrollbar"
>
{activeChat?.messages?.map((message, index) => (
<ChatMessage
@@ -375,9 +361,7 @@ export default function ChatAI({ changeMode, inputValue }: ChatAIProps) {
animate={{ y: 0 }}
exit={{ y: 100 }}
transition={{ type: "spring", stiffness: 300, damping: 30 }}
className={`mt-2.5 rounded-xl overflow-hidden ${
theme === "dark" ? "border-gray-800" : "border-gray-200"
}`}
className={`mt-2.5 rounded-xl overflow-hidden`}
>
<ChatInput
onSend={handleSendMessage}

24
src/components/ChatAI/ChatInput.tsx
View File

@@ -59,10 +59,10 @@ export function ChatInput({
return (
<form onSubmit={handleSubmit} className="w-full rounded-xl overflow-hidden">
<div className="b-none bg-[#F2F2F2] dark:bg-gray-800 rounded-xl overflow-hidden">
<div className="bg-inputbox_bg_light dark:bg-inputbox_bg_dark bg-center rounded-xl">
{/* Search Bar */}
<div className="relative">
<div className="p-2.5 flex items-center bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 transition-all">
<div className="p-[13px] flex items-center bg-white dark:bg-[#202126] rounded-xl transition-all">
<div className="flex flex-wrap gap-2 flex-1 h-auto items-center">
<AutoResizeTextarea
input={input}
@@ -70,32 +70,32 @@ export function ChatInput({
handleKeyDown={handleKeyDown}
/>
</div>
<button className="p-2 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-full transition-colors">
<Mic className="w-3 h-3 text-[#333] dark:text-gray-500" />
<button className="p-1 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-full transition-colors">
<Mic className="w-4 h-4 text-[#999] dark:text-[#999]" />
</button>
<button
className={`ml-1 p-2 ${
input ? "bg-[rgba(66,133,244,1)]" : "bg-[#E4E5F0]"
className={`ml-1 p-1 ${
input ? "bg-[#0072FF]" : "bg-[#E4E5F0]"
} rounded-full transition-colors`}
onClick={(e) => handleSubmit(e as unknown as FormEvent)}
>
<Send className="w-3 h-3 text-white hover:text-[#333]" />
<Send className="w-4 h-4 text-white hover:text-[#999]" />
</button>
</div>
</div>
{/* Controls */}
<div className="flex justify-between items-center p-2 rounded-xl overflow-hidden bg-#F2F2F2">
<div className="flex gap-1 text-xs text-[#101010] dark:text-gray-300">
<div className="flex justify-between items-center p-2 rounded-xl overflow-hidden">
<div className="flex gap-1 text-xs text-[#333] dark:text-[#d8d8d8]">
<button
className="inline-flex items-center p-1 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors "
onClick={openChatAI}
>
<Library className="w-4 h-4 mr-1" />
<Library className="w-4 h-4 mr-1 text-[#000] dark:text-[#d8d8d8]" />
Coco
</button>
<button className="inline-flex items-center p-1 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-color">
<Plus className="w-4 h-4 mr-1" />
<Plus className="w-4 h-4 mr-1 text-[#000] dark:text-[#d8d8d8]" />
Upload
</button>
</div>
@@ -103,7 +103,7 @@ export function ChatInput({
{/* Switch */}
<ChatSwitch
isChat={true}
changeMode={(value) => {
onChange={(value) => {
changeMode(value);
setInput("");
}}

48
src/components/SearchChat/ChatSwitch.tsx
View File

@@ -1,23 +1,43 @@
import { useState } from "react";
import Switch from "./Switch";
import React, { useState } from "react";
import { Bot, Search } from "lucide-react";
interface ChatSwitchProps {
isChat: boolean;
changeMode: (isChatMode: boolean) => void;
isChat?: boolean;
onChange?: (isChatMode: boolean) => void;
}
export default function ChatSwitch({ isChat, changeMode }: ChatSwitchProps) {
const ChatSwitch: React.FC<ChatSwitchProps> = ({
isChat = false,
onChange,
}) => {
const [isChatMode, setIsChatMode] = useState(isChat);
const handleToggle = () => {
const newMode = !isChatMode;
setIsChatMode(newMode);
onChange?.(newMode);
};
return (
<div className="flex items-center text-xs">
<Switch
checked={isChatMode}
onChange={(value) => {
setIsChatMode(value);
changeMode(value);
}}
></Switch>
<div
role="switch"
aria-checked={isChatMode}
className={`relative flex items-center justify-between w-10 h-[18px] rounded-full cursor-pointer transition-colors duration-300 ${
isChatMode ? "bg-[#0072ff]" : "bg-[#6000FF]"
}`}
onClick={handleToggle}
>
<div className="absolute top-0 left-0 w-full h-full pointer-events-none flex items-center justify-between px-1">
{isChatMode ? <Bot className="w-4 h-4 text-white" /> : <div></div>}
{!isChatMode ? <Search className="w-4 h-4 text-white" /> : <div></div>}
</div>
<div
className={`absolute top-[1px] h-4 w-4 bg-white rounded-full shadow-md transform transition-transform duration-300 ${
isChatMode ? "translate-x-6" : "translate-x-0"
}`}
></div>
</div>
);
}
};
export default ChatSwitch;

20
src/components/SearchChat/DropdownList.tsx
View File

@@ -67,7 +67,7 @@ function DropdownList({ selected, suggests, isSearchComplete }: DropdownListProp
return (
<div
ref={containerRef}
className="h-[calc(100vh-100px)] mt-2.5 pb-12 flex flex-col bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden focus:outline-none"
className="h-[calc(100vh-100px)] mt-2.5 pb-10 flex flex-col bg-search_bg_light dark:bg-chat_bg_dark bg-center rounded-xl overflow-hidden focus:outline-none"
tabIndex={0}
onKeyDown={handleKeyDown}
>
@@ -86,25 +86,25 @@ function DropdownList({ selected, suggests, isSearchComplete }: DropdownListProp
selected(item);
}
}}
className={`w-full p-2 text-xs flex items-center justify-between rounded-lg transition-colors ${
className={`w-full h-10 px-2 text-sm flex items-center justify-between rounded-lg transition-colors ${
isSelected
? "bg-[#f2f2f2] dark:bg-blue-900/30"
: "hover:bg-[#f2f2f2] dark:hover:bg-gray-700/50"
? "bg-[rgba(0,0,0,0.1)] dark:bg-[rgba(255,255,255,0.1)]"
: "hover:bg-[rgba(0,0,0,0.1)] dark:hover:bg-[rgba(255,255,255,0.1)]"
}`}
>
<div className="flex gap-2 items-center">
<img className="w-4 h-4" src={item?._source?.icon} alt="icon" />
<span className="text-[#666] dark:text-gray-100">
{item?._source?.source} / {item?._source?.title}
<img className="w-5 h-5" src={item?._source?.icon} alt="icon" />
<span className="text-[#333] dark:text-[#d8d8d8]">
{item?._source?.source}/{item?._source?.title}
</span>
</div>
<div className="flex gap-2 items-center">
<span className="text-xs text-[#999] dark:text-gray-400">
<span className="text-sm text-[#666] dark:text-[#666]">
{item?._source?.type}
</span>
<div
className={`w-3.5 h-3.5 flex items-center justify-center text-[#e4e5ef] border border-[#e4e5ef] rounded-sm ${
isSelected ? "text-blue-500" : ""
className={`w-4 h-4 text-xs flex items-center justify-center text-[#e4e5ef] border border-[#e4e5ef] rounded-sm ${
isSelected ? "text-blue-500 dark:bg-white" : ""
}`}
>
{index + 1}

36
src/components/SearchChat/Footer.tsx
View File

@@ -5,6 +5,7 @@ import {
User,
Home,
ChevronUp,
ArrowDown01,
AppWindowMac,
ArrowDownUp,
CornerDownLeft,
@@ -14,8 +15,7 @@ import {
import { WebviewWindow } from "@tauri-apps/api/webviewWindow";
const shortcuts = [
{ label: "Page turn/line break", keys: "ArrowDownUp" },
{ label: "Quick line selection", keys: "Tab" },
{ label: "Quick open", keys: "Tab" },
{ label: "Open", keys: "CornerDownLeft" },
];
@@ -54,12 +54,12 @@ export const Footer = ({ isChat, name }: FooterProps) => {
return (
<div
style={{ zIndex: 999 }}
className="px-4 h-12 fixed bottom-1 left-0 right-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between rounded-xl rounded-t-none overflow-hidden"
className="px-4 h-10 fixed bottom-0 left-0 right-0 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between rounded-xl rounded-t-none overflow-hidden"
>
<div className="flex items-center">
{
name ? (
<div className="flex gap-2 items-center text-[#666] text-3">
<div className="flex gap-2 items-center text-[#666] text-xs">
<AppWindowMac className="w-5 h-5" /> {name}
</div>
) : null
@@ -138,24 +138,16 @@ export const Footer = ({ isChat, name }: FooterProps) => {
}
</div>
<div className="flex items-center gap-2.5">
{(isChat ? isChatShortcuts : shortcuts).map((shortcut, index) => (
<div
key={index}
className="flex items-center text-[#999] dark:text-gray-400 text-xs"
>
<span className="mr-1.5">{shortcut.label}</span>
{shortcut.keys === "Tab" ? (
<Command className="px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 text-xs font-medium" />
) : null}
{shortcut.keys === "ArrowDownUp" || shortcut.keys === "Tab" ? (
<ArrowDownUp className="px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 text-xs font-medium" />
) : null}
{shortcut.keys === "CornerDownLeft" ? (
<CornerDownLeft className="px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 text-xs font-medium" />
) : null}
</div>
))}
<div className="flex items-center gap-3">
<div className="gap-1 flex items-center text-[#666] dark:text-[#666] text-sm">
<span className="mr-1.5 ">Quick open</span>
<Command className="w-5 h-5 p-1 border rounded-[6px] dark:text-[#666] dark:border-[rgba(255,255,255,0.15)]" />
<ArrowDown01 className="w-5 h-5 p-1 border rounded-[6px] dark:text-[#666] dark:border-[rgba(255,255,255,0.15)]" />
</div>
<div className="flex items-center text-[#666] dark:text-[#666] text-sm">
<span className="mr-1.5 ">Open</span>
<CornerDownLeft className="w-5 h-5 p-1 border rounded-[6px] dark:text-[#666] dark:border-[rgba(255,255,255,0.15)]" />
</div>
</div>
</div>
);

34
src/components/SearchChat/Search.tsx
View File

@@ -69,7 +69,7 @@ function Search({ changeMode, changeInput, isChatMode }: SearchProps) {
};
const handleKeyDown = (e: React.KeyboardEvent) => {
if (e.key === "Enter" && input.trim()) {
if (e.key === "Enter") {
getDataList();
}
};
@@ -116,15 +116,13 @@ function Search({ changeMode, changeInput, isChatMode }: SearchProps) {
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0 }}
className={`min-h-screen bg-opacity-0 flex items-start justify-center rounded-xl overflow-hidden ${
tags.length > 0 ? "pb-32" : ""
}`}
className={`min-h-screen flex items-start justify-center rounded-xl overflow-hidden`}
>
<div className="w-full rounded-xl overflow-hidden">
<div className="b-none bg-[#F2F2F2] dark:bg-gray-800 rounded-xl overflow-hidden">
<div className="bg-inputbox_bg_light dark:bg-inputbox_bg_dark bg-center rounded-xl">
{/* Search Bar */}
<div className="relative">
<div className="p-2.5 flex items-center bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 transition-all">
<div className="p-[13px] flex items-center dark:text-[#D8D8D8] bg-white dark:bg-[#202126] rounded-xl transition-all">
<div className="flex flex-wrap gap-2 flex-1 h-6 items-center">
{/* {tags.map((tag) => (
<span
@@ -148,7 +146,7 @@ function Search({ changeMode, changeInput, isChatMode }: SearchProps) {
) : null}
<input
type="text"
className="text-3 flex-1 outline-none min-w-[200px] text-[#999] dark:text-gray-200 placeholder-text-3 placeholder-[#999] dark:placeholder-gray-500 bg-transparent"
className="text-xs font-normal flex-1 outline-none min-w-[200px] text-[#333] dark:text-[#d8d8d8] placeholder-text-xs placeholder-[#999] dark:placeholder-gray-500 bg-transparent"
placeholder="Ask whatever you want....."
value={input}
onChange={(e) => {
@@ -158,46 +156,46 @@ function Search({ changeMode, changeInput, isChatMode }: SearchProps) {
onKeyDown={handleKeyDown}
/>
</div>
<button className="p-2 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-full transition-colors">
{/* <button className="p-2 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-full transition-colors">
<Mic className="w-3 h-3 text-[#333] dark:text-gray-500" />
</button>
<button
</button> */}
{/* <button
className={`ml-1 p-2 ${
input ? "bg-[rgba(66,133,244,1)]" : "bg-[#E4E5F0]"
} rounded-full transition-colors`}
onClick={() => getDataList()}
>
<Send className="w-3 h-3 text-white hover:text-[#333]" />
</button>
</button> */}
</div>
</div>
{/* Controls */}
<div className="flex justify-between items-center p-2 rounded-xl overflow-hidden bg-#F2F2F2">
<div className="h-10 px-3 flex justify-between items-center rounded-xl overflow-hidden">
{isChatMode ? (
<div className="flex gap-1 text-xs text-[#101010] dark:text-gray-300">
<button
className="inline-flex items-center p-1 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors "
onClick={openChatAI}
>
<Library className="w-4 h-4 mr-1" />
<Library className="w-3 h-3 mr-1 text-[#000] dark:text-[#d8d8d8]" />
Coco
</button>
<button className="inline-flex items-center p-1 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-color">
<Plus className="w-4 h-4 mr-1" />
<Plus className="w-3 h-3 mr-1 text-[#000] dark:text-[#d8d8d8]" />
Upload
</button>
</div>
) : (
<div className="flex gap-1 text-xs text-[#101010] dark:text-gray-300">
<div className="flex gap-1">
<button
className="inline-flex items-center p-1 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors "
onClick={openChatAI}
>
<AudioLines className="w-4 h-4 mr-1" />
<AudioLines className="w-3.5 h-3 text-[#000] dark:text-[#d8d8d8]" />
</button>
<button className="inline-flex items-center p-1 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-color">
<Image className="w-4 h-4 mr-1" />
<Image className="w-3 h-3 text-[#000] dark:text-[#d8d8d8]" />
</button>
</div>
)}
@@ -205,7 +203,7 @@ function Search({ changeMode, changeInput, isChatMode }: SearchProps) {
{/* Switch */}
<ChatSwitch
isChat={isChatMode}
changeMode={(value) => {
onChange={(value) => {
changeMode(value);
setInput("");
}}

37
src/components/SearchChat/Switch.tsx
View File

@@ -1,37 +0,0 @@
import React, { useState } from "react";
import { Bot, Search } from "lucide-react";
interface SwitchProps {
checked?: boolean;
onChange?: (checked: boolean) => void;
}
const Switch: React.FC<SwitchProps> = ({ checked = false, onChange }) => {
const [isChecked, setIsChecked] = useState(checked);
const toggleSwitch = () => {
setIsChecked(!isChecked);
if (onChange) onChange(!isChecked);
};
return (
<div
role="switch"
aria-checked={isChecked}
className={`relative flex items-center justify-between w-9 h-4 rounded-full cursor-pointer transition-colors duration-300 ${
isChecked ? "bg-[#4285f4]" : "bg-[#7373FF]"
}`}
onClick={toggleSwitch}
>
{isChecked ? <Bot className="w-3 ml-1 text-white" /> : <div></div>}
{!isChecked ? <Search className="w-3 mr-1 text-white" /> : <div></div>}
<div
className={`absolute top-0 h-3 w-3 m-0.5 bg-white rounded-full shadow-md transform transition-transform duration-300 flex items-center justify-center ${
isChecked ? "translate-x-5" : "translate-x-0"
}`}
></div>
</div>
);
};
export default Switch;

110
src/components/ThemeProvider.tsx
View File

@@ -1,5 +1,5 @@
import { createContext, useContext, useEffect, useState } from "react";
import { setTheme as setThemeApp } from '@tauri-apps/api/app';
import { getCurrentWindow } from "@tauri-apps/api/window";
type Theme = "dark" | "light" | "system";
@@ -14,54 +14,89 @@ type ThemeProviderState = {
setTheme: (theme: Theme) => void;
};
const initialState: ThemeProviderState = {
theme: "system",
setTheme: () => null,
};
const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
const ThemeProviderContext = createContext<ThemeProviderState | undefined>(undefined);
export function ThemeProvider({
children,
defaultTheme = "system",
storageKey = "theme",
...props
}: ThemeProviderProps) {
const [theme, setTheme] = useState<Theme>(
() => (localStorage.getItem(storageKey) as Theme) || defaultTheme
);
const [theme, setThemeState] = useState<Theme>(defaultTheme);
useEffect(() => {
const root = window.document.documentElement;
root.classList.remove("light", "dark");
if (theme === "system") {
const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
.matches
? "dark"
: "light";
root.classList.add(systemTheme);
setThemeApp(systemTheme);
return;
// Load the theme from storage or set to default
const storedTheme = localStorage.getItem(storageKey) as Theme | null;
if (storedTheme) {
setThemeState(storedTheme);
}
let unlistenThemeChanges: (() => void) | undefined;
const setupThemeListener = async () => {
unlistenThemeChanges = await listenForThemeChanges();
};
setupThemeListener();
return () => {
// Cleanup listeners on unmount
unlistenThemeChanges?.();
};
}, [storageKey]);
root.classList.add(theme);
setThemeApp(theme);
useEffect(() => {
applyTheme(theme);
}, [theme]);
const value = {
theme,
setTheme: (theme: Theme) => {
localStorage.setItem(storageKey, theme);
setTheme(theme);
},
// Apply the theme to the document root
const applyTheme = (currentTheme: Theme) => {
const root = window.document.documentElement;
root.classList.remove("light", "dark");
const finalTheme =
currentTheme === "system"
? window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light"
: currentTheme;
root.classList.add(finalTheme);
};
// Listen for system theme changes using Tauri APIs
const listenForThemeChanges = async () => {
const currentWindow = getCurrentWindow();
// Initial system theme setup
const systemTheme = await currentWindow.theme();
console.log("Cur theme: " + theme);
if (theme === "system") {
applyTheme(systemTheme as Theme);
}
// Listen for theme changes
const unlisten = await currentWindow.onThemeChanged(({ payload: newTheme }) => {
if (theme === "system") {
applyTheme(newTheme as Theme);
console.log("New theme: " + theme);
}
});
return () => {
unlisten();
};
};
const setTheme = (newTheme: Theme) => {
localStorage.setItem(storageKey, newTheme);
setThemeState(newTheme);
};
const contextValue = { theme, setTheme };
return (
<ThemeProviderContext.Provider {...props} value={value}>
<ThemeProviderContext.Provider value={contextValue}>
{children}
</ThemeProviderContext.Provider>
);
@@ -69,9 +104,8 @@ export function ThemeProvider({
export const useTheme = () => {
const context = useContext(ThemeProviderContext);
if (context === undefined)
throw new Error("useTheme must be used in ThemeProvider");
if (!context) {
throw new Error("useTheme must be used within a ThemeProvider");
}
return context;
};

10
src/components/ThemeToggle.tsx
View File

@@ -1,12 +1,20 @@
import { Sun, Moon } from "lucide-react";
import { setTheme as setAppTheme } from "@tauri-apps/api/app";
import { useTheme } from "./ThemeProvider";
const ThemeToggle = () => {
const { theme, setTheme } = useTheme();
const setThemeClick = async () => {
const curTheme = theme === "light" ? "dark" : "light";
setTheme(curTheme);
await setAppTheme(curTheme);
};
return (
<button
onClick={() => setTheme(theme === "light" ? "dark" : "light")}
onClick={() => setThemeClick()}
className="inline-flex rounded-md p-2 hover:bg-zinc-100 dark:hover:bg-zinc-900"
>
<Sun

4
src/main.css
View File

@@ -23,12 +23,12 @@
body,
#root {
@apply text-gray-900 rounded-lg shadow-lg overflow-hidden antialiased;
@apply text-gray-900 rounded-xl antialiased;
}
.dark body,
.dark #root{
@apply text-gray-100 rounded-lg shadow-lg overflow-hidden antialiased;
@apply text-gray-100 rounded-xl antialiased;
}
}

2
src/main.tsx
View File

@@ -10,7 +10,7 @@ import "./main.css";
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<React.StrictMode>
<ThemeProvider defaultTheme="light" storageKey="theme">
<ThemeProvider defaultTheme="system" storageKey="theme">
<RouterProvider router={router} />
</ThemeProvider>
</React.StrictMode>

8
tailwind.config.js
View File

@@ -10,6 +10,14 @@ export default {
foreground: "rgb(var(--color-foreground) / <alpha-value>)",
separator: "rgb(var(--color-separator) / <alpha-value>)",
},
backgroundImage: {
'chat_bg_light': "url('src/assets/chat_bg_light.png')",
'chat_bg_dark': "url('src/assets/chat_bg_dark.png')",
'search_bg_light': "url('src/assets/search_bg_light.png')",
'search_bg_dark': "url('src/assets/search_bg_dark.png')",
'inputbox_bg_light': "url('src/assets/inputbox_bg_light.png')",
'inputbox_bg_dark': "url('src/assets/inputbox_bg_dark.png')",
},
textColor: {
primary: "rgb(var(--color-foreground) / <alpha-value>)",
},