Spaces:

matthoffner
/

chat-with-internet

Running

App Files Files Community

matt HOFFNER commited on Dec 6, 2023

Commit

2c3d303

1 Parent(s): f3b983d

redesign, working on mobile still

Browse files

Files changed (6) hide show

app/hooks/useFunctions.ts +40 -0
app/icons.tsx +0 -21
app/input.tsx +3 -2
app/layout.tsx +1 -0
app/page.module.css +34 -386
app/page.tsx +18 -58

app/hooks/useFunctions.ts ADDED Viewed

	@@ -0,0 +1,40 @@

+import { FunctionCallHandler, Message, nanoid } from 'ai';
+import { toast } from 'sonner';
+export const functionCallHandler: FunctionCallHandler = async (
+    chatMessages,
+    functionCall,
+  ) => {
+    let result;
+    const { name, arguments: args } = functionCall;
+    const response = await fetch("/api/functions", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        args: args,
+        name: name
+      })
+    } as any);
+    if (!response.ok) {
+      const errorText = await response.text();
+      toast.error(`Something went wrong: ${errorText}`);
+      return;
+    }
+    result = await response.text();
+    return {
+      messages: [
+        ...chatMessages,
+        {
+          id: nanoid(),
+          name: functionCall.name,
+          role: "function" as const,
+          content: result,
+        },
+      ],
+    };
+  };

app/icons.tsx DELETED Viewed

@@ -1,21 +0,0 @@
-export const FunctionIcon = ({ className }: { className?: string }) => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      width={25}
-      height={25}
-      strokeWidth={1.8}
-      stroke="currentColor"
-      className={className}
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M4.745 3A23.933 23.933 0 003 12c0 3.183.62 6.22 1.745 9M19.5 3c.967 2.78 1.5 5.817 1.5 9s-.533 6.22-1.5 9M8.25 8.885l1.444-.89a.75.75 0 011.105.402l2.402 7.206a.75.75 0 001.104.401l1.445-.889m-8.25.75l.213.09a1.687 1.687 0 002.062-.617l4.45-6.676a1.688 1.688 0 012.062-.618l.213.09"
-      />
-    </svg>
-  );
-};

app/input.tsx CHANGED Viewed

