opensource/sqlchat
1
0
Fork 0
mirror of https://github.com/sqlchat/sqlchat.git synced 2025-07-28 17:53:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: update style issues from feedback

Browse Source
This commit is contained in:
Steven
2023-03-27 23:29:58 +08:00
parent ad56250e52
commit 9240b395e8
9 changed files with 27 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
components/ChatView/Header.tsx
View File

@ -22,11 +22,18 @@ const Header = (props: Props) => {
className || ""
} sticky top-0 w-full flex flex-row justify-between items-center lg:grid lg:grid-cols-3 py-2 border-b bg-white z-1`}
>
<div className="ml-2 flex justify-center items-center">
<div className="ml-2 flex justify-start items-center">
<label htmlFor="connection-drawer" className="w-8 h-8 p-1 mr-1 block lg:hidden rounded-md cursor-pointer hover:bg-gray-100">
<Icon.IoIosMenu className="text-gray-600 w-full h-auto" />
</label>
<span className="w-auto text-left block lg:hidden">{title}</span>
<a
className="ml-1 w-10 h-10 p-1 rounded-lg hidden lg:flex flex-row justify-center items-center hover:bg-gray-100"
href="https://github.com/bytebase/sqlchat"
target="_blank"
>
<Icon.IoLogoGithub className="text-gray-600 w-6 h-auto" />
</a>
</div>
<span className="w-auto text-center h-8 p-1 hidden lg:block">{title}</span>
<div className="mr-2 sm:mr-4 relative flex flex-row justify-end items-center">

4
components/ChatView/MessageView.tsx
View File

@ -23,7 +23,7 @@ const MessageView = (props: Props) => {
>
{isCurrentUser ? (
<>
<div className="mt-0.5 w-auto max-w-full bg-indigo-600 text-white px-4 py-2 rounded-lg rounded-tr-none shadow whitespace-pre-wrap">
<div className="mt-0.5 w-auto max-w-full bg-indigo-600 text-white px-4 py-2 rounded-lg whitespace-pre-wrap">
{message.content}
</div>
<div className="w-10 h-10 p-1 border rounded-full flex justify-center items-center ml-2 shrink-0">
@ -36,7 +36,7 @@ const MessageView = (props: Props) => {
<Icon.AiOutlineRobot className="w-6 h-6" />
</div>
<ReactMarkdown
className="mt-0.5 w-auto max-w-[calc(100%-3rem)] bg-gray-100 px-4 py-2 rounded-lg rounded-tl-none shadow prose prose-neutral"
className="mt-0.5 w-auto max-w-[calc(100%-3rem)] bg-gray-100 px-4 py-2 rounded-lg prose prose-neutral"
remarkPlugins={[remarkGfm]}
components={{
pre({ node, className, children, ...props }) {

2
components/ClearDataConfirmModal.tsx
View File

@ -25,7 +25,7 @@ const ClearDataConfirmModal = (props: Props) => {
<Icon.IoMdClose className="w-5 h-auto" />
</button>
<div className="w-full flex flex-col justify-start items-start space-y-3 pt-4">
<p className="text-gray-500">SQLChat saves all of your data in localstorage. Please be sure to clear data.</p>
<p className="text-gray-500">SQL Chat saves all your data in your local browser. Are you sure to clear all of them?</p>
</div>
<div className="modal-action">
<button className="btn btn-outline" onClick={close}>

16
components/ConnectionSidebar.tsx
View File

@ -125,6 +125,14 @@ const ConnectionSidebar = () => {
</button>
</div>
<div className="w-full flex flex-col justify-end items-center">
<a
className="tooltip tooltip-right w-10 h-10 p-1 rounded-full flex lg:hidden flex-row justify-center items-center hover:bg-gray-100"
href="https://github.com/bytebase/sqlchat"
data-tip="GitHub"
target="_blank"
>
<Icon.IoLogoGithub className="text-gray-600 w-6 h-auto" />
</a>
<button
className="tooltip tooltip-right w-10 h-10 p-1 rounded-full flex flex-row justify-center items-center hover:bg-gray-100"
data-tip="Setting"
@ -132,14 +140,6 @@ const ConnectionSidebar = () => {
>
<Icon.IoMdSettings className="text-gray-600 w-6 h-auto" />
</button>
<a
className="tooltip tooltip-right w-10 h-10 p-1 rounded-full flex flex-row justify-center items-center hover:bg-gray-100"
href="https://github.com/bytebase/sqlchat"
data-tip="GitHub"
target="_blank"
>
<Icon.IoLogoGithub className="text-gray-600 w-6 h-auto" />
</a>
</div>
</div>
<div className={`w-64 h-full overflow-y-auto bg-gray-100 px-4 pt-2 ${databaseList.length === 0 && "!pt-4"}`}>

8
components/CreateConnectionModal.tsx
View File

@ -96,19 +96,19 @@ const CreateConnectionModal = (props: Props) => {
/>
</div>
<div className="w-full flex flex-col">
<label className="block text-sm font-medium text-gray-700 mb-1">Admin Username</label>
<label className="block text-sm font-medium text-gray-700 mb-1">Username</label>
<input
type="text"
placeholder="Connect admin username"
placeholder="Connect username"
className="input input-bordered w-full"
onChange={(e) => setPartialConnection({ username: e.target.value })}
/>
</div>
<div className="w-full flex flex-col">
<label className="block text-sm font-medium text-gray-700 mb-1">Admin Password</label>
<label className="block text-sm font-medium text-gray-700 mb-1">Password</label>
<input
type="text"
placeholder="Connect admin password"
placeholder="Connect password"
className="input input-bordered w-full"
onChange={(e) => setPartialConnection({ password: e.target.value })}
/>

4
components/EmptyView.tsx
View File

@ -43,7 +43,7 @@ const EmptyView = (props: Props) => {
return (
<div className={`${className || ""} w-full h-full flex flex-col justify-start items-center`}>
<p className=" text-5xl font-medium leading-loose mb-8">SQLChat</p>
<p className=" text-5xl font-medium leading-loose mb-8">SQL Chat</p>
<div className="w-full grid grid-cols-2 sm:grid-cols-3 gap-4">
<div className="w-full flex flex-col justify-start items-center">
<Icon.BsSun className="w-8 h-auto opacity-80" />
@ -51,7 +51,7 @@ const EmptyView = (props: Props) => {
{examples.map((example) => (
<div
key={example}
className="w-full rounded-lg px-4 py-3 text-sm mb-4 leading-6 cursor-pointer bg-gray-50 hover:bg-gray-100"
className="w-full rounded-lg px-4 py-3 text-sm mb-4 cursor-pointer bg-gray-50 hover:bg-gray-100"
onClick={() => handleExampleClick(example)}
>
{`"${example}"`} →

2
components/MessageLoader.tsx
View File

@ -7,7 +7,7 @@ const MessageLoader = () => {
<div className="w-10 h-10 p-1 border rounded-full flex justify-center items-center mr-2 shrink-0">
<Icon.AiOutlineRobot className="w-6 h-6" />
</div>
<div className="mt-0.5 w-12 bg-gray-100 px-4 py-2 rounded-lg rounded-tl-none shadow">
<div className="mt-0.5 w-12 bg-gray-100 px-4 py-2 rounded-lg">
<ThreeDots wrapperClass="opacity-80" width="24" height="24" color="" />
</div>
</div>

1
components/SettingModal.tsx
View File

@ -43,7 +43,6 @@ const SettingModal = (props: Props) => {
Clear
</button>
</h4>
<p className="text-gray-500 text-sm">SQLChat saves all of your data in localstorage. Please be sure to clear data.</p>
</div>
</div>
</div>

2
store/chat.ts
View File

@ -8,7 +8,7 @@ const getDefaultChat = (): Chat => {
return {
id: generateUUID(),
assistantId: "sql-assistant",
title: "SQL Chat " + dayjs().format("LTS"),
title: dayjs().format("LTS"),
createdAt: Date.now(),
};
};