dmitry.galkin/chatbot-template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add mobile header

Browse source
This commit is contained in:
Jared Palmer 2023-05-19 16:06:02 -04:00
parent 54c25f2e24
commit 562dbe7442
5 changed files with 90 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

15
app/chat-list.tsx
View file

@ -3,6 +3,8 @@
import { type Message } from "@prisma/client";
import { ChatMessage } from "./chat-message";
import { NextChatLogo } from "@/components/ui/nextchat-logo";
import { Plus } from "lucide-react";
export interface ChatList {
messages: Message[];
@ -11,6 +13,19 @@ export interface ChatList {
export function ChatList({ messages }: ChatList) {
return (
<div className="relative h-full dark:bg-zinc-900">
<div className="sticky top-0 border-b w-full bg-black sm:hidden text-white font-semibold">
<div className="px-4 py-2 flex items-center justify-between">
<div className="flex flex-row gap-1 whitespace-nowrap items-center">
<NextChatLogo className="h-6 w-6" />
<span className="select-none">Next.js Chatbot</span>
</div>
<div>
<button className="text-white p-2 rounded hover:bg-zinc-800 transition duration-100">
<Plus className="h-4 w-4" />
</button>
</div>
</div>
</div>
<div className="h-full w-full overflow-auto">
{messages.length > 0 ? (
<div className="group w-full text-zinc-900 dark:text-white divide-y dark:divide-zinc-800">

2
app/prompt.tsx
View file

@ -81,7 +81,7 @@ export function Prompt({
placeholder="Send a message."
spellCheck={false}
className={cn(
"m-0 max-h-[200px] w-full sm:text-sm resize-none border-0 bg-transparent p-0 py-[13px] pl-4 pr-7 outline-none ring-0 focus:ring-0 focus-visible:ring-0 dark:bg-transparent",
"m-0 max-h-[200px] w-full resize-none border-0 bg-transparent p-0 py-[13px] pl-4 pr-7 outline-none ring-0 focus:ring-0 focus-visible:ring-0 dark:bg-transparent",
fontMessage.className
)}
style={{

4
app/sidebar.tsx
View file

@ -1,4 +1,4 @@
import { DevGPTLogo } from "@/components/ui/devgpt-logo";
import { NextChatLogo } from "@/components/ui/nextchat-logo";
import { Login } from "@/components/ui/login";
import { UserMenu } from "@/components/ui/user-menu";
import { prisma } from "@/lib/prisma";
@ -21,7 +21,7 @@ export function Sidebar({ session, newChat }: SidebarProps) {
<aside className="flex h-full w-full flex-col p-2 shadow-lg ring-1 ring-zinc-900/10 dark:ring-zinc-200/10 relative z-10">
<div className="flex flex-row gap-1 items-center justify-between text-base font-semibold tracking-tight antialiased bg-black text-white px-4 py-4 -m-2 mb-2">
<div className="flex flex-row gap-1 whitespace-nowrap items-center">
<DevGPTLogo className="h-6 w-6" />
<NextChatLogo className="h-6 w-6" />
<span className="select-none">Next.js Chatbot</span>
</div>
<div>