DEV Community: Vincent

Vue and TSX ?! 🤯

Vincent — Sat, 20 May 2023 19:28:40 +0000

Many developers appreciate React and its Functional Components (FCs) due to the ease of building "multi-piece" components using JSX (or TSX). While some may assume that JSX is unavailable in Vue, in fact, it is perfectly possible to ditch Vue’s conventional Single File Component pattern (SFC) and use JSX or TSX to build components that share the same context like you would with React. In this article you will learn about the pro’s and con’s of using SFCs or using Vue with JSX and how to build a complex components with a used context by using JSX.

So let’s dive right in!

What are Single File Components (SFCs)?

As the name might already give away, SFCs are components that allow us to write a components by using only a single file for the logic, style and template of the component. This is a pattern that is used by the two frameworks Vue and Svelte, where SFCs are saved with the extensions .vue and .svelte, respectively. The structure of a SFC in Vue might look as follows:



<script setup>
  //component logic goes here
</script>
<template>
  <!-- html goes here -->
</template>
<style>
  //css styling goes here
</style>

This certainly is great, when you are building a component, where all component logic is contained within the same file and exposes the following main benefits on the developer experience (DX):

The component has a clear and maintainable structure that is quite forward (very close to standard HTML)
Using scoped styles you can make sure that your CSS styling only applies to one single component (however, this is often not used in practice)
There is a clear separation of concerns (logic of different components is split to different files)

However, for building components that use a shared context (like for example a dropdown-menu or a accordion), the SFC pattern might seem less convenient. In my opinion, this is where React and functional components (FCs) with JSX perform better. This article might interest you, if you want to read more about why Ryan Carniato is not a fan of SFCs.

What is JSX?

JSX stands for JavaScript XML. It is a way of writing HTML-like code within Javascript code. When used within React, it is also possible to express the logic and html within the same file. An example for a FC component within a JSX file could look as follows:



const MyComponent = () => {  
   //logic is expressed here
   return <div>/* html goes here */</div>;
};

const MyOtherComponent = () => {  
   //logic is expressed here
   return <div>/* html goes here */</div>;
};

export { MyComponent, MyOtherComponent };

As you might notice, with this file it is possible to declare two different components and export them. This can for example come in very handy, when you want to share a state between nested components and do not want to pass it via the component props (which in Vue is called Prop Drilling). If you have been using React before, the hook useContext() might be familiar to you. Using this hook you can access the state defined in a parent component, in any nested Child component. Here you can read more about how to share state between components in React.

But... Also Vue can do the trick!

While the default of using SFCs within .vue files, might in most cases be the right fit, sometimes it might be more beneficial to resort to an alternative solution (for example when you are building a component library). In the following we are going to look at an example where we define a three components Parent, Child and DeepChild in the same .tsx file. The components Parent and DeepChild share the same value for count and by clicking a button in the component grand-child we want to update this variable.



import { defineComponent, provide, inject, Ref, ref } from "vue";

const Parent = defineComponent({
  name: "Parent",
  setup(_, { slots }) {
    // global state count
    const count = ref(0);

    //callback to update count
    const updateCount = () => {
      count.value++;
    };

    // provide count and updateCount to all children
    provide("count", {
      count,
      updateCount,
    });

    return () => (
      <div>
        <span>Parent: {count.value}</span>
        {slots.default?.()}
      </div>
    );
  },
});

const Child = defineComponent({
  name: "Child",
  setup(_, { slots }) {
    // count and updateCount not accessed here
    return () => <div>{slots.default?.()}</div>;
  },
});

const DeepChild = defineComponent({
  name: "DeepChild",
  setup() {
    // count and updateCount injected in DeepChild
    const { count, updateCount } = inject("count") as {
      count: Ref<number>;
      updateCount: () => void;
    };

    return () => (
      <button onClick={() => updateCount()}>DeepChild: {count.value}</button>
    );
  },
});

export { Parent, Child, DeepChild };

Using the functions provide() and inject() we can make the state and an update function globally available to all components by binding them to a key count. When you are coming from React, this might already familiar to you as its quite similar to providing [state, setState] = useState(count) to other components via useContext().

