doc: added changeset

.changeset/four-jobs-play.md

@@ -0,0 +1,7 @@
+---
+"create-llama": patch
+---
+
+- Added option to create a new project based on community templates
+- Added OpenAI model selector for NextJS projects
+- Added GPT4 Vision support (and file upload)

packages/create-llama/templates/components/ui/html/chat/chat-avatar.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import Image from "next/image";
+import { Message } from "./chat-messages";
+
+export default function ChatAvatar(message: Message) {
+  if (message.role === "user") {
+    return (
+      <div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow bg-background">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 256 256"
+          fill="currentColor"
+          className="h-4 w-4"
+        >
+          <path d="M230.92 212c-15.23-26.33-38.7-45.21-66.09-54.16a72 72 0 1 0-73.66 0c-27.39 8.94-50.86 27.82-66.09 54.16a8 8 0 1 0 13.85 8c18.84-32.56 52.14-52 89.07-52s70.23 19.44 89.07 52a8 8 0 1 0 13.85-8ZM72 96a56 56 0 1 1 56 56 56.06 56.06 0 0 1-56-56Z"></path>
+        </svg>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border  bg-black text-white">
+      <Image
+        className="rounded-md"
+        src="/llama.png"
+        alt="Llama Logo"
+        width={24}
+        height={24}
+        priority
+      />
+    </div>
+  );
+}

packages/create-llama/templates/components/ui/html/chat/chat-input.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+export interface ChatInputProps {
+  /** The current value of the input */
+  input?: string;
+  /** An input/textarea-ready onChange handler to control the value of the input */
+  handleInputChange?: (
+    e:
+      | React.ChangeEvent<HTMLInputElement>
+      | React.ChangeEvent<HTMLTextAreaElement>,
+  ) => void;
+  /** Form submission handler to automatically reset input and append a user message  */
+  handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+  isLoading: boolean;
+  multiModal?: boolean;
+}
+
+export default function ChatInput(props: ChatInputProps) {
+  return (
+    <>
+      <form
+        onSubmit={props.handleSubmit}
+        className="flex items-start justify-between w-full max-w-5xl p-4 bg-white rounded-xl shadow-xl gap-4"
+      >
+        <input
+          autoFocus
+          name="message"
+          placeholder="Type a message"
+          className="w-full p-4 rounded-xl shadow-inner flex-1"
+          value={props.input}
+          onChange={props.handleInputChange}
+        />
+        <button
+          disabled={props.isLoading}
+          type="submit"
+          className="p-4 text-white rounded-xl shadow-xl bg-gradient-to-r from-cyan-500 to-sky-500 disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          Send message
+        </button>
+      </form>
+    </>
+  );
+}

packages/create-llama/templates/components/ui/html/chat/chat-messages.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import ChatItem from "./chat-item";
+
+export interface Message {
+  id: string;
+  content: string;
+  role: string;
+}
+
+export default function ChatMessages({
+  messages,
+  isLoading,
+  reload,
+  stop,
+}: {
+  messages: Message[];
+  isLoading?: boolean;
+  stop?: () => void;
+  reload?: () => void;
+}) {
+  const scrollableChatContainerRef = useRef<HTMLDivElement>(null);
+
+  const scrollToBottom = () => {
+    if (scrollableChatContainerRef.current) {
+      scrollableChatContainerRef.current.scrollTop =
+        scrollableChatContainerRef.current.scrollHeight;
+    }
+  };
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages.length]);
+
+  return (
+    <div className="w-full max-w-5xl p-4 bg-white rounded-xl shadow-xl">
+      <div
+        className="flex flex-col gap-5 divide-y h-[50vh] overflow-auto"
+        ref={scrollableChatContainerRef}
+      >
+        {messages.map((m: Message) => (
+          <ChatItem key={m.id} {...m} />
+        ))}
+      </div>
+    </div>
+  );
+}

packages/create-llama/templates/components/ui/html/chat/index.ts

@@ -1,5 +1,6 @@
 import ChatInput from "./chat-input";
 import ChatMessages from "./chat-messages";
 
-export { type ChatHandler, type Message } from "./chat.interface";
+export type { ChatInputProps } from "./chat-input";
+export type { Message } from "./chat-messages";
 export { ChatInput, ChatMessages };

packages/create-llama/templates/components/ui/shadcn/chat/chat-avatar.tsx

