jmaczan / basic-vue-chat Goto Github PK

Hello, who knows how to fix this error?

Unknown custom element: font-awesome-icon - did you register the component correctly? For recursive components, make sure to provide the "name" option.

I saw one topic in "closed" issues, but that answer doesn't help in this case.

Hi, thank you for your wonderful chat app. I'm trying to change the colors and I'm facing an issue. Right now, I have a Vue application which is using Vuetify.js. When I try to change the colors, nothing seem to happen. I'm not using SCSS in my project.

I tested the initial feed and it seemed that the id is wrong. Person should have id=1, not id=0 because I found that you set the default id of "me" as 0 (after examing the source code). Using the example you gave I got the reserved result:

(I'm a chinese student, sorry for my poor English :(

How to use npm run build that process produced three JS file(esm, min, umd)?
Can it include in script tag on HTML like npm run serve display?

When I integrate this component to my app, my css was overwritten by component css. For example:
body element text-align become center.

or I missing something?

Assuming you used cli to something like:

vue create my-project-name

INSTALL PACKAGES

npm install vue-moment
npm install sass-loader --save-dev 
npm install --save-dev node-sass 
yarn add core-js
npm install ** not 100% sure this is needed but ran into problems without doing it
npm install --save emoji-mart-vue ** only had to this the second time around

COPY FOLDERS

Then in your personal project - you'll need to literally drag three folders (and their subfolders and into your project.

1. Copy into your components folder the folder called basic-vue-chat from the github repo it is under src > components > basic-vue-chat (there will 3 folders in there - you need them all)
   
2. Also into your src folder copy the folder called helpers
3. Into your assets folder copy the folder called scss (it will have files and folders)

USING THE COMPONENT:

<template>
  <div class="hello">
    <basic-vue-chat />
  </div>
</template>

<script>
import BasicVueChat from './basic-vue-chat/BasicVueChat.vue'

export default {
  name: 'HelloWorld',
  components: {
    BasicVueChat
  },
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

NOTE (this may not happen to you):

Due to some error checking, in the InputField.vue methods, I had to change

    // send (event) {
      send () {

• This happened in other components and had to do similar send(event) => send()
• In my second try, I had to install
• In my second try, I also got the following error:

 warning  in ./src/components/basic-vue-chat/messages/MessagesList.vue?vue&type=template&id=a81b6668&scoped=true&

Module Warning (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):

i found this error whe use this lib, am I missing something?

Can you please add a short example in README.md at Customization->Styling?

Like how to override $primary with a new color

`<style lang="scss">

// example here

</style>`

I'd like to be able to add a custom style to individual messages (based on content... for example, a message indicating an error could be red). I have implemented this very simply in your code, but would like to offer the changes if you'd like for the component.

I added a "msgstyle" prop in MessagesList.vue:

      <message-own
        v-if="message.id === authorId"
        :msgstyle="message.msgstyle"
        :date="message.date"
        :image-url="message.imageUrl"
        :contents="message.contents"
      />
      <message-foreign
        v-else
        :msgstyle="message.msgstyle"
        :author="message.author"
        :date="message.date"
        :image-url="message.imageUrl"
        :contents="message.contents"
      />

And then added this in MessageForeign.vue and MessageOwn.vue:

added to props in each:

    msgstyle: {
      type: String,
      default: "",
      required: false,
    },

Then simply added into message__contents div:
<div class="message__contents" :style="msgstyle">
Of course, there is no error checking in this example, it is incumbent on the user to pass a valid "style". But, for me, this made the component much, much more flexible!

Thanks for the simple, elegant control!

Sending same text at same time generates a warning in the console.
In messages/MessagesList.vue it seems better to use the index provided by v-for, instead of the messageKey() function

Now:
v-for="message in feed" :key="messageKey(message)"

With index:
v-for="(message, index) in feed" :key="index"

Nice chat, btw

I wrote a simple app that the bot will repeat what I typed:

<template>
  <div id="container" class="container">
    <basic-vue-chat
      :title="'AI-Chatbot'"
      :initial-feed="feed"
      :new-message="message"
      @newOwnMessage="onNewOwnMessage"
    />
  </div>
</template>

<script>
import BasicVueChat from "basic-vue-chat";
import moment from 'moment';

const initialFeed = [
  {
    id: 1,
    author: "Bot",
    contents: "你好！",
    date: moment().format('HH:mm:ss')
  }
];

let contents = "fuckmeover";

export default {
  data: function() {
    return {
      feed: initialFeed,
      message: {
        id: 1,
        author: "Bot",
        contents: contents,
        date: moment().format('HH:mm:ss')
      }
    };
  },
  methods: {
    onNewOwnMessage: msg => {
      contents = msg;
    }
  },
  components: {
    BasicVueChat
  }
};
</script>

But after I send my message, nothing happened. Why?

I'm a new Vue user, so it may be a stupid question.

Edit: And I can update initalFeed to implement this (by push new messages to it). So what is new-message used for?