Now we can import the three components Parent, Child and DeepChild where we need them.



<script setup lang="ts">
import {
  Parent, 
  Child,
  DeepChild,
} from "../components/nested-component";
</script>
<template>
 <Parent>
    <Child>
      <DeepChild />
    </Child>
 </Parent>
</template>

And the result looks as follows. We can update count from within the DeepChild component without having to pass it through the intermediate component Child and Prop Drilling.

Using provide/inject is not exclusive to TSX component, however, it seems a lot more intuitive and maintainable having this logic defined in the same file. Here are some ideas, where you might find using TSX useful:

Deeply nested components
recursive components
Headless components and primitives

That's all folks!

What do you think? Do you sometimes use TSX or do you only stick to Vue's SFCs? Where could you imagine could it be applied?

I hope you liked this article and find it useful. Thanks for reading! ❤️

References

P.S.: Thanks to Chat GPT for proofreading this article 😘

Build Type-Safe Components with Vue 3.3

Vincent — Tue, 16 May 2023 22:03:27 +0000

Five days ago, Vue version 3.3 "Rurouni Kenshi" was officially released and it's packed with amazing features enhancing DX and working with Typescript. In this post we are going to look at some of the cool new features and how the new Generic Types feature can help you to build better type-safe components.

What are Generic Types?

You can use Generic Types to check whether two or more props passed to a component do actually have the same type. This could be required when for example building a Select component, as shown in the following example from the official blog post from Evan You:



<script setup lang="ts" generic="T">
defineProps<{
  items: T[]
  selected: T
}>()
</script>

This means, when supplying an input for the items property of type array<string> you would have to supply a value of type string or else Typescript would yell at you.

But when do I actually need this?!

The example above might feel a bit abstract, so let's look at a "real world" scenario where this could actually come in handy.

We are assuming an application, where we are fetching data with different models from the server as for example users and roles. We might wanna use a Select component that works with both types of data. Usually I would also add a Headless component library like Headless UI.

Generic Types in Action

To set up a quick demo we run:



npx create-vite@latest vue-demo --template vue-ts
cd vue-demo
npm install

To set up Headless UI: npm install @headlessui/vue

The Select component

We can create a select component that use a Generic Type T that extends an object of type OptionProps = {id: string | number, name: string}, as follows:



<script setup lang="ts" generic="T extends OptionProps">
import { Listbox, ListboxButton, ListboxOptions, ListboxOption, ListboxLabel, } from "@headlessui/vue";
import { computed } from "vue";

// define and export Option props
export type OptionProps = {
  id: string | number;
  name: string;
};

// define props by using generic
const props = defineProps<{
  options: T[];
  modelValue: T;
}>();

// define emits
const emit = defineEmits<{
  "update:modelValue": [value: T];
}>();

// define proxyValue for modelValue to emit update:modelValue
const proxy = computed({
  get() {
    return props.modelValue;
  },
  set(value: T) {
    emit("update:modelValue", value);
  },
});
</script>
<template>
  <Listbox as="div" v-model="proxy">
    <ListboxLabel> Select an option </ListboxLabel>
    <ListboxButton> {{ proxy.name }} ▼ </ListboxButton>
    <ListboxOptions>
      <ListboxOption v-for="option in options" :key="option.id" :value="option">
        {{ option.name }}
      </ListboxOption>
    </ListboxOptions>
  </Listbox>
</template>

Now that we have defined our <MySelect /> component we can start using it in other places. This is where the power of typescript comes into play.

1. We have the awesome inline-type hinting by Volar extension

This is clearly one of my most favorite features of using Vue with Typscript. When some props on a component are required, Volar will inline hint them that they need to be included.

2. We will get notified when we our input does not satisfy the required prop type

By using the generic T, and defining the required props we know when we are missing some props on the supplied input.

3. We can import `OptionProps` from the component

To make sure that we supply the correct type to the component, we can define an interface User that does extend our required type OptionProps from <MySelect />. This feature of importing types has also just been added recently.