@@ -1,25 +0,0 @@
-import { User2 } from "lucide-react";
-import Image from "next/image";
-
-export default function ChatAvatar({ role }: { role: string }) {
-  if (role === "user") {
-    return (
-      <div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border bg-background shadow">
-        <User2 className="h-4 w-4" />
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border bg-black text-white shadow">
-      <Image
-        className="rounded-md"
-        src="/llama.png"
-        alt="Llama Logo"
-        width={24}
-        height={24}
-        priority
-      />
-    </div>
-  );
-}

packages/create-llama/templates/components/ui/shadcn/chat/chat-input.tsx

@@ -1,84 +0,0 @@
-import { useState } from "react";
-import { Button } from "../button";
-import FileUploader from "../file-uploader";
-import { Input } from "../input";
-import UploadImagePreview from "../upload-image-preview";
-import { ChatHandler } from "./chat.interface";
-
-export default function ChatInput(
-  props: Pick<
-    ChatHandler,
-    | "isLoading"
-    | "input"
-    | "onFileUpload"
-    | "onFileError"
-    | "handleSubmit"
-    | "handleInputChange"
-  > & {
-    multiModal?: boolean;
-  },
-) {
-  const [imageUrl, setImageUrl] = useState<string | null>(null);
-
-  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    if (imageUrl) {
-      props.handleSubmit(e, {
-        data: { imageUrl: imageUrl },
-      });
-      setImageUrl(null);
-      return;
-    }
-    props.handleSubmit(e);
-  };
-
-  const onRemovePreviewImage = () => setImageUrl(null);
-
-  const handleUploadImageFile = async (file: File) => {
-    const base64 = await new Promise<string>((resolve, reject) => {
-      const reader = new FileReader();
-      reader.readAsDataURL(file);
-      reader.onload = () => resolve(reader.result as string);
-      reader.onerror = (error) => reject(error);
-    });
-    setImageUrl(base64);
-  };
-
-  const handleUploadFile = async (file: File) => {
-    try {
-      if (props.multiModal && file.type.startsWith("image/")) {
-        return await handleUploadImageFile(file);
-      }
-      props.onFileUpload?.(file);
-    } catch (error: any) {
-      props.onFileError?.(error.message);
-    }
-  };
-
-  return (
-    <form
-      onSubmit={onSubmit}
-      className="rounded-xl bg-white p-4 shadow-xl space-y-4"
-    >
-      {imageUrl && (
-        <UploadImagePreview url={imageUrl} onRemove={onRemovePreviewImage} />
-      )}
-      <div className="flex w-full items-start justify-between gap-4 ">
-        <Input
-          autoFocus
-          name="message"
-          placeholder="Type a message"
-          className="flex-1"
-          value={props.input}
-          onChange={props.handleInputChange}
-        />
-        <FileUploader
-          onFileUpload={handleUploadFile}
-          onFileError={props.onFileError}
-        />
-        <Button type="submit" disabled={props.isLoading}>
-          Send message
-        </Button>
-      </div>
-    </form>
-  );
-}

packages/create-llama/templates/components/ui/shadcn/chat/chat-messages.tsx

@@ -1,64 +0,0 @@
-import { useEffect, useRef } from "react";
-import { Loader2 } from "lucide-react";
-
-import ChatActions from "./chat-actions";
-import ChatMessage from "./chat-message";
-import { ChatHandler } from "./chat.interface";
-
-export default function ChatMessages(
-  props: Pick<ChatHandler, "messages" | "isLoading" | "reload" | "stop">,
-) {
-  const scrollableChatContainerRef = useRef<HTMLDivElement>(null);
-  const messageLength = props.messages.length;
-  const lastMessage = props.messages[messageLength - 1];
-
-  const scrollToBottom = () => {
-    if (scrollableChatContainerRef.current) {
-      scrollableChatContainerRef.current.scrollTop =
-        scrollableChatContainerRef.current.scrollHeight;
-    }
-  };
-
-  const isLastMessageFromAssistant =
-    messageLength > 0 && lastMessage?.role !== "user";
-  const showReload =
-    props.reload && !props.isLoading && isLastMessageFromAssistant;
-  const showStop = props.stop && props.isLoading;
-
-  // `isPending` indicate
-  // that stream response is not yet received from the server,
-  // so we show a loading indicator to give a better UX.
-  const isPending = props.isLoading && !isLastMessageFromAssistant;
-
-  useEffect(() => {
-    scrollToBottom();
-  }, [messageLength, lastMessage]);
-
-  return (
-    <div className="w-full rounded-xl bg-white p-4 shadow-xl pb-0">
-      <div
-        className="flex h-[50vh] flex-col gap-5 divide-y overflow-y-auto pb-4"
-        ref={scrollableChatContainerRef}
-      >
-        {props.messages.map((m) => (
-          <ChatMessage key={m.id} {...m} />
-        ))}
-        {isPending && (
-          <div
-            className='flex justify-center items-center pt-10'
-          >
-            <Loader2 className="h-4 w-4 animate-spin"/>
-          </div>
-        )}
-      </div>
-      <div className="flex justify-end py-4">
-        <ChatActions
-          reload={props.reload}
-          stop={props.stop}
-          showReload={showReload}
-          showStop={showStop}
-        />
-      </div>
-    </div>
-  );
-}

