talq

talq 💬 (WIP)

Conversational UI library for React projects

Getting started

Install talq with your favorite package manager on the root folder of your project:

npm install talq /or/ yarn add talq

Once you did that you can import talq when needed like this:

import {
  ChatBox,
  MessagesContainer,
  MessageInput,
  Input,
  Status
} from "talq/lib";

These are the basic talq components and what they do:

ChatBox

Parent of the whole library. It's always the upper component on the hierarchy.

const ComponentWithTalq = () => <ChatBox>{insertYourChatHere}</ChatBox>;

Props

Name	Type	Function	Required	Default value
children	JSX Element[]	The other UI components	Yes	None
fluid	boolean	Makes container 100% width and height	No	false
width	string	Container width (px, %, vw)	false	500px
height	string	Container height (px, %, vw)	false	500px
showSenderName	boolean	Show the name of the message sender	No	false
showSenderPic	boolean	Show the picture of the message sender	No	false

MessagesContainer

Container of messages, wielder of the truth. It takes an array and makes it a conversation.

const ComponentWithTalq = () => (
  <ChatBox>
    <MessagesContainer messages={messages} />
  </ChatBox>
);

The messages object

So how does this messages you talk about look like?

Like this:

const messages = [
  {
    message: "Lorem ipsum dolor sit amet.",
    position: "left",
    key: "sdadsa2",
    senderName: "The lorem ipsum guy",
    senderPic: sender
  }
];

If senderName is the same as the previous message it automatically group messages!

Behold the message properties:

Name	** Type**	** Function**	** Required**	** Default value**
message	string	The content to be displayed	Yes	“Message”
color	string	The color of the message (Only applies to left ones)	No	"#00A896"
senderName	string	The name of the sender	No
senderPic	string	The url where the pic of the sender is	No

MessageInput

Where your inputs live. Due to the modular nature of the library, expect new inputs in the future. It exposes two functions in the render props pattern and the value.

const ComponentWithTalq = () => (
  <ChatBox>
    <MessagesContainer messages={messages} />
    <MessageInput
      onChange={value => console.log("onChange", value)}
      onSubmit={value => handleOnSubmit(value)}
    >
      {({ value, handleChange, handleSubmit }) => {
        return (
          <Input
            value={value}
            onChange={handleChange}
            onSubmit={handleSubmit}
          />
        );
      }}
    </MessageInput>
  </ChatBox>
);

handleChange

Returns the value of the input when onChange event is triggered.

handleSubmit

Returns the value of the input when the user submits. (By default when it presses the Enter key)

Input

Standard text input to get your chat working. It uses

const ComponentWithTalq = () => (
  <ChatBox>
    <MessagesContainer messages={messages} />
    <MessageInput>
      {({ value, handleChange, handleSubmit }) => {
        return (
          <Input
            value={value}
            onChange={console.log(value)}
            onSubmit={console.log(value)}
          />
        );
      }}
    </MessageInput>
  </ChatBox>
);

Status (optional component)

It let's you show a little status message on a certain action, the clasic "XXX is writing..."

const ComponentWithTalq = () => (
  <ChatBox>
    <MessagesContainer messages={messages} />
    <Status text={user.isWriting ? "XXX is writing..." : null}>
    <MessageInput>
      {({ value, handleChange, handleSubmit }) => {
        return (
          <Input
            value={value}
            onChange={handleChange}
            onSubmit={handleSubmit}
          />
        );
      }}
    </MessageInput>
  </ChatBox>
);

Roadmap

• First release
• Automatic message grouping
• Detailed documentation
• Contributing.md
• Images support
• Bubbles input
• Theming support
• Emoji input