4. We can make sure that our modelValue actually matches the input

As the modelValue requires an initial value of the type supplied with the options prop, it complains as the property supplied in this case is not valid.

That's a wrap!

I really think that Vue 3.3 is a huge boost for the overall DX when using Typescript and building type-safe components. For me personally this will be a huge boost in productivity and I am looking forward to integrate this in my future projects.

What do you think? Are you actually using Typescript with Vue. Have you been using any of the new features yet? And do you think you will find so place where you want to apply Generics to strongly type your components?

In case you liked this article, I would be happy if you'd left a like or to hear from you.

Thanks for reading and happy hacking! ❤️ 💻

🤖 Building a personal agent to use on your portfolio page (with NextJS, tRPC, Typescript, Tailwindcss and GPT-3.5-turbo)

Vincent — Mon, 03 Apr 2023 21:45:18 +0000

In this post, we're using the Open AI chat completion AI to build a conversational agent that you can put on your portfolio page. It is built with NextJS, Tailwindcss, React, Typescript and the Open AI Chat completion API. Try Virtual Vince.

Introduction

There are a lot of articles about building apps with the OpenAI API at the moment and you just gotta ride the hype train, before GPT-5 finally will take all of our jobs. So I was thinking about a cool project and thought it would be fun to build a chat app that serves kinda like a first level support for a potential customer visiting my portfolio page. It's really straight forward and easy to follow along, if you would like to build something similar.

Requirements

The following requirements were set for the realization of this project.

No user data should be stored
The agent should start with a welcoming message to the user
When requested, the agent should be able to explain what I do
The application should feel like a normal chat
There should be some rate limiting and input limits, so users can not burn my tokens
After some time the agent should end the conversation and link the user to my contact page

The requirements suffice to get some easy PoC up and running...

Setting up the app

We're using create-t3-app to set up a NextJS app with TS, Tailwindcss and tRPC.

npx create-t3-app@latest

To use the OpenAI API, I installed the openai client via:

npm install openai

The initial file structure looks like this:

For this project, you can split the application in three parts: All frontend code will go into the pages directory. Server side code that is interacting with the OpenAI API, goes into the server folder. All configuration, like the ApiKeys and validation of environment variables goes into the .env and .env.mjs files.

For those who do not know tRPC yet, here is a short explanation: tRPC stands for type-safe Remote Procedure Call and is a protocol that let's you couple your server-/ and client-side code enabling you to write end-to-end APIs.

The Open AI chat completion API

Before starting, we quickly want to have a look at the OpenAI API reference to see how data is transferred between my app to see how we have to process our chat messages and how we can influence the behavior of the GPT model.

Request

For the request, there are two parameters required: model, which we will set to: gpt-3.5-turbo and messages, which is the whole chat history between the user and the agent (part of the reason, why the chat rate should be limited, so people do not burn your tokens like crazy). The example on the OpenAI page looks like this:

const { Configuration, OpenAIApi } = require("openai");

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);

const completion = await openai.createChatCompletion({
  model: "gpt-3.5-turbo",
  messages: [{role: "user", content: "Hello world"}],
});
console.log(completion.data.choices[0].message);

There are several parameters that can be used to tweak the results that the model produces, however for this app we will only change the following ones from the default:

presence_penalty: this setting influences the likelihood, that the agent will talk about a topic it has already talked about.
max_tokens: the maximum amount of tokens to be generated by the agent

Response

A corresponding response of the Chat Completion API could look like follows:

{
  "id": "chatcmpl-123",
  "object": "chat.completion",
  "created": 1677652288,
  "choices": [{
    "index": 0,
    "message": {
      "role": "assistant",
      "content": "\n\nHello there, how may I assist you today?",
    },
    "finish_reason": "stop"
  }],
  "usage": {
    "prompt_tokens": 9,
    "completion_tokens": 12,
    "total_tokens": 21
  }
}

Here we can already see that the token count per request proportionally increases with the length of a conversation, meaning every subsequent request will become more expensive.

Building the frontend