packages/create-llama/templates/index.ts

@@ -162,7 +162,7 @@ const installTSTemplate = async ({
   /**
    * Copy the selected UI files to the target directory and reference it.
    */
-  if (framework === "nextjs" && ui !== "html") {
+  if (framework === "nextjs" && ui !== "shadcn") {
     console.log("\nUsing UI:", ui, "\n");
     const uiPath = path.join(compPath, "ui", ui);
     const destUiPath = path.join(root, "app", "components", "ui");
@@ -227,26 +227,26 @@ const installTSTemplate = async ({
     };
   }
 
-  if (framework === "nextjs" && ui === "shadcn") {
-    // add shadcn dependencies to package.json
+  if (framework === "nextjs" && ui === "html") {
+    // remove shadcn dependencies if html ui is selected
     packageJson.dependencies = {
       ...packageJson.dependencies,
-      "tailwind-merge": "^2",
-      "@radix-ui/react-slot": "^1",
-      "class-variance-authority": "^0.7",
-      clsx: "^1.2.1",
-      "lucide-react": "^0.291",
-      remark: "^14.0.3",
-      "remark-code-import": "^1.2.0",
-      "remark-gfm": "^3.0.1",
-      "remark-math": "^5.1.1",
-      "react-markdown": "^8.0.7",
-      "react-syntax-highlighter": "^15.5.0",
+      "tailwind-merge": undefined,
+      "@radix-ui/react-slot": undefined,
+      "class-variance-authority": undefined,
+      clsx: undefined,
+      "lucide-react": undefined,
+      remark: undefined,
+      "remark-code-import": undefined,
+      "remark-gfm": undefined,
+      "remark-math": undefined,
+      "react-markdown": undefined,
+      "react-syntax-highlighter": undefined,
     };
 
     packageJson.devDependencies = {
       ...packageJson.devDependencies,
-      "@types/react-syntax-highlighter": "^15.5.6",
+      "@types/react-syntax-highlighter": undefined,
     };
   }
 

packages/create-llama/templates/types/streaming/nextjs/app/api/chat/route.ts

@@ -44,7 +44,7 @@ export async function POST(request: NextRequest) {
 
     const llm = new OpenAI({
       model: MODEL,
-      maxTokens: 4096,
+      maxTokens: 2048,
     });
 
     const chatEngine = await createChatEngine(llm);

packages/create-llama/templates/types/streaming/nextjs/app/components/ui/chat/chat-avatar.tsx

@@ -1,26 +1,17 @@
-"use client";
-
+import { User2 } from "lucide-react";
 import Image from "next/image";
-import { Message } from "./chat-messages";
 
-export default function ChatAvatar(message: Message) {
-  if (message.role === "user") {
+export default function ChatAvatar({ role }: { role: string }) {
+  if (role === "user") {
     return (
-      <div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow bg-background">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 256 256"
-          fill="currentColor"
-          className="h-4 w-4"
-        >
-          <path d="M230.92 212c-15.23-26.33-38.7-45.21-66.09-54.16a72 72 0 1 0-73.66 0c-27.39 8.94-50.86 27.82-66.09 54.16a8 8 0 1 0 13.85 8c18.84-32.56 52.14-52 89.07-52s70.23 19.44 89.07 52a8 8 0 1 0 13.85-8ZM72 96a56 56 0 1 1 56 56 56.06 56.06 0 0 1-56-56Z"></path>
-        </svg>
+      <div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border bg-background shadow">
+        <User2 className="h-4 w-4" />
       </div>
     );
   }
 
   return (
-    <div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border  bg-black text-white">
+    <div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border bg-black text-white shadow">
       <Image
         className="rounded-md"
         src="/llama.png"

packages/create-llama/templates/types/streaming/nextjs/app/components/ui/chat/chat-input.tsx

@@ -1,43 +1,84 @@
-"use client";
+import { useState } from "react";
+import { Button } from "../button";
+import FileUploader from "../file-uploader";
+import { Input } from "../input";
+import UploadImagePreview from "../upload-image-preview";
+import { ChatHandler } from "./chat.interface";
 
-export interface ChatInputProps {
-  /** The current value of the input */
-  input?: string;
-  /** An input/textarea-ready onChange handler to control the value of the input */
-  handleInputChange?: (
-    e:
-      | React.ChangeEvent<HTMLInputElement>
-      | React.ChangeEvent<HTMLTextAreaElement>,
-  ) => void;
-  /** Form submission handler to automatically reset input and append a user message  */
-  handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
-  isLoading: boolean;
-  multiModal?: boolean;
-}
+export default function ChatInput(
+  props: Pick<
+    ChatHandler,
+    | "isLoading"
+    | "input"
+    | "onFileUpload"
+    | "onFileError"
+    | "handleSubmit"
+    | "handleInputChange"
+  > & {
+    multiModal?: boolean;
+  },
+) {
+  const [imageUrl, setImageUrl] = useState<string | null>(null);
+
+  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    if (imageUrl) {
+      props.handleSubmit(e, {
+        data: { imageUrl: imageUrl },
+      });
+      setImageUrl(null);
+      return;
+    }
+    props.handleSubmit(e);
+  };
+
+  const onRemovePreviewImage = () => setImageUrl(null);
+
+  const handleUploadImageFile = async (file: File) => {
+    const base64 = await new Promise<string>((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => resolve(reader.result as string);
+      reader.onerror = (error) => reject(error);
+    });
+    setImageUrl(base64);
+  };
+
+  const handleUploadFile = async (file: File) => {
+    try {
+      if (props.multiModal && file.type.startsWith("image/")) {
+        return await handleUploadImageFile(file);
+      }
+      props.onFileUpload?.(file);
+    } catch (error: any) {
+      props.onFileError?.(error.message);
+    }
+  };
 
-export default function ChatInput(props: ChatInputProps) {
   return (
-    <>
-      <form
-        onSubmit={props.handleSubmit}
-        className="flex items-start justify-between w-full max-w-5xl p-4 bg-white rounded-xl shadow-xl gap-4"
-      >
-        <input
+    <form
+      onSubmit={onSubmit}
+      className="rounded-xl bg-white p-4 shadow-xl space-y-4"
+    >
+      {imageUrl && (
+        <UploadImagePreview url={imageUrl} onRemove={onRemovePreviewImage} />
+      )}
+      <div className="flex w-full items-start justify-between gap-4 ">
+        <Input
           autoFocus
           name="message"
           placeholder="Type a message"
-          className="w-full p-4 rounded-xl shadow-inner flex-1"
+          className="flex-1"
           value={props.input}
           onChange={props.handleInputChange}
         />
-        <button
-          disabled={props.isLoading}
-          type="submit"
-          className="p-4 text-white rounded-xl shadow-xl bg-gradient-to-r from-cyan-500 to-sky-500 disabled:opacity-50 disabled:cursor-not-allowed"
-        >
+        <FileUploader
+          onFileUpload={handleUploadFile}
+          onFileError={props.onFileError}
+        />
+        <Button type="submit" disabled={props.isLoading}>
           Send message
-        </button>
-      </form>
-    </>
+        </Button>
+      </div>
+    </form>
   );
 }

packages/create-llama/templates/types/streaming/nextjs/app/components/ui/chat/chat-messages.tsx

@@ -1,26 +1,16 @@
-"use client";
-
+import { Loader2 } from "lucide-react";
 import { useEffect, useRef } from "react";
-import ChatItem from "./chat-item";
 
-export interface Message {
-  id: string;
-  content: string;
-  role: string;
-}
+import ChatActions from "./chat-actions";
+import ChatMessage from "./chat-message";
+import { ChatHandler } from "./chat.interface";
 
-export default function ChatMessages({
-  messages,
-  isLoading,
-  reload,
-  stop,
-}: {
-  messages: Message[];
-  isLoading?: boolean;
-  stop?: () => void;
-  reload?: () => void;
-}) {
+export default function ChatMessages(
+  props: Pick<ChatHandler, "messages" | "isLoading" | "reload" | "stop">,
+) {
   const scrollableChatContainerRef = useRef<HTMLDivElement>(null);
+  const messageLength = props.messages.length;
+  const lastMessage = props.messages[messageLength - 1];
 
   const scrollToBottom = () => {
     if (scrollableChatContainerRef.current) {
@@ -29,19 +19,43 @@ export default function ChatMessages({
     }
   };
 
+  const isLastMessageFromAssistant =
+    messageLength > 0 && lastMessage?.role !== "user";
+  const showReload =
+    props.reload && !props.isLoading && isLastMessageFromAssistant;
+  const showStop = props.stop && props.isLoading;
+
+  // `isPending` indicate
+  // that stream response is not yet received from the server,
+  // so we show a loading indicator to give a better UX.
+  const isPending = props.isLoading && !isLastMessageFromAssistant;
+
   useEffect(() => {
     scrollToBottom();
-  }, [messages.length]);
+  }, [messageLength, lastMessage]);
 
   return (
-    <div className="w-full max-w-5xl p-4 bg-white rounded-xl shadow-xl">
+    <div className="w-full rounded-xl bg-white p-4 shadow-xl pb-0">
       <div
-        className="flex flex-col gap-5 divide-y h-[50vh] overflow-auto"
+        className="flex h-[50vh] flex-col gap-5 divide-y overflow-y-auto pb-4"
         ref={scrollableChatContainerRef}
       >
-        {messages.map((m: Message) => (
-          <ChatItem key={m.id} {...m} />
+        {props.messages.map((m) => (
+          <ChatMessage key={m.id} {...m} />
         ))}
+        {isPending && (
+          <div className="flex justify-center items-center pt-10">
+            <Loader2 className="h-4 w-4 animate-spin" />
+          </div>
+        )}
+      </div>
+      <div className="flex justify-end py-4">
+        <ChatActions
+          reload={props.reload}
+          stop={props.stop}
+          showReload={showReload}
+          showStop={showStop}
+        />
       </div>
     </div>
   );

packages/create-llama/templates/types/streaming/nextjs/app/components/ui/chat/index.ts

@@ -1,6 +1,5 @@
 import ChatInput from "./chat-input";
 import ChatMessages from "./chat-messages";
 
-export type { ChatInputProps } from "./chat-input";
-export type { Message } from "./chat-messages";
+export { type ChatHandler, type Message } from "./chat.interface";
 export { ChatInput, ChatMessages };

packages/create-llama/templates/types/streaming/nextjs/package.json

@@ -8,22 +8,35 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "ai": "^2.2.25",
-    "llamaindex": "0.0.31",
+    "@radix-ui/react-slot": "^1.0.2",
+    "ai": "^2.2.27",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^1.2.1",
     "dotenv": "^16.3.1",
-    "next": "^13",
-    "react": "^18",
-    "react-dom": "^18"
+    "llamaindex": "0.0.37",
+    "lucide-react": "^0.294.0",
+    "next": "^13.5.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-markdown": "^8.0.7",
+    "react-syntax-highlighter": "^15.5.0",
+    "remark": "^14.0.3",
+    "remark-code-import": "^1.2.0",
+    "remark-gfm": "^3.0.1",
+    "remark-math": "^5.1.1",
+    "supports-color": "^9.4.0",
+    "tailwind-merge": "^2.1.0"
   },
   "devDependencies": {
-    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "autoprefixer": "^10.1",
-    "eslint": "^8",
-    "eslint-config-next": "^13",
-    "postcss": "^8",
-    "tailwindcss": "^3.3",
-    "typescript": "^5"
+    "@types/node": "^20.10.3",
+    "@types/react": "^18.2.42",
+    "@types/react-dom": "^18.2.17",
+    "autoprefixer": "^10.4.16",
+    "eslint": "^8.55.0",
+    "eslint-config-next": "^13.5.6",
+    "postcss": "^8.4.32",
+    "tailwindcss": "^3.3.6",
+    "typescript": "^5.3.2",
+    "@types/react-syntax-highlighter": "^15.5.11"
   }
 }