Remove unused files and update styles

n4ze3m · Apr 16, 2024 · e44e9e0 · e44e9e0
1 parent 55ecfa7
commit e44e9e0
Show file tree

Hide file tree

Showing 18 changed files with 655 additions and 540 deletions.
diff --git a/app/components/Common/Header.tsx b/app/components/Common/Header.tsx
@@ -2,7 +2,7 @@ import { Link } from "@remix-run/react";
 
 export const Header = () => {
   return (
-    <header className="flex border-b w-full bg-white dark:bg-[#262626] p-3 justify-between dark:text-white text-slate-900 dark:border-gray-600">
+    <header className="flex border-b w-full bg-[#0C0C0C] p-3 justify-between text-white border-gray-600">
       <Link
         to="/"
         className="focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-700 flex items-center dark:text-white"

diff --git a/app/components/Home/ExampleSearch.tsx b/app/components/Home/ExampleSearch.tsx
@@ -12,7 +12,7 @@ export const HomeExampleSearchCard = ({
     <button
       type="submit"
       onClick={onClick}
-      className="border truncate  dark:border-gray-700 text-slate-900 dark:text-slate-50  md:hover:text-slate-700 md:dark:hover:text-slate-200   text-center items-center rounded-full cursor-point active:scale-95 origin-center whitespace-nowrap inline-flex text-xs px-3 font-medium h-6"
+      className=" truncate  bg-[#222831] text-slate-50  md:hover:text-slate-700 md:dark:hover:text-slate-200   text-center items-center rounded-md cursor-point active:scale-95 origin-center whitespace-nowrap inline-flex text-xs px-3 font-medium h-6"
     >
       {name}
     </button>
@@ -21,8 +21,8 @@ export const HomeExampleSearchCard = ({
 
 export const HomeExampleSearch = () => {
   const query = [
-    "Generate Image of Astronaut Riding a Horse",
     "What available models are mentioned on this site: https://readme.fireworks.ai/docs/querying-embeddings-models?",
+    "Generate Image of Astronaut Riding a Horse",
     "When is Juventus' next game?",
     "How many kilometers from Washingto D.C. to Miami Beach?",
   ];

diff --git a/app/components/Home/Form.tsx b/app/components/Home/Form.tsx
@@ -5,13 +5,15 @@ export const HomeForm = () => {
   const [query, setQuery] = React.useState("");
 
   return (
-    <Form method="post" className="w-full  max-w-2xl">
-      <div className="w-full  border flex flex-col dark:border-gray-600 rounded-xl p-2 dark:bg-[#242424]">
+    <Form method="post" className="w-full  max-w-3xl">
+      <div className="bg-gradient-to-r from-pink-500 to-yellow-500 rounded-xl    p-[3px]">
+
+      <div className="w-full   flex flex-col  rounded-xl p-2 bg-[#242424]">
         <input
           className="px-2 py-2 w-full resize-none bg-transparent focus-within:outline-none  focus:ring-0 focus-visible:ring-0 ring-0 dark:ring-0 border-0 dark:text-gray-100"
           required
           name="query"
-          style={{ minHeight: "60px" }}
+          style={{ minHeight: "40px" }}
           tabIndex={0}
           placeholder="Type your query here..."
           value={query}
@@ -37,6 +39,7 @@ export const HomeForm = () => {
             </svg>
           </button>
         </div>
+        </div>
       </div>
     </Form>
   );

diff --git a/app/components/Search/Markdown.tsx b/app/components/Search/Markdown.tsx
@@ -1,5 +1,4 @@
 import remarkGfm from "remark-gfm";
-import rehypeMathjax from "rehype-mathjax";
 import remarkMath from "remark-math";
 import ReactMarkdown from "react-markdown";
 import "property-information";
@@ -12,7 +11,6 @@ export default function Markdown({ message }: { message: string }) {
       <ReactMarkdown
         className="prose break-words dark:prose-invert  prose-p:leading-relaxed prose-pre:p-0 dark:prose-dark"
         remarkPlugins={[remarkGfm, remarkMath]}
-        rehypePlugins={[rehypeMathjax]}
         components={{
 
           a({ node, ...props }) {

diff --git a/app/components/Search/Source.tsx b/app/components/Search/Source.tsx
@@ -6,7 +6,7 @@ export const SearchSourceCard = ({ url }: { url: string }) => {
     <a
       href={url}
       target="_blank"
-      className="border  dark:border-gray-700 text-slate-900 dark:text-slate-50  md:hover:text-slate-700 md:dark:hover:text-slate-200  justify-center text-center items-center rounded-full cursor-point active:scale-95 origin-center whitespace-nowrap inline-flex text-xs px-3 font-medium h-6"
+      className=" truncate bg-[#222831] text-slate-50  md:hover:text-slate-700 md:dark:hover:text-slate-200   text-center items-center rounded-md cursor-point active:scale-95 origin-center whitespace-nowrap inline-flex text-xs px-3 font-medium h-6"
     >
       {hostname}
       <ArrowUpRightIcon className="h-3 w-3 ml-1" />
@@ -24,7 +24,7 @@ export const SearchSources = ({ links }: { links: string[] }) => {
       <span className="text-lg font-bold dark:text-white text-slate-900">
         Sources
       </span>
-      <div className="flex mt-4 flex-wrap gap-4 md:items-center md:justify-center md:gap-4">
+      <div className="flex mt-4 flex-wrap gap-4 items-start md:items-center md:gap-4">
         {links.map((url, i) => (
           <SearchSourceCard key={i} url={url} />
         ))}

diff --git a/app/root.tsx b/app/root.tsx
@@ -3,13 +3,12 @@ import type { LinksFunction } from "@remix-run/node";
 import {
   Link,
   Links,
-  LiveReload,
   Meta,
   Outlet,
   Scripts,
   ScrollRestoration,
 } from "@remix-run/react";
-import stylesheet from "~/css/tailwind.css";
+import stylesheet from "~/css/tailwind.css?url";
 import { Header } from "./components/Common/Header";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import React from "react";
@@ -41,11 +40,10 @@ export default function App() {
       </head>
       <QueryClientProvider client={queryClient}>
         <Header />
-        <body className="bg-white dark:bg-[#262626]">
+        <body className="bg-[#0C0C0C]">
           <Outlet />
           <ScrollRestoration />
           <Scripts />
-          <LiveReload />
         </body>
       </QueryClientProvider>
     </html>

diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
@@ -34,9 +34,9 @@ export async function action({ request }: ActionFunctionArgs) {
 
 export default function Index() {
   return (
-    <div className="flex p-6 flex-col items-center justify-center h-screen  bg-white dark:bg-[#262626] dark:text-white w-full">
+    <div className="flex p-6 flex-col items-center justify-center h-screen  bg-[#0C0C0C] text-white w-full">
       <div className="mb-6">
-        <h1 className="text-2xl  text-center dark:text-white text-slate-900">
+        <h1 className="text-2xl text-center text-white">
           What you want to do today?
         </h1>
       </div>

diff --git a/app/routes/search.$slug.tsx b/app/routes/search.$slug.tsx
@@ -91,7 +91,7 @@ export default function Index() {
   });
 
   return (
-    <div className="flex p-6 flex-col items-center justify-center  bg-white dark:bg-[#262626] dark:text-white w-full">
+    <div className="flex p-6 flex-col items-center justify-center h-screen  bg-[#0C0C0C] text-white w-full">
       <div className="max-w-2xl w-full  mb-4 h-screen max-h-screen">
         <SearchForm q={query} />
         {status === "pending" ? <SkeletonLoading /> : null}

diff --git a/app/utils/get-information-from-url.ts b/app/utils/get-information-from-url.ts
@@ -20,6 +20,7 @@ const embeddingModel = new OpenAIEmbeddings({
 const mistralModel = new Fireworks({
   modelName: "accounts/fireworks/models/mixtral-8x7b-instruct",
   streaming: false,
+  maxTokens: 4096,
 });
 
 export const get_information_from_url = async ({

diff --git a/app/utils/search-internet.ts b/app/utils/search-internet.ts
@@ -53,6 +53,7 @@ const outputParser = new StringOutputParser();
 const mistralModel = new Fireworks({
   modelName: "accounts/fireworks/models/mixtral-8x7b-instruct",
   streaming: false,
+  maxTokens: 4096,
 });
 
 const defaultResponse = async (query: string) => {

diff --git a/remix.env.d.ts → env.d.ts b/remix.env.d.ts → env.d.ts
@@ -1,2 +1,2 @@
-/// <reference types="@remix-run/dev" />
+/// <reference types="vite/client" />
 /// <reference types="@remix-run/node" />