The application we're building will look like this. A simple chat where the user will get greeted with a welcome message. When the user submits a message, the agent will respond after some timeout.

Before we can start building the frontend, I want to quickly create a dummy reply remote procedure that emulates chat completion API. For this we just create a new router under ~/server/api/routers/chat.ts and create an async public procedure called test, that takes an object, consisting of a role (user in this case) and returns the response I copied from the Open API AI Reference. For the input validation I am using Zod. The procedure awaits a promise to emulate GPT processing the response.

import { z } from "zod";
import { Configuration, OpenAIApi } from "openai";

import { createTRPCRouter, publicProcedure } from "~/server/api/trpc";

/* const openai = new OpenAIApi(
  new Configuration({
    apiKey: process.env.OPENAI_API_KEY,
  })
); */

export const chatRouter = createTRPCRouter({
  example: publicProcedure
    .input(
      z.object({
        role: z.string(),
        content: z.string(),
      })
    )
    .mutation(async ({ input }) => {
      await new Promise((resolve) => setTimeout(resolve, 3000));

      const { content, role } = input;

      //returns a ChatCompletionResponse object example (not the real api)
      const response = {
        id: "chatcmpl-123",
        object: "chat.completion",
        created: 1677652288,
        choices: [
          {
            index: 0,
            message: {
              role: "assistant",
              content: "Answer to your question: " + content,
            },
            finish_reason: "stop",
          },
        ],
        usage: {
          prompt_tokens: 9,
          completion_tokens: 12,
          total_tokens: 21,
        },
      };

      return response?.choices[0]?.message;
    }),
});

After having set up this procedure we can move forward to building the chat.

Building the chat app

In ~/pages/index.tsx we're bulding a NextPage, that has the following two components: Messages and PushMessagesForm. The page shares state between the components by using the useContext() hook. The context is also used to share the state mutators for the states messages and processing between the components. The chat messages state is initiliazed by pushing a first message from the assistant into the messages array (This initial message will also be a generated chat completion later).

import { type NextPage } from "next";
import Head from "next/head";
import {
  createContext,
  useState,
  useContext,
  type FC,
  type FormEvent,
  useRef,
  useEffect,
} from "react";
import { api } from "~/utils/api";

type MessageType = {
  content: string;
  role: string;
};

const MessagesContext = createContext<Array<MessageType>>(
  [] as Array<MessageType>
);
// eslint-disable-next-line @typescript-eslint/no-empty-function
const SetMessagesContext = createContext((_messages: Array<MessageType>) => {});

const ProcessingContext = createContext<boolean>(false);
// eslint-disable-next-line @typescript-eslint/no-empty-function
const SetProcessingContext = createContext((_processing: boolean) => {});

// <- PushChatMessageForm goes here

// <- ChatMessages component goes here

const Home: NextPage = () => {
  const [messages, setMessages] = useState<Array<MessageType>>([
    {
      content: "Hi, I am VirtualVince. How can I help you?",
      role: "assistant",
    },
  ]);

  const [processing, setProcessing] = useState<boolean>(false);

  return (
    <>
      <Head>
        <title>VirtualVince</title>
        <meta name="description" content="Hi I am VirtaulVince. Let's chat." />
      </Head>
      <main className="mx-auto flex h-screen max-w-3xl flex-col bg-white p-5 md:px-0">
        <div className="flex-none">
          <h1 className="text-xl font-bold text-neutral-900 sm:text-2xl md:text-4xl">
            VirtualVince
          </h1>
          <p className="text-sm text-neutral-800 sm:text-base">
            This is VirtualVince, a simple chat bot that you can talk to find
            out a few things about me and what I do. It is built with NextJS,
            Tailwindcss, tRPC, Typescript and the OpenAI chat completion AI.
          </p>
        </div>
        <ProcessingContext.Provider value={processing}>
          <SetProcessingContext.Provider value={setProcessing}>
            <MessagesContext.Provider value={messages}>
              <SetMessagesContext.Provider value={setMessages}>
                <ChatMessages className="mt-5 flex-1 overflow-y-auto" />
                <PushChatMessageForm className="flex-none" />
              </SetMessagesContext.Provider>
            </MessagesContext.Provider>
          </SetProcessingContext.Provider>
        </ProcessingContext.Provider>
      </main>
    </>
  );
};

