WebChat 2.0.3 BETA Download 2.0.3b

5.0
gb Kevin B 3 years ago

screenshot

This component adds a mobile-first, individually styled web chat module to OSSN. You need the Pusher Channels service for realtime updates.

You'll want to add the link to the main menu AND/OR redirect logins directly to WebChat using the Component Admin page:
Enable menu link and redirect

Latest Update

v2.0.3 BETA 16th Dec 2020

  • Feature request: Do not clear the message input field when you send a GIPHY
  • Changed component to store settings in the "site settings" rather than "component settings". Once set, these details will no longer need be input after ever install/upgrade.
  • Fixed incorrect case in ID name of ossn_com.xml
  • Moved "Web Chat" link to the "Links" section for better compatibility with OSSN standard installation.

Pre-Requisites:

OSSN >= v5.6
OssnMessages >= 5.4
OssnServices >= 6.4
Private Network >= 5.4

API Keys

GIPHY for animated GIFs that can be added to messages

FREE key from https://developers.giphy.com

Pusher - For the live chat feature

FREE Channels app-key from www.pusher.com

DEMO

https://kjbtech.co.uk/ossn
Demo site is running ossn 5.6, GreenByGreen theme and only has Private Network, API Services and WebChat components installed.

Near future updates

Add ossn credit
Message status dialog
Online status for group members
Block message content of blocked users
Hide blocked users from create new chat dialog
User is typing...
MP4 video uploads
Limits on number of images/videos people can upload
Allow to share images directly from profile
Add type to message table GIPHY, info, photo, profile image etc.
Implement OSSN blocked users
Migrate chat_api to ossn actions
Implement mobile notifications

TIDYING UP

Decide on consistent naming convention throughout. Is it Groups / Chats / WebChat etc. Need to keep language consistent throughout.
Remove ALL error_log / console.log and debug responses
Finish tidying up code and commenting (if I have time to kill)
CSS animations / transitions to make the experience feel more app-like.
Sounds for sending/receiving messages
White border on giphy thumbnail selection
change giphy default search as it keeps failing

NICE TO HAVES:

Encryption and Presence / Private Pusher Channels
Public/Private groups (to plan)
Voice and Video calls
Public Webcam broadcasts / channels
User Search by distance/gender etc
Who looked at me?
View and manage profile / galleries
View and post to walls

I'd be grateful for feedback on how I could improve the component. Any bugs or issues please also report here.

Older updates

Version history can be found in this Google Doc
WebChat Version History

Comments
gb Kevin B Replied 3 years ago

I've removed the download link for now. The whole page will change when the new release is ready... And just a heads up - live chat is now working!

gb Kevin B Replied 3 years ago

UPDATE:
Please feel free to experiment on the demo website and provide feedback - it is INVALUABLE! I'm spending so much time concentrating on getting the coding done, it's quite difficult to test everything as I go... if anyone fancied having a stab at creating some automated testing that would be awesome! lol

COMPLETE
** Rename groups DONE
** Add/remove members DONE
** Change group photo by choosing from previous images DONE
** Delete group images DONE
** Ensure GIPHY previews are using the thumbnails - loading from GIPHY seems slow DONE - now using smaller thumbs for quicker loading, and HD fullscreen if available.
** Default "trending" GIPHY results have stopped working DONE - may have been issue at GIPHY - started working without any changes
*** Implement sharing images to thread DONE
*** Implement thumbnails (improve loading times) DONE
*** Delegate group ownership DONE
*** Allow posting URLs - with URL preview DONE

TO DO
Add check if tables exist on installation of WebChat, creating tables if necessary.
Session validation to avoid 404 error when session times out
Session authentication before any chat_api calls
Live chat and notifications (Pusher)
Implement OSSN blocked users

TIDYING UP
Decide on consistent naming convention throughout. Is it Groups / Chats / WebChat etc. Need to keep language consistent throughout.
Remove ALL error_log / console.log and debug responses
Finish tidying up code and commenting (if I have time to kill)