@@ -12,6 +12,7 @@ import constants from './constants';
 ort.env.wasm.wasmPaths = "/_next/static/chunks/";
 interface VoiceInputFormProps {
     handleSubmit: any;
     input: string;
     setInput: React.Dispatch<React.SetStateAction<string>>;
@@ -41,8 +42,7 @@ const convertBlobToAudioBuffer = async (blob: Blob): Promise<AudioBuffer> => {
     return await audioContext.decodeAudioData(arrayBuffer);
 };
-const VoiceInputForm: React.FC<VoiceInputFormProps> = ({ handleSubmit, input, setInput }) => {
     const [recording, setRecording] = useState(false);
     const [duration, setDuration] = useState(0);
     const [recordedBlob, setRecordedBlob] = useState<Blob | null>(null);
@@ -222,6 +222,7 @@ const VoiceInputForm: React.FC<VoiceInputFormProps> = ({ handleSubmit, input, se
             )}
             <form onSubmit={handleSubmit} className={styles.form}>
                 <input
                     type="text"
                     value={input}
                     className={styles.input}

 ort.env.wasm.wasmPaths = "/_next/static/chunks/";
 interface VoiceInputFormProps {
+    inputRef: any;
     handleSubmit: any;
     input: string;
     setInput: React.Dispatch<React.SetStateAction<string>>;
     return await audioContext.decodeAudioData(arrayBuffer);
 };
+const VoiceInputForm: React.FC<VoiceInputFormProps> = ({ inputRef, handleSubmit, input, setInput }) => {
     const [recording, setRecording] = useState(false);
     const [duration, setDuration] = useState(0);
     const [recordedBlob, setRecordedBlob] = useState<Blob | null>(null);
             )}
             <form onSubmit={handleSubmit} className={styles.form}>
                 <input
+                    ref={inputRef}
                     type="text"
                     value={input}
                     className={styles.input}

app/layout.tsx CHANGED Viewed

@@ -16,6 +16,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
       <head>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
       </head>

 }) {
   return (
     <html lang="en">
       <head>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
       </head>

app/page.module.css CHANGED Viewed

@@ -1,406 +1,54 @@
 .main {
-  padding: 2rem;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
-  min-height: 100vh; /* Full viewport height */
-  position: relative; /* Needed for absolute positioning of pseudo-elements */
-  overflow: hidden; /* Ensures pseudo-element doesn't overflow */
-}
-.background {
-  position: absolute;
-  top: 0; right: 0; bottom: 0; left: 0;
-  background-blend-mode: screen;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  z-index: -1; /* Place it behind the content */
-}
-.background::before {
-  content: '';
-  position: absolute;
-  top: -50%; right: -50%; bottom: -50%; left: -50%;
-  background-repeat: no-repeat;
-  background-position: 50%;
-  transform: rotate(45deg) scale(1.5);
-}
-.background::after {
-  content: '';
-  position: absolute;
-  top: -50%; right: -50%; bottom: -50%; left: -50%;
-  background-repeat: no-repeat;
-  background-position: 50%;
-  transform: rotate(-45deg) scale(1.5);
-  backdrop-filter: blur(30px);
-  pointer-events: none; /* Allows clicks to pass through to elements below */
-}
-.card span {
-  display: inline-block;
-  transition: transform 200ms;
-}
-.card h2 {
-  font-weight: 600;
-  margin-bottom: 0.7rem;
-}
-.card p {
-  margin: 0;
-  opacity: 0.6;
-  font-size: 0.9rem;
-  line-height: 1.5;
-  max-width: 30ch;
-}
-.center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  padding: 4rem 0;
-}
-.center::before {
-  background: var(--secondary-glow);
-  border-radius: 50%;
-  width: 480px;
-  height: 360px;
-  margin-left: -400px;
-}
-.center::after {
-  background: var(--primary-glow);
-  width: 240px;
-  height: 180px;
-  z-index: -1;
-}
-.center::before,
-.center::after {
-  content: '';
-  left: 50%;
-  position: absolute;
-  filter: blur(45px);
-  transform: translateZ(0);
-}
-.logo {
-  position: relative;
-}
-/* Enable hover only on non-touch devices */
-@media (hover: hover) and (pointer: fine) {
-  .card:hover {
-    background: rgba(var(--card-rgb), 0.1);
-    border: 1px solid rgba(var(--card-border-rgb), 0.15);
-  }
-  .card:hover span {
-    transform: translateX(4px);
-  }
-}
-@media (prefers-reduced-motion) {
-  .card:hover span {
-    transform: none;
-  }
-}
-/* Mobile */
-@media (max-width: 700px) {
-  .content {
-    padding: 4rem;
-  }
-  .grid {
-    grid-template-columns: 1fr;
-    margin-bottom: 120px;
-    max-width: 320px;
-    text-align: center;
-  }
-  .card {
-    padding: 1rem 2.5rem;
-  }
-  .card h2 {
-    margin-bottom: 0.5rem;
-  }
-  .center {
-    padding: 8rem 0 6rem;
-  }
-  .center::before {
-    transform: none;
-    height: 300px;
-  }
-  .description {
-    font-size: 0.8rem;
-  }
-  .description a {
-    padding: 1rem;
-  }
-  .description p,
-  .description div {
-    display: flex;
-    justify-content: center;
-    position: fixed;
-    width: 100%;
-  }
-  .description p {
-    align-items: center;
-    inset: 0 0 auto;
-    padding: 2rem 1rem 1.4rem;
-    border-radius: 0;
-    border: none;
-    border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
-    background: linear-gradient(
-      to bottom,
-      rgba(var(--background-start-rgb), 1),
-      rgba(var(--callout-rgb), 0.5)
-    );
-    background-clip: padding-box;
-    backdrop-filter: blur(24px);
-  }
-  .description div {
-    align-items: flex-end;
-    pointer-events: none;
-    inset: auto 0 0;
-    padding: 2rem;
-    height: 200px;
-    background: linear-gradient(
-      to bottom,
-      transparent 0%,
-      rgb(var(--background-end-rgb)) 40%
-    );
-    z-index: 1;
-  }
-}
-/* Tablet and Smaller Desktop */
-@media (min-width: 701px) and (max-width: 1120px) {
-  .grid {
-    grid-template-columns: repeat(2, 50%);
-  }
-}
-@media (prefers-color-scheme: dark) {
-  .vercelLogo {
-    filter: invert(1);
-  }
-  .logo {
-    filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
-  }
-}
-@keyframes rotate {
-  from {
-    transform: rotate(360deg);
-  }
-  to {
-    transform: rotate(0deg);
-  }
-}
-.response pre {
-  white-space: pre-wrap;
-  word-break: break-word;
-  overflow-wrap: break-word;
-  overflow-y: auto;
-  max-height: 500px; /* Maximum height before scrolling */
-}
-.input {
-  padding: 0.5rem 1rem; /* Adjust the padding inside the input */
-  margin: 0.5rem 0; /* Adds margin around the input for spacing */
-  border: 1px solid #ccc; /* A light border for the input */
-  border-radius: 4px; /* Rounded corners */
-  font-size: 1rem; /* Base font size */
-  line-height: 1.5; /* Height of the input line */
-  color: #333; /* Text color */
-  background-color: #fff; /* Background color of the input */
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Adds a subtle shadow */
-  width: 100%; /* Make input full width of the parent container */
-  box-sizing: border-box; /* Include padding and border in the element's total width and height */
-  transition: border-color 0.3s, box-shadow 0.3s; /* Smooth transition for focus effect */
-}
-.input:focus {
-  border-color: #007bff; /* Highlight color when input is focused */
-  outline: none; /* Removes the default focus outline */
-  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); /* Adds a glow effect on focus */
-}
-.button {
-  padding: 0.75rem 1.5rem; /* Adjust padding to increase the button's size */
-  margin-top: 1rem; /* Space above the button */
-  border: 1px solid #707070; /* Darker border for depth */
-  border-radius: 5px; /* Rounded corners */
-  font-size: 1rem; /* Font size */
-  font-weight: bold; /* Bold text */
-  color: #000; /* Black text for contrast */
-  background: linear-gradient(180deg, #a8a8a8 0%, #8b8b8b 50%, #a8a8a8 100%); /* Gradient to simulate brushed metal */
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); /* Shadow for a 3D effect */
-  text-align: center; /* Center the text */
-  cursor: pointer; /* Cursor change on hover */
-  transition: background-color 0.3s, box-shadow 0.2s; /* Smooth transitions for interactions */
-}
-.button:hover {
-  background: linear-gradient(180deg, #b0b0b0 0%, #9d9d9d 50%, #b0b0b0 100%); /* Lighter gradient on hover */
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* Less pronounced shadow on hover */
-}
-.button:active {
-  background: linear-gradient(180deg, #8b8b8b 0%, #a8a8a8 50%, #8b8b8b 100%); /* Inverted gradient for pressed effect */
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); /* Inner shadow for a pressed effect */
-}
-.icon {
-  height: 75px;
-  width: 75px;
-}
-.button:active {
-  transform: translateY(0); /* Button goes back down when clicked */
-  box-shadow: 0 3px 6px rgba(50, 50, 93, 0.16), 0 2px 4px rgba(0, 0, 0, 0.1); /* Smaller shadow when button is pressed */
-}
-.button:disabled {
-  background-image: linear-gradient(to right, #cbd5e1, #94a3b8); /* Less vibrant gradient for disabled state */
-  cursor: default; /* No pointer cursor since it's not clickable */
-  box-shadow: none; /* No shadow for a flat appearance */
-}
-.main {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  padding: 2rem;
-}
-.title {
-  color: #333;
-  text-align: center;
-  margin-bottom: 2rem;
 }
 .messages {
-  flex: 1;
-  border: 8px solid transparent;
-  border-radius: 10px;
-  padding: 25px;
 }
 .message {
   display: flex;
-  align-items: center;
-  padding: 10px;
-  margin-bottom: 10px;
-  border-radius: 5px;
-  background: linear-gradient(180deg, #a8a8a8 0%, #8b8b8b 50%, #a8a8a8 100%);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
-  color: #333;
-  overflow: hidden; /* Prevents text from overflowing */
-}
-.message-content {
-  flex: 1;
-  margin-right: 10px; /* Adjust as needed */
-  overflow: hidden; /* Prevents text from overflowing */
-  text-overflow: ellipsis; /* Adds an ellipsis to text that overflows */
-  white-space: nowrap; /* Keeps the text on a single line */
-}
-.avatar {
-  margin-right: 10px;
-  /* Ensure you have width, height, and other necessary styles here */
-}
-/* Style for function call messages */
-.function-call {
-  color: #555;
-  font-style: italic;
-}
-/* Input field styles */
-.input {
   padding: 10px;
-  margin: 10px 0;
-  width: 100%;
-  box-sizing: border-box;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  background-color: transparent;
-}
-.input:focus {
-  border-color: #111827
-}
-/* Button styles */
-.button {
-  padding: 10px 20px;
-  background-color: #5cb85c;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  width: 100%;
-}
-.button:disabled {
-  background-color: #ccc;
 }
-/* Form styles */
 .form {
-  width: 100%;
-}
-.flex {
   display: flex;
-  align-items: flex-start;
-}
-.text-gray-500 {
-  color: #737373;
-}
-.font-bold {
-  font-weight: bold;
-}
-/* Additional media query for responsive design */
-@media (max-width: 640px) {
-  .message {
-    max-width: 100%;
-  }
 }
-/* In your CSS file */
-.avatar-user {
-  width: 20px; /* Based on Tailwind's width setting */
 }
-.avatar {
-  display: inline-block;
-  vertical-align: middle;
-  width: 40px;
-  margin-right: 10px;
 }
-@keyframes moveClouds {
-  0% { background-position: 0 0; }
-  100% { background-position: 1000px 500px; }
-}

+/* Main container */
 .main {
   display: flex;
   flex-direction: column;
+  height: 100vh; /* Full viewport height */
+  overflow: hidden;
 }
+/* Messages container */
 .messages {
+  flex-grow: 1;
+  overflow-y: scroll; /* Allows scrolling */
+  padding: 10px;
+  margin-bottom: 60px; /* Space for the input area */
 }
+/* Individual message styling */
 .message {
+  /* Add specific styles for message appearance here */
+}
+/* Input container styling */
+.inputContainer {
+  background-color: #aaa; /* Base color */
+  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 50%, transparent 50%),
+                    linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
+  background-size: 2px 2px, 4px 4px;
+  position: fixed; /* Fixed at the bottom */
+  bottom: 0; /* Align to bottom */
+  left: 0; /* Align to left */
+  right: 0; /* Align to right */
   display: flex;
+  justify-content: space-between;
   padding: 10px;
+  z-index: 1000; /* Ensure it's above other content */
 }
+/* Form styling */
 .form {
   display: flex;
+  width: 100%;
 }
+/* Input field styling */
+.input {
+  flex-grow: 1; /* Input takes up available space */
+  margin-right: 10px; /* Spacing between input and button */
+  font-size: 16px; /* Prevent zoom on mobile browsers */
 }
+/* Button styling */
+.button {
+  /* Add specific styles for the button appearance here */
 }

app/page.tsx CHANGED Viewed

@@ -1,66 +1,34 @@
 "use client";
 import styles from './page.module.css';
-import { useEffect, useState } from 'react';
 import { useChat } from 'ai/react';
-import { FunctionCallHandler, Message, nanoid } from 'ai';
 import ReactMarkdown from "react-markdown";
-import { Bot, User } from "lucide-react";
-import { toast } from 'sonner';
-import { FunctionIcon } from './icons';
-import { updateBackground } from './util';
 import Input from './input';
 const Page: React.FC = () => {
-  useEffect(() => {
-    updateBackground();
-    const interval = setInterval(updateBackground, 600);
-    return () => clearInterval(interval);
-  }, []);
-  const functionCallHandler: FunctionCallHandler = async (
-    chatMessages,
-    functionCall,
-  ) => {
-    let result;
-    const { name, arguments: args } = functionCall;
-    const response = await fetch("/api/functions", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        args: args,
-        name: name
-      })
-    } as any);
-    if (!response.ok) {
-      const errorText = await response.text();
-      toast.error(`Something went wrong: ${errorText}`);
-      return;
-    }
-    result = await response.text();
-    return {
-      messages: [
-        ...chatMessages,
-        {
-          id: nanoid(),
-          name: functionCall.name,
-          role: "function" as const,
-          content: result,
-        },
-      ],
-    };
-  };
   const { messages, input, setInput, handleSubmit, isLoading } = useChat({
     experimental_onFunctionCall: functionCallHandler,
     onError: (error: any) => {
       console.log(error);
     },
   });
   const [isExpanded, setIsExpanded] = useState(false);
   const toggleExpand = () => {
     setIsExpanded(!isExpanded);
@@ -68,7 +36,6 @@ const Page: React.FC = () => {
   const roleUIConfig: {
     [key: string]: {
-      avatar: JSX.Element;
       bgColor: string;
       avatarColor: string;
       // eslint-disable-next-line no-unused-vars
@@ -76,7 +43,6 @@ const Page: React.FC = () => {
     };
   } = {
     user: {
-      avatar: <User width={20} />,
       bgColor: "bg-white",
       avatarColor: "bg-black",
       dialogComponent: (message: Message) => (
@@ -95,7 +61,6 @@ const Page: React.FC = () => {
       ),
     },
     assistant: {
-      avatar: <Bot width={20} />,
       bgColor: "bg-gray-100",
       avatarColor: "bg-green-500",
       dialogComponent: (message: Message) => (
@@ -114,7 +79,6 @@ const Page: React.FC = () => {
       ),
     },
     function: {
-      avatar: <div className="cursor-pointer" onClick={toggleExpand}><FunctionIcon /></div>,
       bgColor: "bg-gray-200",
       avatarColor: "bg-blue-500",
       dialogComponent: (message: Message) => {
@@ -132,16 +96,12 @@ const Page: React.FC = () => {
   return (
     <main className={styles.main}>
-      <div id="bg" className={styles.background}></div>
-      <div className={styles.messages}>
         {messages.length > 0 ? (
           messages.map((message, i) => {
             const messageClass = `${styles.message} ${message.role === 'user' ? styles['message-user'] : ''}`;
             return (
               <div key={i} className={messageClass} style={{ display: 'flex', alignItems: 'center' }}>
-                <div className={styles.avatar}>
-                  {roleUIConfig[message.role].avatar}
-                </div>
                 {message.content === "" && message.function_call != undefined ? (
                     typeof message.function_call === "object" ? (
                       <div style={{ display: 'flex', flexDirection: 'column' }}>
@@ -169,7 +129,7 @@ const Page: React.FC = () => {
           })
         ) : null}
       </div>
-      <Input handleSubmit={handleSubmit as any} setInput={setInput} input={input} />
     </main>
   );
 }

 "use client";
 import styles from './page.module.css';
+import { useEffect, useRef, useState } from 'react';
 import { useChat } from 'ai/react';
+import { Message } from 'ai';
 import ReactMarkdown from "react-markdown";
+import { functionCallHandler } from './hooks/useFunctions';
 import Input from './input';
 const Page: React.FC = () => {
+  // Ref for the messages container
+  const messagesRef = useRef<HTMLDivElement>(null);
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+  const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);
   const { messages, input, setInput, handleSubmit, isLoading } = useChat({
     experimental_onFunctionCall: functionCallHandler,
     onError: (error: any) => {
       console.log(error);
     },
   });
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (messagesRef.current) {
+      messagesRef.current.scrollTop = messagesRef.current.scrollHeight;
+    }
+  }, [messages]);
   const [isExpanded, setIsExpanded] = useState(false);
   const toggleExpand = () => {
     setIsExpanded(!isExpanded);
   const roleUIConfig: {
     [key: string]: {
       bgColor: string;
       avatarColor: string;
       // eslint-disable-next-line no-unused-vars
     };
   } = {
     user: {
       bgColor: "bg-white",
       avatarColor: "bg-black",
       dialogComponent: (message: Message) => (
       ),
     },
     assistant: {
       bgColor: "bg-gray-100",
       avatarColor: "bg-green-500",
       dialogComponent: (message: Message) => (
       ),
     },
     function: {
       bgColor: "bg-gray-200",
       avatarColor: "bg-blue-500",
       dialogComponent: (message: Message) => {
   return (
     <main className={styles.main}>
+      <div className={styles.messages} ref={messagesRef}>
         {messages.length > 0 ? (
           messages.map((message, i) => {
             const messageClass = `${styles.message} ${message.role === 'user' ? styles['message-user'] : ''}`;
             return (
               <div key={i} className={messageClass} style={{ display: 'flex', alignItems: 'center' }}>
                 {message.content === "" && message.function_call != undefined ? (
                     typeof message.function_call === "object" ? (
                       <div style={{ display: 'flex', flexDirection: 'column' }}>
           })
         ) : null}
       </div>
+      <Input inputRef={inputRef} handleSubmit={handleSubmit as any} setInput={setInput} input={input} />
     </main>
   );
 }