export default Home;

PushMessagesForm

The component PushMessagesForm handles the user messages and the interaction with the server, i.e. moving the response from the agent into the messages array. By using useContext() we can access the states from outside of the component. To create a more natural feeling of the reaction time of the agent we use a timeout will cause the processing block to only render after 750ms. We use another timer for the isTyping... label over the textarea. As the timeout for the isTyping... label is triggered on the input event we need to define a timerRef with useRef() that is reset every time the input is called.

In the handleSubmit function we only send the request to the server when the message by the user is between the two defined variables minLength and maxLength. Furthermore, the user can only submit the message to the server when the previous request has already been processed.

The message is submitted calling the publicProcedure that was previously defined in the chatRouter, by using the mutateAsync() hook. The means we are performing an asynchronous mutation with tRPC.


const PushChatMessageForm: FC<React.HTMLAttributes<HTMLFormElement>> = ({
  ...props
}) => {
  const [message, setMessage] = useState<string>("");
  const [isTyping, setIsTyping] = useState<boolean>(false);

  const messages = useContext(MessagesContext);
  const setMessages = useContext(SetMessagesContext);

  const isProcessing = useContext(ProcessingContext);
  const setIsProcessing = useContext(SetProcessingContext);

  const sendChatMessage = api.chat.example.useMutation();

  const isTypingTimerRef = useRef<NodeJS.Timeout | null>(null);

  const maxLength = 200;
  const minLength = 10;

  const handleSubmit = async () => {
    if (message.length > minLength && message.length <= maxLength && !isProcessing) {
      messages.push({ content: message, role: "user" });
      setMessages([...messages]);
    } else {
      if (message.length < minLength) {
        alert("Message is too short");
      }

      if (message.length > maxLength) {
        alert("Message is too long");
      }

      if (isProcessing) {
        alert("Wait for Virtual Vince to answer");
      }

      return;
    }

    setMessage("");
    setIsTyping(false);

    setTimeout(() => {
      setIsProcessing(true);
    }, 750);

    await sendChatMessage
      .mutateAsync({
        role: "user",
        content: message,
      })
      .then((response) => {
        if (response) {
          messages.push(response);
          setMessages([...messages]);
          setIsProcessing(false);
        }
      });
  };

  const handleInput = (e: FormEvent<HTMLTextAreaElement>) => {
    setMessage(e.currentTarget.value);
    setIsTyping(true);

    if (isTypingTimerRef.current) clearTimeout(isTypingTimerRef.current);

    isTypingTimerRef.current = setTimeout(() => {
      setIsTyping(false);
    }, 1500);
  };

  return (
    <form
      className={`flex w-full flex-col ${props.className ?? ""}`}
      onSubmit={(e) => {
        e.preventDefault();
        void handleSubmit();
      }}
    >
      <span className="h-6 flex-none text-sm">
        {isTyping ? "Typing..." : ""}
      </span>
      <div className="flex w-full flex-1 flex-row rounded-xl bg-neutral-100 p-3 text-neutral-600 shadow-sm">
        <textarea
          rows={
            message.split(/\r|\n/).length > 3
              ? message.split(/\r|\n/).length
              : 3
          }
          className="flex-1 border-none bg-transparent focus:outline-none"
          value={message}
          onInput={(e) => handleInput(e)}
          onKeyDown={(e) => {
            if (e.key === "Enter") {
              e.preventDefault();
              void handleSubmit();
            }
          }}
        />

        <div className="flex h-full flex-col items-end justify-between">
          <button
            className="rounded-md bg-blue-500 px-3 py-1.5 text-sm text-white disabled:cursor-not-allowed disabled:bg-blue-300"
            disabled={message.length > maxLength || message.length < minLength}
          >
            Send
          </button>
          <span
            className={`text-sm leading-none ${
              message.length > maxLength ? "text-red-500" : "text-neutral-400"
            }`}
          >
            {" "}
            {message.length.toString() + "/" + maxLength.toString()}{" "}
          </span>
        </div>
      </div>
    </form>
  );
};

