move all of the chatbot component in to js/chatbot

[pngwn]

Description

This is the file move for the chatbot component, to get out of @dawoodkhan82's way. Apologies for the delay!

🎯 PRs Should Target Issues

Before your create a PR, please check to see if there is an existing issue for this change. If not, please create an issue before you create this PR, unless the fix is very small.

Not adhering to this guideline will result in the PR being closed.

Tests & Changelog

1. PRs will only be merged if tests pass on CI. To run the tests locally, please set up your Gradio environment locally and run the tests: bash scripts/run_all_tests.sh

2. You may need to run the linters: bash scripts/format_backend.sh and bash scripts/format_frontend.sh

3. Unless the pull request is labeled with the "no-changelog-update" label by a maintainer of the repo, all pull requests must update the changelog located in CHANGELOG.md:

Please add a brief summary of the change to the Upcoming Release section of the CHANGELOG.md file and include
a link to the PR (formatted in markdown) and a link to your github profile (if you like). For example, "* Added a cool new feature by [@myusername](link-to-your-github-profile) in [PR 11111](https://github.com/gradio-app/gradio/pull/11111)".

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
gradio	✅ Ready (Inspect)	Visit Preview	Jul 13, 2023 11:59am

[gradio-pr-bot]

All the demos for this PR have been deployed at https://huggingface.co/spaces/gradio-pr-deploys/pr-4900-all-demos

---

You can install the changes in this PR by running:

pip install https://gradio-builds.s3.amazonaws.com/431140b903970d5ab4afa1212da832109f1bfb97/gradio-3.36.1-py3-none-any.whl

[gradio-pr-bot]

🎉 Chromatic build completed!

There are 0 visual changes to review.
There are 0 failed tests to fix.

• Storybook Preview
• Build Review

[abidlabs]

Thanks @pngwn! Just a couple of questions:

1. Do we need this file: js/app/src/components/Chatbot/index.ts?

• We no longer use this information in the API docs since we get it from the /info route:

	type: {
		payload: "Array<[string, string]>"
	},
	description: {
		payload: "list of message pairs of"
	},
	example_data: config.value?.length
		? config.value
		: [
				["Hi", "Hello"],
				["1 + 1", "2"]
		  ]
});

So the file doesn't seem to have much purpose. Thinking ahead to community components, it would be really nice if all of the files related to a component were entirely in a single directory (e.g.: js/chatbot/)

2. The file above includes this line:

export const modes = ["static"];

But we have the files for the Chatbot source an the interactive/ folder. Is there a reason for this?

[pngwn]

1. Do we need this file: js/app/src/components/Chatbot/index.ts?

• We no longer use this information in the API docs since we get it from the /info route:

	type: {
		payload: "Array<[string, string]>"
	},
	description: {
		payload: "list of message pairs of"
	},
	example_data: config.value?.length
		? config.value
		: [
				["Hi", "Hello"],
				["1 + 1", "2"]
		  ]
});

So the file doesn't seem to have much purpose. Thinking ahead to community components, it would be really nice if all of the files related to a component were entirely in a single directory (e.g.: js/chatbot/)

I didn't realise that, in that case we can remove all of these snippets and I'll make sure to do that when I make a big PR for everything else (hopefully tomorrow/fri).

Regarding the removal of the file, that is the ultimate goal yes but that will be 'stage 2' listed here. Eventually we will just load directly from /interactive/ or /static/ but things will break if i do that now and I don't want to introduce a special case for one components. So the idea is just move the files with as few changes to the core app as possible and make all of those changes at once to js/app when the components have been moved.

This PR specifically was mainly to just get the movage out of the way so that I don't end up with conflicts as @dawoodkhan82 starts to work on the chatbot. There will probably be one or two minor changes but they shouldn't touch the core chatbot code which is the main issue.

2. The file above includes this line:

export const modes = ["static"];

But we have the files for the Chatbot source an the interactive/ folder. Is there a reason for this?

So I'm a bit confused about chatbot really, is it static or interactive? It feels like an interactive component but i guess all it actually does is renders content we pass to it? I guess it is less meaningful when there is only one version of a component (unlike say Image which has two distinct variants). Maybe I should make this a static folder rather than interactive, since that is the default we decided on. Or maybe it is both but the static version disables things like upvoting comments etc?

[abidlabs]

I didn't realise that, in that case we can remove all of these snippets and I'll make sure to do that when I make a big PR for everything else (hopefully tomorrow/fri).

I believe that's the case, @aliabd can you confirm that these snippets are no longer used?

Everything else looks good to me @pngwn!

[aliabd]

yes we don't use the index.ts files for the API docs anymore. Instead we get the python type/example info from the /info route and the js info from the client .view_api