Skip to content

Commit

Permalink
Fix layouts
Browse files Browse the repository at this point in the history
  • Loading branch information
@kaarthik108
kaarthik108 committed Apr 18, 2024
1 parent 624bb77 commit 97f3655
Show file tree
Hide file tree
Showing 10 changed files with 74 additions and 36 deletions.
4 changes: 2 additions & 2 deletions app/components/message.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export function BotMessage({
}) {
return (
<div className={cn("group relative flex items-start md:-ml-12", className)}>
<div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md shadow-sm bg-tranparent">
<div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md bg-tranparent">
<img src={hono} alt="Cloudflare" className="h-6 w-6" />
</div>
<div className="ml-4 flex-1 p-4 px-4 rounded-2xl border-gray-500 bg-white backdrop-blur-lg shadow-sm">
Expand All @@ -28,7 +28,7 @@ export function UserMessage({
}) {
return (
<div className={cn("group relative flex items-start md:-ml-12", className)}>
<div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md shadow-sm bg-tranparent">
<div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md bg-tranparent">
<IconUser className="text-orange-600 h-6 w-6" />
</div>
<div className="ml-4 flex-1 p-4 px-4 rounded-2xl border-gray-500 bg-white backdrop-blur-lg shadow-sm">
Expand Down
18 changes: 10 additions & 8 deletions app/islands/Chat.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,23 +90,25 @@ export default function Chat() {
setInput(e.target.value);
}

const ref = useRef<HTMLDivElement>(null);
const messagesEndRef = useRef<HTMLDivElement>(null);

const scrollToBottom = () => {
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
};

useEffect(() => {
if (ref.current === null) return;
ref.current.scrollTo(0, ref.current.scrollHeight);
scrollToBottom();
}, [messages]);

return (
<>
<div className="px-8 md:px-12 pt-20 md:pt-16 pb-32 md:pb-40 max-w-3xl mx-auto flex flex-col space-y-3 md:space-y-6 overflow-y-auto">
<div className="px-8 md:px-12 pt-20 md:pt-16 pb-32 md:pb-40 max-w-3xl mx-auto flex flex-col space-y-3 md:space-y-6 overflow-y-auto ">
{messages.map((m) => (
<div key={m.id} className="">
{m.role === "user" && <UserMessage content={m.content} />}

{m.role === "assistant" && (
<BotMessage content={m.content} className="antialiased" />
)}
<div ref={messagesEndRef} />
</div>
))}
{isLoading && (
Expand All @@ -125,12 +127,12 @@ export default function Chat() {
</div>
</div>
)}
<div className="fixed bottom-24 md:bottom-28 left-0 right-0 flex flex-col justify-center items-center mx-auto bg-transparent w-full z-10 border-none space-y-2 pb-2">
<div className="fixed bottom-24 md:bottom-28 left-0 right-0 flex flex-col justify-center items-center mx-auto bg-[#f1efe8] w-full z-10 border-none space-y-2 pb-2 pt-2">
<div className="flex flex-col sm:flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-2 w-full max-w-2xl mb-2 md:mb-0">
{helperMessages.map((message, index) => (
<div
key={index}
className="flex-1 bg-transparent rounded-xl shadow-lg h-32 md:h-10 flex items-center text-nowrap justify-between px-3 py-2 md:py-0 cursor-pointer border border-gray-300 hover:border-black transition-colors duration-300"
className="flex-1 bg-transparent rounded-xl shadow-lg h-32 md:h-10 flex items-center text-nowrap justify-between px-3 py-4 md:py-0 cursor-pointer border border-gray-300 hover:border-black transition-colors duration-300"
onClick={() => handleHelperMessageClick(message)}
>
<span className="text-black font-mono text-xs">{message}</span>
Expand Down
2 changes: 1 addition & 1 deletion app/islands/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { IconSnowflake } from "./Header";

export default function Footer() {
return (
<div className="fixed w-full bottom-0 flex items-center justify-center">
<div className="fixed w-full bottom-0 flex items-center justify-center bg-[#f1efe8]">
<div className="flex items-center gap-4">
<a
href="https://docs.snowflake.com/en/user-guide/snowflake-cortex/llm-functions#label-cortex-llm-complete?utm_source=ohno"
Expand Down
5 changes: 3 additions & 2 deletions app/islands/Header.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

export function Header() {
Expand Down Expand Up @@ -69,7 +68,9 @@ export function IconSnowflake({
<svg
xmlns="http://www.w3.org/2000/svg"
fill="#29b5e8"
className={cn("size-4", className)}
width="24"
height="24"
className={cn("size-1", className)}
{...props}
>
<path d="M81.492 28.285l-.084-.1v.1zm-.084-1l.084-.088h-.084zm-8.548 3.887l-.03.075.045.114.047-.114-.033-.08h-.028zm9.56-2.897v-.1l-.084.1zm0-.98v-.088h-.084zm-11.957 7.52l.025.001.023-.057.01-.03-.043-.12-.048.12zm4.82 0l.024-.001.006-.015.026-.074-.05-.12-.042.12zm26.885-3.37l-.05-.063-.006.12zm-2.416 2.502V33.9l-.025.063zm1.628-1.813l-.006.006.055.068.06-.063-.005-.006zm-1.713.466h.026l.06-.06v-.123l-.085.086zm-18.175-4.325v-.1h-.084z" />
Expand Down
39 changes: 39 additions & 0 deletions app/routes/_renderer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,45 @@ export default reactRenderer(({ children, title }) => {
<meta charSet="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/ico" href="/static/assets/favicon.ico" />
<title>
{title || "Chatbot Template | Hono.js | Snowflake Cortex LLM"}
</title>
<meta
name="description"
content="A chatbot template built with Hono.js on Cloudflare Pages, powered by Snowflake Cortex LLM model and styled with Tailwind CSS. Utilizes Mistral models for enhanced conversational capabilities."
/>
<meta
name="keywords"
content="chatbot, template, Hono.js, Cloudflare Pages, Snowflake Cortex, LLM, Tailwind CSS, Mistral models, React, Vite"
/>
<meta name="author" content="Kaarthik Andavar" />
<meta
property="og:title"
content={title || "Chatbot Template | Hono.js | Snowflake Cortex LLM"}
/>
<meta
property="og:description"
content="A chatbot template built with Hono.js on Cloudflare Pages, powered by Snowflake Cortex LLM model and styled with Tailwind CSS. Utilizes Mistral models for enhanced conversational capabilities."
/>
<meta property="og:type" content="website" />
<meta property="og:url" content="https://ohno-1sq.pages.dev" />
<meta
property="og:image"
content="https://ohno-1sq.pages.dev/static/assets/og-image.jpg"
/>
<meta name="twitter:card" content="summary_large_image" />
<meta
name="twitter:title"
content={title || "Chatbot Template | Hono.js | Snowflake Cortex LLM"}
/>
<meta
name="twitter:description"
content="A chatbot template built with Hono.js on Cloudflare Pages, powered by Snowflake Cortex LLM model and styled with Tailwind CSS. Utilizes Mistral models for enhanced conversational capabilities."
/>
<meta
name="twitter:image"
content="https://ohno-1sq.pages.dev/static/assets/twitter-image.jpg"
/>

{import.meta.env.PROD ? (
<>
Expand Down
2 changes: 1 addition & 1 deletion app/routes/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { createRoute } from "honox/factory";
export default createRoute(async (c) => {
const name = c.req.query("name") ?? "Hono";
return c.render(
<div className="h-full bg-[#f1efe8]">
<div className="min-h-screen bg-[#f1efe8] custom-scrollbar">
<Chat />
</div>,
{ title: name }
Expand Down
9 changes: 0 additions & 9 deletions app/routes/nested/_renderer.tsx
View file

This file was deleted.

13 changes: 0 additions & 13 deletions app/routes/nested/index.tsx
View file

This file was deleted.

Binary file added oCTqufkdTkjyGodsx1vo1.webp
View file
Binary file not shown.
18 changes: 18 additions & 0 deletions wrangler.example.toml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
name = "ohno-template"
compatibility_date = "2024-04-05"
pages_build_output_dir="./dist"

[placement]
mode = "smart"

[vars]
OPENAI_API_KEY = ""
ACCOUNT = ""
USER_NAME = ""
PASSWORD = ""
ROLE = ""
DATABASE = ""
SCHEMA = ""
WAREHOUSE = ""
SNOWFLAKE_API_URL = ""
TOKEN = ""

0 comments on commit 97f3655

Please sign in to comment.