ChatMessages

This component is a list that displays the chat messages and gives them a different look whether they are from the user or the assistant. It also displays a ... block for the assistant when the user is waiting for a response. To enable rich text formatting, we can add Markdown to the messages using the react-markdown module and the tailwindcss/typography plugin with the prose class. This enables the agent to send actual links, lists and other markdown elements.

const ChatMessages: FC<React.HTMLAttributes<HTMLUListElement>> = ({
  ...props
}) => {
  const messages = useContext(MessagesContext);
  const scrollTargetRef = useRef<HTMLDivElement>(null);
  const processing = useContext(ProcessingContext);

  useEffect(() => {
    if (scrollTargetRef.current) {
      scrollTargetRef.current.scrollIntoView({
        behavior: "smooth",
        block: "end",
        inline: "nearest",
      });
    }
  });

  return (
    <ul className={`flex flex-col gap-y-3 ${props.className ?? ""}`}>
      {messages.map((message, index) => (
        <li
          key={index}
          className={`rounded-2xl px-6 py-4 text-sm shadow-sm md:text-base ${
            message.role === "assistant"
              ? "mr-32 bg-neutral-200 text-neutral-900"
              : "ml-32 bg-blue-500 text-white"
          }`}
        >
          <Markdown>{message.content}</Markdown>
        </li>

        ))}
        { processing && (
          <li
            className={`rounded-2xl px-6 py-4 text-sm shadow-sm md:text-base mr-32 bg-neutral-200 text-neutral-900 w-fit`}
          >
            <div className="animate-pulse flex gap-x-1">
              <div className="h-2 w-2 bg-gray-500 rounded-full"></div>
              <div className="h-2 w-2 bg-gray-400 rounded-full"></div>
              <div className="h-2 w-2 bg-gray-300 rounded-full"></div>
            </div>
          </li>
        )}
      <div ref={scrollTargetRef}></div>
    </ul>
  );
};

Integrating Chat-GPT

Now that we have a nicely working chat app, we want to integrate the Chat Completion API. We'll start by creating a new public procedure called welcome. Here, we will use a system prompt to do the initial configuration for the agent, which just tells the agent what is his task and provide it with some background info about myself:

const configPrompt = 
"I want you to act as a virtual version of me. " +
"Your name is Virtual Vince. Here you have a little information about me: [ " +
"I am a fullstack developer working with Laravel, Vue, React, Astro and NextJS. " +
"I love coding and cycling. ] " +
"You are polite and reply in Markdown format. Any link that you use should be a Markdown URL. " +
"Your first message should be an introduciton of yourself (like: 'Hey I am virtual Vince!'), continue a normal conversation asking for the name of the user." +
"You should keep your messages short and to the point. After about 500 tokens, you should end the conversation and supply the user with a link to 'https://vincentdorian.me/contact'."

This prompt and the two parameters we defined in the beginning are the only things that we will tweak. This prompt is now used to define a new async query. This query will be called in the NextPage Component.

// ~/server/api/routers/chat.ts -> chatRouter() 
welcome: publicProcedure.input(z.object({})).query(async () => {
    const response = await openai.createChatCompletion({
      model: "gpt-3.5-turbo",
      messages: [
        {
          role: "system",
          content: configPrompt,
        },
      ],
      max_tokens: 100,
    });

    return {
      message: response.data.choices[0]?.message,
      total_tokens: response.data.usage?.total_tokens,
    };
  }),

We are also returning the total_tokens used for the chat. The output of the welcome query procedure is used as the first message displayed to the user.

//  ~/pages/index.tsx -> Home(): NextPage
const welcome = api.chat.welcome.useQuery({},{
    refetchOnWindowFocus: false,
  });

  useEffect(() => {
    if (welcome.data) {
      setMessages([welcome.data]);
      setProcessing(false);
    }
  }, [welcome.data]);