NICE TO HAVES:
Public/Private groups (to plan)
Allow view of all media aggregated from thread (ensuring only images available are included - don't want to show images from before somebody joined the group)
Voice and Video calls
Public Webcam broadcasts / channels
User Search by distance/gender etc
Who looked at me?
View and manage profile / galleries
View and post to walls

gb Kevin B Replied 3 years ago

Update: not ready to release but thought I'd share a progress report.

I now have a functioning group chat that you can create, add/remove members, change photos and I am really happy with progress so far.

~Z~ Man has been very helpful in the process, testing features as they appear and providing feedback. So a big thank you :)

If anyone else would like to test it out, please feel free to visit the demo site and post your feedback/bugs/issues/recommendations and I'll do my best to implement them.

gb Kevin B Replied 3 years ago

Might be a while before it's ready, but feel free to pay around on the demo site to see it progressing :)

ph Sepiroth X Replied 3 years ago

Wow future update makes me feel excited! Keep up Sir!!

gb Kevin B Replied 3 years ago

In case anyone is waiting for an update, it may be a week or so before the next release... but its a big update.

I've created a Group Chat functionality, which will also completely replace the one-to-one chat messages. This means messages will no longer interfere with OSSN Messages and will be completely standalone.

I should also be able to massively improve performance with this too.

I'll then be aiming to implement url parsing so that when pages are cached offline with the ServiceWorker, you'll be able to still read the messages from all your chats. (I have a theory on how this'll work anyway).

I've attached a teaser of the UI for the Group Chat in case anyone is interested.

GroupChat UI Teaser

gb Kevin B Replied 3 years ago

1.4.4 update out. Still plenty to do but it's coming along nicely I think. :)

gb Kevin B Replied 3 years ago

Ignore the last comment... I think I figured it out and it's much easier now I understand your code 😉

Thanks again for the assistance.

gb Kevin B Replied 3 years ago

Thanks for that Arsalan.

Sorry for asking a dumb question, but i'm still an ossn n00b, so not 100% sure what this is doing. Does it extend messages to be able to process additional parameters?

So for instance, I prepare a new message like below:

$user = ossnuserbyguid(ossnloggedin_user()->guid);

    $instance = ossn_get_message($message_id);
    $message = $instance->message;

    $params['message_id'] = $message_id;
    $params['user'] = $user;
    $params['message'] = $message;
    $params['instance'] = $instance;
    $params['view_type'] = 'actions/send';
    $params['giphyJSON'] = $json;
    echo ossn_plugin_view('messages/templates/message-send', $params);

Then update the below to send the appropriate content?

function my_custom_message_stuff() {
    ossn_add_hook('messages', 'message:smilify', 'my_message_template_config');
    ossn_add_hook('chat', 'message:smilify', 'my_message_template_config');
}

function my_message_template_config($hook, $type, $text, $params) {
    if (isset($params['instance']->giphyJSON)) {
        $text = isset($params['instance']->giphyJSON);
        return $text;
    }
    elseif (isset($params['instance']->message)) {
        $text = $params['instance']->message;
        //more stuff
        return $text;
    }
}
ossn_register_callback('ossn', 'init', 'my_custom_message_stuff');
Indonesian Arsalan Shah Replied 3 years ago

In OSSN message there is no trigger that checks images as there is no image adding facility in default chat/messages.

You may use following

function my_custom_message_stuff() {
    ossn_add_hook('messages', 'message:smilify', 'my_message_template_config');
    ossn_add_hook('chat', 'message:smilify', 'my_message_template_config');
}

function my_message_template_config($hook, $type, $text, $params) {
    if (isset($params['instance']->message)) {
        $text = $params['instance']->message;
        //more stuff
        return $text;
    }
}
ossn_register_callback('ossn', 'init', 'my_custom_message_stuff');

.

Component

Developer: Kevin
License GPL v2
Type: Communication
Requires Ossn Version : 5.5
Latest Version: 2.0.3b
Last Updated 3 years ago
Repository Url View Repository

Versions