Skip to content
This repository has been archived by the owner on Sep 23, 2024. It is now read-only.

Commit

Permalink
feat: hide sidebar; add navigation bar
Browse files Browse the repository at this point in the history
  • Loading branch information
@clement2026
clement2026 committed Mar 26, 2024
1 parent e7d83fe commit cef4cf0
Show file tree
Hide file tree
Showing 15 changed files with 146 additions and 135 deletions.
4 changes: 3 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "talk-vite",
"private": true,
"version": "2.0.5",
"version": "2.1.0",
"type": "module",
"scripts": {
"dev": "vite",
Expand Down Expand Up @@ -50,6 +50,8 @@
"wavesurfer.js": "^7.3.0"
},
"devDependencies": {
"@iconify/json": "^2.2.196",
"@iconify/tailwind": "^0.1.4",
"@tailwindcss/typography": "^0.5.9",
"@types/crypto-js": "^4.1.1",
"@types/gradient-string": "^1.1.2",
Expand Down
15 changes: 9 additions & 6 deletions src/home/chat-window/attached/attached-item.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,10 @@ type Props = {
export const AttachedItem: React.FC<Props> = ({message}) => {

const [fullText, setFullText] = useState(false)
const {isPAPinning, isPAFloating} = useSnapshot(layoutState)
const {isPAPinning} = useSnapshot(layoutState)
useEffect(() => {
setFullText(false)
}, [isPAPinning, isPAFloating]);
}, [isPAPinning]);
let theme
switch (message.role) {
case "user":
Expand All @@ -33,7 +33,6 @@ export const AttachedItem: React.FC<Props> = ({message}) => {
return (
<div className="flex flex-col">
<div
onMouseOver={() => setFullText(true)}
className={cx("flex rounded-xl whitespace-pre-wrap px-3 pt-0.5 pb-0.5",
theme.bg, theme.text, theme.other
)}>
Expand All @@ -44,7 +43,11 @@ export const AttachedItem: React.FC<Props> = ({message}) => {
{!fullText &&
<div className="leading-snug">
{message.content.slice(0, 100)}
{message.content.length > 100 && <LiaEllipsisHSolid className="w-5 h-5"/>}
{message.content.length > 100 &&
<LiaEllipsisHSolid className="w-5 h-5 cursor-pointer stroke-2 text-neutral-600"
onClick={
() => setFullText(true)
}/>}
</div>}
</div>
</div>
Expand All @@ -55,13 +58,13 @@ export const AttachedItem: React.FC<Props> = ({message}) => {
const userTheme = {
bg: userColor.bg,
text: userColor.text,
other: "max-w-[80%] self-end",
other: "max-w-[85%] self-end",
}

const assistantTheme = {
bg: assistantColor.bg,
text: assistantColor.text,
other: "max-w-[80%] self-start",
other: "max-w-[85%] self-start",
}

const systemTheme = {
Expand Down
100 changes: 52 additions & 48 deletions src/home/chat-window/attached/attached-preview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,24 +9,24 @@ import {findPrompt, Prompt, promptState} from "../../../state/promt-state.ts";
import {AttachedItem} from "./attached-item.tsx";
import {cx} from "../../../util/util.tsx";
import {PromptEditor} from "../prompt/prompt-editor.tsx";
import {CloseIcon} from "../compnent/widget/icon.tsx";
import {subscribe} from "valtio";
import {CloseIcon} from "../compnent/widget/icon.tsx";

type HPProps = {
chatProxy: Chat
}

export const AttachedPreview: React.FC<HPProps> = ({chatProxy}) => {
// console.info("AttachedPreview rendered", new Date().toLocaleString())
const {isPAFloating, isPAPinning} = useSnapshot(layoutState)
const {isPAPinning} = useSnapshot(layoutState)
const [hist, setHist] = useState<LLMMessage[]>([])
const [promptProxy, setPromptProxy] = useState<Prompt | undefined>()
const [inputText, setInputText] = useState("")
const scrollRef = useRef<HTMLDivElement>(null)

useEffect(() => {
const updateMessages = () => {
if (isPAFloating || isPAPinning) {
if (isPAPinning) {
const h = attachedMessages(chatProxy.messages, chatProxy.option.llm.maxAttached)
setHist(h)
}
Expand All @@ -36,7 +36,7 @@ export const AttachedPreview: React.FC<HPProps> = ({chatProxy}) => {
const un2 = subscribeKey(chatProxy, "messages", updateMessages)

const updatePrompt = () => {
if (isPAFloating || isPAPinning) {
if (isPAPinning) {
if (chatProxy.promptId !== "") {
const p = findPrompt(chatProxy.promptId)
setPromptProxy(p)
Expand All @@ -54,7 +54,7 @@ export const AttachedPreview: React.FC<HPProps> = ({chatProxy}) => {
const un31 = subscribeKey(promptState, "prompts", updatePrompt)

const updateInputText = () => {
if (isPAFloating || isPAPinning) {
if (isPAPinning) {
setInputText(chatProxy.inputText)
}
}
Expand All @@ -69,7 +69,7 @@ export const AttachedPreview: React.FC<HPProps> = ({chatProxy}) => {
un4()
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isPAFloating, isPAPinning]);
}, [isPAPinning]);

useEffect(() => {
const scroll = () => {
Expand All @@ -85,48 +85,55 @@ export const AttachedPreview: React.FC<HPProps> = ({chatProxy}) => {
className={cx("flex flex-col w-full pb-2",
"bg-opacity-40 backdrop-blur bg-neutral-200 rounded-lg"
)}>
<div className="flex items-center justify-between gap-2">
<div className="select-none text-xl text-neutral-600 ml-2.5">Attached Messages Preview</div>
<div className="flex items-center justify-end p-2 pt-1">
<div
onClick={() => layoutState.isPAPinning = false}
className={cx("rounded-full mr-1 text-neutral-500 p-0.5 bg-neutral-100/[0.3]",
"hover:bg-neutral-500/[0.4] hover:text-neutral-100 transition duration-300 cursor-pointer",
isPAPinning ? "" : "opacity-0"
className={cx("rounded-full text-neutral-500 p-0.5 bg-neutral-500 cursor-pointer",
)}>
<CloseIcon className="h-5 w-5"/>
<CloseIcon className="h-4 w-4 stroke-[2px] stroke-neutral-100"/>
</div>
</div>
<div
ref={scrollRef}
style={{ scrollbarGutter: "stable" }}
className={cx("flex flex-col gap-3 pt-1 overflow-y-auto overflow-x-hidden",
style={{scrollbarGutter: "stable"}}
className={cx("flex flex-col gap-5 overflow-y-auto overflow-x-hidden",
"scrollbar-hidden hover:scrollbar-visible-neutral-300"
)}>
<div
className="flex flex-col px-1 ml-1.5 mr-0.5 pb-3 border-2 border-dashed border-neutral-500 rounded-lg ">
{promptProxy ?
<>
<PromptEditorTitle promptProxy={promptProxy}/>
<PromptEditor chatProxy={chatProxy} promptProxy={promptProxy}/>
</>
:
<EmptyPromptEditorTitle/>
}
<div className="flex flex-col gap-0.5">
<p className="px-1 ml-1.5 text-neutral-500 font-bold mr-auto">Prompt</p>
<div
className="flex flex-col px-1 ml-1.5 mr-0.5 pb-3 py-1 border-2 border-dashed border-neutral-500 rounded-lg gap-1">
{promptProxy ?
<>
<PromptEditorTitle promptProxy={promptProxy}/>
<PromptEditor chatProxy={chatProxy} promptProxy={promptProxy}/>
</>
:
<EmptyPromptEditorTitle/>
}
</div>
</div>
<div className="flex flex-col gap-1 px-1.5 pb-3">
{
hist.map((h, index) => (
<div key={index}>
<AttachedItem message={h}/>
</div>
<div className="flex flex-col gap-0.5">
<div className="flex justify-between items-center px-1 ml-1.5">
<p className="text-neutral-500 font-bold mr-auto">Messages Preview</p>
<p className="text-neutral-500 text-xs "> messages below will be sent to the LLM server</p>
</div>
<div
className="flex flex-col gap-2 px-1 py-2 ml-1.5 mr-0.5 pb-2 border-2 border-dashed border-neutral-500 rounded-lg">
{
hist.map((h, index) => (
<div key={index}>
<AttachedItem message={h}/>
</div>
)
)
)
}
{inputText &&
<div>
<AttachedItem message={{role: "user", content: inputText}}/>
</div>
}
}
{inputText &&
<div>
<AttachedItem message={{role: "user", content: inputText}}/>
</div>
}
</div>
</div>
</div>
</div>
Expand All @@ -142,23 +149,20 @@ const PromptEditorTitle: React.FC<Props> = ({promptProxy}) => {
const {name} = useSnapshot(promptProxy, {sync: true})

return (
<div className="flex items-center text-lg gap-1">
<div className="text-neutral-600 select-none">Prompt:</div>
<input name="prompt name"
style={{width: `${name.length + 1}ch`}}
className="whitespace-nowrap outline-none bg-transparent text-neutral-800"
value={name}
onChange={e => promptProxy.name = e.target.value}
/>
</div>
<input name="prompt name"
style={{width: `${name.length + 1}ch`}}
className={cx("whitespace-nowrap outline-none bg-neutral-100/[0.5] rounded-xl",
"text-neutral-800 text-lg m-auto pl-3")}
value={name}
onChange={e => promptProxy.name = e.target.value}
/>
)
}

const EmptyPromptEditorTitle = () => {
return (
<div className="flex items-center text-lg gap-1 text-neutral-600">
<div className="select-none">Prompt:</div>
<div className="bg-transparent line-through select-none">None</div>
<div className="select-none">Please select a prompt or create a new one</div>
</div>
)
}
30 changes: 19 additions & 11 deletions src/home/chat-window/chat-window.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import {cx} from "../../util/util.tsx"
import {useSnapshot} from "valtio/react"
import {layoutState} from "../../state/layout-state.ts"
import {throttle} from "lodash"
import {PromptAttachedButton} from "./compnent/prompt-attached-button.tsx"


export const ChatWindow: React.FC = () => {
Expand All @@ -18,7 +17,7 @@ export const ChatWindow: React.FC = () => {
// console.info("ChatWindow rendered", new Date().toLocaleString())
const buttonRef = useRef<HTMLDivElement>(null)

const {isPAFloating, isPAPinning} = useSnapshot(layoutState)
const {isPAPinning} = useSnapshot(layoutState)
const {showRecorder} = useSnapshot(appState.pref)

useEffect(() => {
Expand All @@ -45,30 +44,39 @@ export const ChatWindow: React.FC = () => {
onMouseMove={handleMouseMove}
className={cx("relative flex flex-col max-w-4xl rounded-xl w-full h-full items-center",
"transition-all duration-200",
isPAFloating || isPAPinning ? "bg-opacity-0" : "bg-opacity-40 backdrop-blur bg-neutral-200"
isPAPinning ? "bg-opacity-0" : "bg-opacity-40 backdrop-blur bg-neutral-200"
)}>
{chatProxy !== undefined &&
<>
<div ref={buttonRef} className="flex justify-center">
<PromptAttachedButton/>
</div>
<div
className={cx("flex flex-col items-center w-full",
"transition-all duration-300",
// use mb-10 to push message list outside screen
isPAFloating || isPAPinning ? "h-full mb-10" : "h-0",
isPAPinning && "min-h-full max-h-full"
isPAPinning ? "h-full mb-10" : "h-0",
)}>
<PromptAttached chatProxy={chatProxy} key={chatProxy.id}/>
</div>

<div
className="flex flex-col items-center w-full h-full justify-between gap-1 pb-2">
className="flex flex-col items-center w-full h-full justify-between pb-2">
<>
<div ref={buttonRef}
className="flex justify-between w-full px-2 py-1 backdrop-blur cursor-pointer">
<span className="icon-[f7--sidebar-left] w-5 h-5"
onClick={() => appState.pref.showSidebar = !appState.pref.showSidebar}
></span>
<p>{chatProxy?.name}</p>
<div
className="flex justify-center items-center bg-neutral-500 rounded-full w-5 h-5 cursor-pointer"
onClick={() => layoutState.isPAPinning = true}
>
<p className="text-sm text-neutral-100">P</p>
</div>
</div>
<MessageList chatProxy={chatProxy} key={chatProxy.id}/>
<div
className="bottom-0 mt-auto flex w-full flex-col items-center gap-2 rounded-xl px-2
md:px-4 lg:px-6">
className="bottom-0 flex w-full flex-col items-center gap-2 rounded-xl px-2
md:px-4 lg:px-6 pt-1">
<TextArea chatProxy={chatProxy} key={chatProxy.id}/>
{
showRecorder ?
Expand Down
54 changes: 0 additions & 54 deletions src/home/chat-window/compnent/prompt-attached-button.tsx
View file

This file was deleted.

2 changes: 1 addition & 1 deletion src/home/chat-window/message-list/message-list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export const MessageList: React.FC<MLProps> = ({chatProxy}) => {
const items = virtualizer.getVirtualItems()

const scrollToBottom = throttle((behavior?: 'instant' | 'smooth') => {
if (!layoutState.isPAPinning && !layoutState.isPAFloating && scrollEndRef.current) {
if (!layoutState.isPAPinning && scrollEndRef.current) {
// don't scroll message list if UI of Preview is showing, in case UI of Preview is pushed outside screen.
scrollEndRef.current.scrollIntoView({behavior: behavior ?? "instant"})
}
Expand Down
2 changes: 1 addition & 1 deletion src/home/chat-window/prompt/prompt-editor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export const PromptEditor: React.FC<Props> = ({promptProxy}) => {
)
:
<PiPlusLight onClick={add}
className={cx("m-auto h-5 w-5 rounded-xl stroke-white text-neutral-500",
className={cx("m-auto h-5 w-5 stroke-2 rounded-xl stroke-white text-neutral-500",
"bg-white bg-opacity-80 backdrop-blur cursor-pointer")}/>
}
</div>
Expand Down
Loading

0 comments on commit cef4cf0

Please sign in to comment.