The agent will now welcome the user, as seen here:

Subsequent chat messages

For all subsequent messages, we will always have to send the entire chat history. In our procedure we will take the array of messages sent by the user and append the hidden system prompt in front.

send: publicProcedure
    .input(
      z.object({
        messages: z.array(
          z.object({
            role: z.enum(["user", "assistant"]),
            content: z.string(),
          })
        ),
      })
    )
    .mutation(async (req) => {
      const response = await openai.createChatCompletion({
        model: "gpt-3.5-turbo",
        messages: [
          {
            role: "system",
            content: configPrompt,
          },
          ...req.input.messages,
        ],
      });

      return {
        message: response.data.choices[0]?.message,
        total_tokens: response.data.usage?.total_tokens,
      };
    }),

This procedure is called from the PushChatMessageForm Component. For this we are just redefining the sendChatMessage() function that we defined earlier and change it to:

const sendChatMessage = api.chat.example.useMutation();

To keep track of the total token count, we also define additional contexts for, tokenCount and setTokenCount(), which we are adding to the Home() component.

<ProcessingContext.Provider value={processing}>
          <SetProcessingContext.Provider value={setProcessing}>
            <MessagesContext.Provider value={messages}>
              <SetMessagesContext.Provider value={setMessages}>
                <SetTokenCountContext.Provider value={setTokenCount}>
                  <TokenCountContext.Provider value={tokenCount}>
                    <ChatMessages className="mt-5 flex-1 overflow-y-auto" />
                    {tokenCount < 500 && (
                      <PushChatMessageForm className="flex-none" />
                    )}
                  </TokenCountContext.Provider>
                </SetTokenCountContext.Provider>
              </SetMessagesContext.Provider>
            </MessagesContext.Provider>
          </SetProcessingContext.Provider>
        </ProcessingContext.Provider>

This context is the used to hide the messages form upon reaching 500 tokens.

The callback of the async mutation in the handleSubmit() function we defined earlier now becomes:

await sendChatMessage
      .mutateAsync({ messages: messagesProxy })
      .then((response) => {
        if (response) {
          messagesProxy.push(response.message as MessageType);
          setTokenCount(response.total_tokens as number);
          setMessages([...messagesProxy]);
          setIsProcessing(false);
        }
      });

Now, we can start having a conversation with our own personal virtual agent.

Conclusion

I think it's already quite nice using this PoC and the "conversation" you are having with the agent feels kinda natural. Of course there are some hiccups here and there in the conversation, but with more detailed prompting you can probably fix them more or less.

For the future I would be really interested, how to use this with GPT plugins, that can access data on my portfolio page or even GitHub when requested. (For now you would have to give it in your initial prompt or feeding another system prompt when triggered by some keyword maybe.)

If you would like to clone this repo just go for it. Here's the link.

❤️ If you enjoyed reading I would be happy if you leave a like or comment. ❤️

If you have any questions, feel free to ask. I am always happy to chat.

6 tailwindcss plugins to make your web apps better

Vincent — Wed, 08 Mar 2023 20:33:10 +0000

It's remarkable. Almost every new website I find on the web is made with tailwindcss. And that is for a good reason. The most popular css framework of the modern web provides almost everything you need to craft beautiful and well designed websites just out of the box.

For most use cases the base functions provided by tailwindcss suffice, however, in some cases they need to be extended. Thankfully, tailwindcss provides an easy way to add plugins on top of it. In the following I will introduce 7 plugins that can help improve your user experience and boost your web apps.

First, let's start with the one of the official tailwindcss plugins:

1. @tailwindcss/typography

This plugin provides a set of prose classes you can use to add beautiful typographic defaults to any vanilla HTML you don’t control, like HTML rendered from Markdown, or pulled from a CMS. It allows you to define on of five different gray scales, different sizing scales and element specific modifiers. This plugin is especially handy when working with content-heavy sites as for example your personal blog.

see full documentation here

2. @kamona/tailwindcss-perspective

This plugin adds perspective utilities that can be used for 3D CSS transforms and extends the rotate utility classes, so you make stuff like this:

(Screenshot taken from https://kamona-wd.github.io/tailwindcss-perspective/)

3. tailwindcss-no-scrollbar

With this plugin you can remove a scrollbar from the screen. This especially comes in handy for pages where you are using scroll animations and don't want the scrollbar to be visible.

4. tailwindcss-radix

The functionalities are provided by HeadlessUI by default, however for React users relying on RadixUI, this plugin gives enables developers to define variants based on radix states.

This can for example be used to use different stylings for the Radix ContextMenu component when either being disabled or not.

import React from "react";
import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";

const ContextMenu = () => {
  return (
    // --snip--
    <ContextMenuPrimitive.Item
      disabled
      className="radix-disabled:opacity-50 radix-disabled:cursor-not-allowed"
    >
      Item
    </ContextMenuPrimitive.Item>
    // --snip--
  );
};

For full documentation click here

5. tailwindcss-unsplash

This plugin uses the Unsplash API to fetch images that are then used as a background image. The plugin allows you to fetch an Unsplash image by it's ID and also choose for a resolution, such that the following code renders the image below:

<div>
    <span>Unsplash Background-Image</span>
    <div class="bg-unsplash-[SBVWM7Ysmes/lg] bg-cover h-96 w-96 "></div>
</div>

Using this plugin can boost your development speed by a lot.
for full documentation click here

6. @downwindcss/easings

Using easings is essential to make your animations look good and I think every tailwind user knows the timing functions ease-in, ease-out, ease-linear and ease-in-out, but sometimes these easings are not exactly what you need.

Tailwindcss also provides the functionality to define your custom timing functions by using the css property cubic-bezier(), however by using this plugin, you can choose from a large set of timing functions.

Screenshot from https://easings.net/

Alright, that's it!

I think, these plugins can really help you take your web apps to the next level. But, what do you think? Are there any plugins missing from that list. Do you even use plugins for tailwindcss? I would be interested to hear from you in the comments!

❤️ Thanks for reading ❤️

Cool nav link hover animations with tailwindcss

Vincent — Wed, 01 Mar 2023 22:02:44 +0000

There is this new trend called "neo-brutalism" that's used in quite a lot of applications on the web these day (e.g. on Figma or Gumroad.

I personally really like that style and it seems really fresh and clean to me. Often the hover animations on navigation links are using a kind of sliding borders from left to right.

Implementation in CSS

After a little research I have found that this can easily be implemented with CSS and the pseudo-element "after".

a:after {
  display:block;
  content: '';
  border-bottom: solid 3px black;  
  transform: scaleX(0);  
  transition: transform 250ms ease-in-out;
}
a:hover:after { transform: scaleX(1); }

This will create the effect of a bottom border growing from the center when hovering the link as can be seen in this codepen.

Pretty nice already, right?

Implementation in Tailwindcss

As I am a hard-core tailwind user (and probably always will be), I have transformed this into tailwind utility classes, such that when applied on a link element it looks as follows:

Expand from center

<a href="#" class="relative text-xl w-fit block after:block after:content-[''] after:absolute after:h-[3px] after:bg-black after:w-full after:scale-x-0 after:hover:scale-x-100 after:transition after:duration-300 after:origin-center">
Link
</a>

Expand from left

<a href="#" class="relative text-xl w-fit block after:block after:content-[''] after:absolute after:h-[3px] after:bg-black after:w-full after:scale-x-0 after:hover:scale-x-100 after:transition after:duration-300 after:origin-left">
Link
</a>

Expand from right

<a href="#" class="relative text-xl w-fit block after:block after:content-[''] after:absolute after:h-[3px] after:bg-black after:w-full after:scale-x-0 after:hover:scale-x-100 after:transition after:duration-300 after:origin-right">
Link
</a>

This is an easy and quick solution to create some modern link element styling but there are many other ways this can be used (for example with background-gradients).

Here are my sources for this post:
https://stackoverflow.com/questions/28623446/hover-effect-expand-bottom-border
https://css-tricks.com/css-link-hover-effects/